Angular JS 中跨多个文件的控制器

Question

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

下面是我的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 触发正常。但是其他控制器，写在单独的文件中不会触发。

(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

不完全确定你这边出了什么问题，但这是我如何做的一个例子：

例如，我使用以下设置来模块化我的 AngularJS 应用程序 (v1.3.6)：

index.html:

<html>
<head>
    <title>Modularize</title>

    <!-- load module -->
    <script src="app/app.js"></script>
    <script src="app/app.constant.js"></script>
    <script src="app/app.config.js"></script>
    <script src="app/app.run.js"></script>

    <!-- load controllers/services/directives/factories -->
    <script src="app/controllers/MyController.js"></script>
</head>
<body>
    <!-- REST OF THE APP -->
</body>
</html>

app.js

var myapp = angular.module('spa', ['ui.router']);

app.constant.js

myapp.constant(function () {

});

app.config.js

myapp.config(function ($stateProvider) {
    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'app/views/home.html',
            controller: 'MyController',
        });
});

app.run.js

myApp.run(function () {

});

MyController.js

myapp.controller('MyController', function ($scope) {

});

Answer 2

根据我的评论，您忘记执行 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。

Angular JS 中跨多个文件的控制器

Controllers across multiple files in Angular JS

javascript

angularjs

angular-ui-router