Question

我试图在项目变得太大之前将角度代码移动到单独的文件中。

我尝试将app，controllers和services移动到单独的文件中，但错误停止引用代码中的点（或者它们过于通用）。

我决定将文件内容放在大<script>标记上，以便我可以解决错误并使其正常工作。不幸的是，我遇到了this （由于......无法实例化模块protonApp）并且不知道如何跟踪问题（我是角色新手）

在

(function () {
    'use strict';
    ...
}());

我对代码进行了整理是因为我所做的（小）研究表明，当它们位于不同的文件中时，你应该将它们放在这些代码之间。

(function () {
    'use strict';
    var app = angular.module('protonApp',['ui.router','protonAppControllers','protonAppServices']);

    app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
        ...
    }]);

    app.value('debug',true);

    app.run(function($rootScope,$state,$http,debug,LeftMenuService) {
        ...
    });
}());


(function () {
    'use strict';
    angular.module('protonAppControllers', ['$scope','$http','LeftMenuService']);
}());


(function () {
    'use strict';
    angular.module('protonAppServices', ['$rootScope','$http']);
}());

(function () {
    'use strict';
    angular.module('protonAppControllers').controller('loginController',['$scope','$http','$state',function($scope,$http,$state){
        ...
    }]);
}());

(function () {
    angular.module('protonAppControllers').controller('surveyListController',['$scope','$http','LeftMenuService',function($scope,$http,LeftMenuService){
        ...
    }]);
}());

(function () {
    'use strict';
    angular.module('protonAppControllers').controller('surveyHelpController',['$scope','$http','LeftMenuService',function($scope,$http,LeftMenuService){
        ...
    }]);
}());


(function () {
    'use strict';
    angular.module('protonAppServices').service('LeftMenuService', function($http,$rootScope){
        ...
    });
}());

修改

进一步挖掘显示我无法访问任何控制器文件中的$rootScope或$scope

Answer 1

在声明模块时你不需要注入任何东西，你可以在控制器中使用它们，如提到的@ThibauDL
我通常更喜欢在角度app声明之上声明模块。

我已修改了plnkr中的代码，可以让您了解代码的组织方式。

＆＃13;

(function() {
  'use strict';
  angular.module('protonAppControllers', []);
  angular.module('protonAppServices', []);

  var app = angular.module('protonApp', ['ui.router', 'protonAppControllers', 'protonAppServices']);

  app.config(['$stateProvider', '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {
      //...
    }
  ]);

  app.value('debug', true);

  app.run(function($rootScope, $state, $http, debug, LeftMenuService) {
    //...
  });
}());


(function() {
  'use strict';
  angular.module('protonAppServices').service('LeftMenuService', function($http, $rootScope) {
    //...
  });
}());

(function() {
  'use strict';
  angular.module('protonAppControllers').controller('loginController', ['$scope', '$http', '$state',
    function($scope, $http, $state) {
      $scope.login = "Hi Please login!";
      // ...
    }
  ]);
}());

(function() {
  angular.module('protonAppControllers').controller('surveyListController', ['$scope', '$http', 'LeftMenuService',
    function($scope, $http, LeftMenuService) {
      //...
    }
  ]);
}());

(function() {
  'use strict';
  angular.module('protonAppControllers').controller('surveyHelpController', ['$scope', '$http', 'LeftMenuService',
    function($scope, $http, LeftMenuService) {
      $scope.test = "Hxxxxi";
      //...
    }
  ]);
}());

＆＃13;

<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<body ng-app="protonApp">
  <div ng-controller="loginController">
    <input type="text" ng-model='login' />
  </div>
</body>

＆＃13;

此外，您现在可以根据需要将它们放在单独的文件中。

希望有所帮助。

推出app，controller＆amp;单独文件中的服务

1 个答案: