CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
NealR
NealR

Reputation: 10689

Nested state doesn't render html or initialize controller

I want to take advantage of ui-routers parent/child states with the demo below. The app appears to be running fine (no console errors), however the html will not render, and the controller's init function isn't firing either. Brand new to this technique, not sure what's wrong with the configuration. Removing the abstract state and configuring the app as normal causes the "Hello World" text to appear.

Plunker

config.js

(function() {
'use strict'
var app = angular.module('app.core');
app.config(AppRouter);
AppRouter.$inject = ['$stateProvider', '$urlRouterProvider'];

function AppRouter($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/login');
  $stateProvider
    .state('main', {
        url: '',
        abstract: true
    })
    .state('main.login', {
      url: '/login',
      templateUrl: 'login.html',
      controller: 'LoginController',
      controllerAs: 'vm',
    });
}
})();

index.html

<body ng-app="app">
<div ui-view=""></div>
<script src="app.module.js"></script>
<script src="app.route.js"></script>
<script src="core.module.js"></script>
<script src="config.js"></script>
<script src="login.module.js"></script>
<script src="login.controller.js"></script>
</body>

login.html

<p>Hello World!</p>

login.controller.js

  (function() {
  'use strict';

  var app = angular.module('app.login');

  app.controller('LoginController', LoginController);

  LoginController.$inject = ['$location', '$filter', '$window', '$rootScope'];

  function LoginController($location, $filter, $window, $rootScope) {
      var init = function(){
          console.log('here');
      };

      init();
  }
  })();

Upvotes: 1

Views: 38

Answers (1)

charlietfl
charlietfl

Reputation: 171669

Each nested state needs a <ui-view> in it's parent template to load into.

Just change your abstract state from:

.state('main', {
        url: '',
        abstract: true
})

To:

.state('main', {
        url: '',
        template:'<ui-view>',
        abstract: true
})

This template could of course be more advanced and also use templateUrl

Upvotes: 1

Related Questions