javascript - Angular JS中跨多个文件的 Controller

Question

我正在尝试模块化 Angular js 项目的实现。我的目标是在他们自己的 js 文件中实现不同的 Controller 。但这似乎不起作用。

下面是我的config.js(这里也定义了主模块)

(function() {
var app= angular.module("spa", [

    //oob angular modules


    //3rd party modules
    'ui.router',
    'ui.bootstrap'
]);

app.config(['$stateProvider', '$urlRouterProvider', configRoutes]);

//function to config the routes

function configRoutes($stateProvider, $urlRouterProvider) {

    $stateProvider
    .state('dashboard', {
        url: '/',
        templateUrl: '../App/Views/dashboard.html',
        controller: 'dashboardController',
        controllerAs: 'vm'
    })

    .state('supplier', {
        url: '/suppliers',
        templateUrl: '../App/Views/supplier.html',
        controller: 'supplierController',
        controllerAs: 'vm'
    })

    .state('event', {
        url: '/events',
        templateUrl: '../App/Views/event.html',
        controller: 'eventController',
        controllerAs: 'vm'
    })

    .state('partner', {
        url: '/partners',
        templateUrl: '../App/Views/partner.html',
        controller: 'partnerController',
        controllerAs: 'vm'
    })





    $urlRouterProvider.otherwise('/');

}

app.controller('dashboardController', dashboardController)

function dashboardController() {
    alert('dashboard-same function');
}
}());`

dashboardController 触发良好。但是其他 Controller ，写在单独的文件中不会触发。

(function () {

'use strict';

var app = angular.module('spa');
app.controller('eventController', eventController);

function eventController() {
    alert('event');
}
});

这是我的引用序列:

<!--External Libs-->
<script src="../Scripts/jquery-1.9.1.js"></script>
<script src="../Scripts/angular.js"></script>
<script src="../Scripts/angular-animate.js"></script>
<script src="../Scripts/angular-sanitize.js"></script>
<script src="../Scripts/angular-cookies.js"></script>
<script src="../Scripts/angular-ui-router.js"></script>
<script src="../Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>   

<!--Jquery Plugins-->

<!--Custom Libs-->
<script src="../App/Common/config.js"></script> 

<!--Controllers-->
<script src="../App/Controllers/event.js"></script>
<script src="../App/Controllers/partner.js"></script>
<script src="../App/Controllers/dashboard.js"></script>
<script src="../App/Controllers/supplier.js"></script>

提前致谢

Answer 1

根据我的评论，您忘记执行 eventController.js 的包装函数。应该是

(function () {
  'use strict';

  var app = angular.module('spa');
  app.controller('eventController', eventController);

  function eventController() {
      alert('event');
  }
})();
//^^--------You forgot these

如果在上述修复后它不起作用，请从您的本地代码而不是 fiddle 代码创建一个 fiddle 以防止任何拼写错误，我会看一下。

此外，我在您的 html 中没有看到 routes.js，或者您指的是 config.html。