Question

我使用这个看似很棒的模板作为种子项目，但似乎无法找到添加新控制器的方法。

有一个初始化我的视图的配置文件：

'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 \ controllers目录中找到并分发，其中我有一个带有以下代码的_index.js文件：

'use strict';

var angular = require('angular');
var bulk = require('bulk-require');

module.exports = angular.module('app.controllers', []);

bulk(__dirname, ['./**/!(*_index|*.spec).js']);

我将控制器添加到同一目录中的controllers.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任务：

'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页面。上面的代码中有什么东西突出吗？

Answer 1

问题是您在控制器中使用未定义的对象。视图中的别名与控制器中用于存储对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";
});

找不到我的控制器相同的文件var controllersModule = require

1 个答案: