Я новичок в Angular, ui-router и generator-ng-poly и надеюсь, что кто-нибудь может помочь с тем, что, вероятно, является простой проблемой синтаксиса.
Я использую генератор-ng-poly для нового проекта и работаю с «примером глубокого уровня» с приложением на основе Angular 1.3, используя ui-router и HTML.
Сначала я создал «домашний» модуль, а затем внутри него модуль «заголовок». Так...
yo ng-poly:module home
yo ng-poly:module home/header
Что дает мне эти два контроллера: app/home/home.js
(function () {
'use strict';
/* @ngdoc object
* @name home
* @requires $stateProvider
*
* @description
*
*/
angular
.module('home', [
'ui.router',
'home.header'
]);
angular
.module('home')
.config(config);
function config($stateProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home/home.tpl.html',
controller: 'HomeCtrl',
controllerAs: 'home'
});
}
})();
и app/home/header/header.js
(function () {
'use strict';
/* @ngdoc object
* @name home.header
* @requires $stateProvider
*
* @description
*
*/
angular
.module('home.header', [
'ui.router'
]);
angular
.module('home.header')
.config(config);
function config($stateProvider) {
$stateProvider
.state('header', {
url: '/header',
templateUrl: 'home/header/header.tpl.html',
controller: 'HeaderCtrl',
controllerAs: 'header'
});
}
})();
Теперь я хочу использовать «заголовок» из home.tpl.html, и я борюсь с тем, как это сделать. Из того, что я понимаю, либо
<div ui-view=“header”></div>
or
<div ui-view=“home.header”></div>
должно сработать. Но это не так. Многочасовое гугление не помогло, так как во всех примерах используется более распространенный формат $stateProvider, в котором есть такие связанные состояния:
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home/home.tpl.html',
controller: 'HomeCtrl',
controllerAs: 'home'
})
.state('home.header', {
url:'/header',
templateUrl: 'home/header/header.tpl.html',
controller: 'header/header-controller.js',
controllerAs: 'header'
});
Как я должен ссылаться на «заголовок», чтобы он правильно отображался внутри home.tpl.html?