Question

这是我有角度应用程序的当前（工作）方式。

app.js

    require('angular');
    require('angular-ui-router');

    var listStoresCtrl      = require('./controllers/store/listStoresCtrl');
    var createStoreCtrl     = require('./controllers/store/createStoreCtrl.js');
    var storeDetailsCtrl    = require('./controllers/store/storeDetailsCtrl.js');

    var listDepartmentsCtrl         = require('./controllers/dept/listDepartmentsCtrl');
    var createDepartmentCtrl        = require('./controllers/dept/createDepartmentCtrl.js');



    //-- init angular js
    var ngApp = angular.module('ngApp', ['ui.router'], function($interpolateProvider){
        //-- as the output conflicts with blade lets alter the defaults
        $interpolateProvider.startSymbol('[['); 
        $interpolateProvider.endSymbol(']]');
    }).config(['$stateProvider','$logProvider','$urlRouterProvider', function ($stateProvider, $logProvider,$urlRouterProvider) {
        //-- enable logging
        $logProvider.debugEnabled(true);    
    }]);


    ngApp.controller('listStoresCtrl', ['$scope', 'Store', '$log', listStoresCtrl]);
    ngApp.controller('createStoreCtrl', ['$scope', '$log', 'Store', '$rootScope', '$timeout','ManagerService', createStoreCtrl]);
    ngApp.controller('storeDetailsCtrl', ['$scope', '$log', '$rootScope', 'Store', storeDetailsCtrl]);

    ngApp.controller('listDepartmentsCtrl', ['$scope', 'Department', '$log', listDepartmentsCtrl]);
    ngApp.controller('createDepartmentCtrl', ['$scope', '$log', 'Department', '$rootScope', '$timeout','ManagerService', createDepartmentCtrl]);

    //-- stick it all together and kick it off
    angular.bootstrap(document, ['ngApp']);

但是我想重组这个，以便我的商店ctrls等和部门ctrls都在他们自己的模块中。

EG： storeCtrls.js

    angular.module('storeCtrls', [])
        .controller('listStoresCtrl', ['$scope', 'Store', '$log', listStoresCtrl])
        .controller('createStoreCtrl', ['$scope', '$log', 'Store', '$rootScope', '$timeout','ManagerService', createStoreCtrl])
        .controller('storeDetailsCtrl', ['$scope', '$log', '$rootScope', 'Store', storeDetailsCtrl]);

然后在 app.js 文件中调用它们。

    require('./controllers/storeCtrls');

    angular.module('ngApp', ['storeCtrls'], function($interpolateProvider){...}

但由于某些原因，这不起作用我得到未捕获对象的错误。

关于此的一些相关历史：

我正在使用 Gulp 和 Browserify 来制作我的JS。

我的listStoresCtrl例如正在使用

    module.exports = function(scope, Store, log){...}

返回它们的方法。

更新

我似乎已经对未捕获的对象进行了排序，因为我错过了[＆＃39; ui.router＆＃39;]并调用了

 angular.module('ngApp', ['storeCtrls']...

所以它应该是

 angular.module('ngApp', ['ui.router', 'storeCtrls']..

现在让其余部分联系起来......

Answer 1

似乎主要问题是我没有注入一些我只是删除但忘记重新添加的项目。

我必须通过调用

复制此注入['ui.router']

   angular.module('ngApp', ['storeCtrls']...

我应该在下面添加：

   angular.module('ngApp', ['ui.router', 'storeCtrls']..

现在让其余部分联系起来......

AngularJS：重组困难

1 个答案: