AngularJs- UI-router parent layout by child layout

Question

I am using angular js for creating spa(single page application) app.But i am facing issue while updating base layout by child layout.

Here is my app structure ::

Anyone help me to design my app.

1).how to switch layout 1 to layout 2.

2).After loading layout 1 how to render it's child pages.

Read the ui router documentation, especially the section about named views, multiple views and child views it's fairly simple but you didn't tried it yet — maurycy, Jun 21 '16 at 09:10
Here is how to use [layout with UI-Router](http://stackoverflow.com/q/25667660/1679310) and here how to make the [layout template dynamic](http://stackoverflow.com/q/27774287/1679310) ... — Radim Köhler, Jun 21 '16 at 09:11
As written above, you should first read the great tutorials, and the post a question for a specific scenario/issue you're having with your project (supported by the code you're having trouble with), currently it's way to broad to answer — Alon Eitan, Jun 21 '16 at 09:13
Appreciate your quick reply.But my question is how we can jump to layout1->page3 to layout2-page4 with spa. layout1 and layout 2 are two different templates. — Niks, Jun 21 '16 at 09:24
@Niks It doesn't seem that you have actually **READ** the tutorials, because it's written there - black on white (but with pixels because it's computer), how to do it - https://github.com/angular-ui/ui-router/wiki — Alon Eitan, Jun 21 '16 at 09:25

score 0 · Answer 1 · answered Jun 21 '16 at 09:16

I'm using AngularJS ngRoute with $routeProvider. Hope this can help

var Hero = angular.module('heroApp', ['ngRoute']);
Hero.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.
        when('/photos', {
            templateUrl: '/photos.html',
            controller: 'photosCtrl'
        }).
        when('/users', {
            templateUrl: '/users.html',
            controller: 'usersCtrl'
        }).
        otherwise({
            redirectTo: '/'
        });
    }]);

And URL to access the route beginning with # like this: http://localhost/#photos

But the OP is asking about [ui-router](https://github.com/angular-ui/ui-router) which is 100 times better than the basic angularjs routing service, and you can use `$locationProvider.html5Mode(true)` to tell angularjs to use the HTML5 routing when available — Alon Eitan, Jun 21 '16 at 09:21

AngularJs- UI-router parent layout by child layout

1 Answers1