How to "design" a website?

Question

Angular

How to organize an application?
There is a one-page "view" with scrollable sections.
And you need to click on a certain link to go to another "layout" with your own design, such as from the main one to the admin panel.
How to do it?
Make in index.html
<div ui-view></div>
and

$stateProvider.
                        state('/', {
                            url: '/',
                            templateUrl: 'views/index.html'
                        }).
                        state('dashboard', {
                            url: '/dashboard',
                            templateUrl: 'views/dashboard.html'
                        });

,
in this case, you will have to rewrite all the hash anchors from the one-page page to $anchorScrollother legacy from jquery
Or how can you leave index.html alone and just click to go to another page, where it's just a different design?
How to do it better?
Sorry if it's confusing

Answer 1

<nav>
<ul class="nav blah-blah-blah">
    <li data-ui-sref-active="active">
        <a data-ui-sref="/">Home</a>
    </lI>
    <li data-ui-sref-active="active">
        <a data-ui-sref="dashboard">Dashboard</a>
    </lI>
</ul>
</nav>

Answer 2

If you need a different design, you can simply load a different CSS.
Now you can change $rootScope.theme_name to any name and another theme will be loaded.