在角度JS中跨多个文件的控制器

I am trying to modularize the implementation of an angular js project. I am aiming to implement different controllers in their own js files. But that doesnt seem to work.

我正在尝试模块化一个角度js项目的实现。我的目标是在它们自己的js文件中实现不同的控制器。但这似乎行不通。

The following is my config.js ( where the primary module is also defined )

下面是我的配置。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');
}
}());`

the dashboardController triggers fine. But other controllers, written in seperate files dont trigger.

dashboardController触发罚款。但是其他的控制器，写在分离文件中不会触发。

(function () {

'use strict';

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

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

This is the sequence of my references:

这是我的参考资料的顺序:

<!--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>

Thanks in advance

谢谢提前

2 个解决方案

#1

As per my comment, you forgot to execute the wrapping function of eventController.js. It should be

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

(function () {
  'use strict';

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

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

If it doesn't work after said fix, please create a fiddle from your local code instead of the fiddle code to prevent any typo errors and I will take a look.

如果它在修复后不起作用，请从您的本地代码中创建一个小提琴，而不是使用小提琴代码来防止任何类型错误，我将看一看。

Also I don't see routes.js in your html, or maybe you meant config.html.

而且我也看不到路线。html中的js，或者是config.html。

#2

Not completely sure what is going wrong on your side, but here is an example of how I do it:

我不完全确定你那边出了什么问题，但我有一个例子来说明我是怎么做的:

For example I am using the following setup for modularizing my AngularJS app (v1.3.6):

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

index.html:

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

app.js

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

app.constant.js

app.constant.js

myapp.constant(function () {

});

app.config.js

app.config.js

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

app.run.js

app.run.js

myApp.run(function () {

});

MyController.js

MyController.js

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

});

#1