I am trying to utilize ui-router's parent/child states with the code snippet below. Everything seems to be in order as there are no console errors, but for some reason the HTML content is not being rendered and the controller's init function is not executing. This is a new technique for me and I'm unsure what could be causing the issue with the configuration. When I remove the abstract state and set up the app normally, the "Hello World" text does appear on the screen.
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();
}
})();