1
以下のデモでui-routerの親子状態を利用したいと思います。アプリケーションは正常に動作しているように見えますが（コンソールエラーはありません）、htmlはレンダリングされず、コントローラのinit関数も起動しません。このテクニックにはまったく新しいものがあり、構成に何が問題なのかはわかりません。抽象的な状態を取り除き、アプリケーションを正常に設定すると、「Hello World」というテキストが表示されます。ネストされた状態では、コントローラをHTMLまたは初期化しません。
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();
}
})();
また、ネストされた状態がで読み込むことができます名前付きビューを使用した任意の「ui-view」 https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views – Ladmerc