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.
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();
}
})();
