CODEWITHSUNDEEP
javascriptjqueryangularjsangular-ui-router
Jean Cedron
Jean Cedron

Reputation: 732

Nested views on UI Router in MEAN Application

I am working on a MEAN application and I don't know how can I make my ui-router work as expected.

I have an index.html template where i load all my javascript and css that my application needs to work like angular, jquery, angular-ui-x, bootstrap and inside the index's body i have set an ui-view.

The first state I'm using is login, that uses all index's body ui-view. When users is logged in succesfully, it redirects to a home.html page (state: home) which also is using all index's body. Home has a sidebar a header and a content. Inside home's content i'm placing a nested ui-view.

I want every content that comes next inside home's ui-view. And if it's possible i want to make home abstract so i dont have to do home.state1, etc.

To clarify things i have draw an image (I know, my mspaint level is impressive).

Problem

And here are my states:

myApp.config(function ($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise("login");

    $stateProvider

        .state('login', {
        url: '/login',
        templateUrl: '../views/login.html',
        resolve: {
            deps: ['$ocLazyLoad', function ($ocLazyLoad) {
                return $ocLazyLoad.load([{
                    name: 'myApp',
                    files: [
                        'js/controllers/LoginCtrl.js',
                        'css/login.css'
                    ]
                }]);
            }]
        }
    })

    .state('home', {
        url: '/home',
        templateUrl: '../views/home.html',
        resolve: {
            deps: ['$ocLazyLoad', function ($ocLazyLoad) {
                return $ocLazyLoad.load([{
                    name: 'myApp',
                    files: [
                        'js/controllers/homeCtrl.js',
                        'css/template.css'
                    ]
                }]);
            }]
        }
    })

});

Upvotes: 0

Views: 242

Answers (1)

Okazari
Okazari

Reputation: 4597

Here is an exemple of multiple states with some statics parts (menus etc...)

See it working in this plunker

Here are the states definitions :

app.config(function($stateProvider, $urlRouterProvider){
  $urlRouterProvider.otherwise('/login');
  $stateProvider
  .state('login', {
    url: '/login',
    templateUrl: 'login.html',
    controller: 'LoginCtrl'
  })
  //This is not a real view so we put it abstract
  //This will manage the menus
  .state('app', {
    abstract: true,
    templateUrl: 'app.html',
    controller: 'AppCtrl'
  })
  .state('app.home', {
    url: '/home',
    templateUrl: 'home.html',
    controller: 'HomeCtrl'
  })
  .state('app.greetings', {
    url: '/greetings',
    templateUrl: 'greetings.html',
    controller: 'GreetCtrl'
  })
});

Hope it helped, if you have any other question feel free to ask.

EDIT : I personally prefer to call the abstract state "app" cause it symbolize the application view.

Upvotes: 1

Related Questions