Я использую этот, казалось бы, отличный шаблон в качестве начального проекта, но не могу найти способ добавления новых контроллеров.
Существуют файлы конфигурации, которые инициализируют мои представления:
'use strict';
/**
* @ngInject
*/
function OnConfig($stateProvider, $locationProvider, $urlRouterProvider) {
$locationProvider.html5Mode(true);
$stateProvider
.state('Home', {
url: '/',
controller: 'HomeCtrl as home',
templateUrl: 'home.html',
title: 'Home'
})
.state('Blog', {
url: '/blog',
controller: 'BlogCtrl as blog',
templateUrl: 'blog.html',
title: 'Blog'
})
.state('About', {
url: '/about',
controller: 'AboutCtrl as about',
templateUrl: 'about.html',
title: 'About'
})
$urlRouterProvider.otherwise('/');
}
module.exports = OnConfig;
HTML-часть представлений находится в каталоге представлений, например: views/about.html
Затем контроллеры расположены и распределяются из каталога js\controller, где у меня есть файл _index.js со следующим кодом:
'use strict';
var angular = require('angular');
var bulk = require('bulk-require');
module.exports = angular.module('app.controllers', []);
bulk(__dirname, ['./**/!(*_index|*.spec).js']);
И я добавляю свои контроллеры к этим контроллерам.js в том же каталоге:
'use strict';
var controllersModule = require('./_index');
controllersModule.controller("AboutCtrl", function(){
var vm = this;
blog.title = 'ABOUT PAGE!';
blog.intro = "Everything you wanted to know";
blog.content = "Sed possit legendos ne, mea at magna adhuc, cum et affert diceret eleifend. Qui esse oratio accusamus eu, nostro urbanitas eu nam, nam in erat corpora sadipscing."
});
controllersModule.controller("HomeCtrl", function(){
var vm = this;
vm.title = 'Home Sweet Home';
vm.number = "Number One for You";
vm.intro = "Some text"
});
controllersModule.controller("BlogCtrl", function(){
var vm = this;
blog.title = 'This is The Blog Homepage!';
blog.intro = "Blob"
});
По какой-то причине поднимается только домашний контроллер. Код для home.html выглядит следующим образом:
<div class="row">
<h2 class="heading -large">{{ home.title }}</h2>
<p class="intro">{{home.intro}}</p>
</div>
HTML для других контролов соответствует одному и тому же стандарту:
<h1>{{ blog.title }}</h1>
<h2>{{blog.intro}}</h1>
<p class="intro">{{blog.content}}</p>
Все это скомпилировано в задачу gulp views:
'use strict';
var config = require('../config');
var gulp = require('gulp');
var browserSync = require('browser-sync');
var templateCache = require('gulp-angular-templatecache');
var useref = require('gulp-useref');
var uglify = require('gulp-uglify');
// Views task
gulp.task('views', function() {
var assets = useref.assets();
// Put our index.html in the dist folder
gulp.src('app/index.html')
.pipe(assets)
.pipe(uglify())
.pipe(assets.restore())
.pipe(useref())
.pipe(gulp.dest(config.dist.root));
// Process any other view files from app/views
return gulp.src(config.views.src)
.pipe(templateCache({
standalone: true
}))
.pipe(gulp.dest(config.views.dest))
.pipe(browserSync.stream({ once: true }));
});
Но я не могу понять, почему AboutCtrl и BlogCtrl не заполняют страницы about.html и blog.html. Есть что-то в коде выше, который выделяется?
Проблема в том, что вы используете неопределенные объекты внутри контроллеров. С точки зрения псевдонимов нет никакого отношения к именам переменных, используемых в контроллерах для хранения ссылки на this
.
Изменить:
controllersModule.controller("BlogCtrl", function(){
var vm = this;
blog.title = 'This is The Blog Homepage!';
blog.intro = "Blob";
});
к
controllersModule.controller("BlogCtrl", function(){
var vm = this;
vm.title = 'This is The Blog Homepage!';
vm.intro = "Blob";
});
blog
в ваших контроллерах после того, как вы объявитеvar vm=this
. Алиас в виду не имеет ничего общего с тем, что имя переменной используется в контроллере для хранения ссылок наthis
. Посмотрите на ошибки, возникающие в консоли браузера