Question

我正在尝试模块化角度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

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

(function () {
  'use strict';

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

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

如果在修复后它没有工作，请使用您的本地代码而不是小提琴代码创建一个小提琴，以防止出现任何拼写错误，我会看看。

另外，我没有在你的HTML中看到routes.js，或者你的意思是config.html。

Answer 2

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

例如，我使用以下设置模块化我的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) {

});

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

2 个答案: