Question

我正在使用Angular作为前端框架的项目。我把所有代码都放在这种格式的abc.js中：

(function(){

    var globalVariable1;
    var globalVariable2;
    var globalVariable3;
    var globalVariable4;

    var myApp = angular.module('coolapp',[]);

    myApp.controller('Controller1', [$scope, $rootScope, function(){
           //blah blah
    }]);

    myApp.factory('Factory1', function(){
           //blah blah
    });
    //....
})();

现在有超过500行，有很多全局变量。

我计划将它们分成不同的文件。我该怎么办？我们说我创建了

main.js

(function(){

    var globalVariable1;
    var globalVariable2;
    var globalVariable3;
    var globalVariable4;

    var myApp = angular.module('coolapp',[]);


})();

Controller1.js

(function(){

    var myApp = angular.module('coolapp');

    myApp.controller('Controller1', [$scope, $rootScope, function(){
           //blah blah
    }]);

})();

我应该在main.js中写什么来要求或包含或注入（不确定它们之间有什么区别）Controller1.js？

Answer 1

您只需要创建另一个模块来处理所有控制器并为主模块提供依赖： -

main.js

var myApp = angular.module('coolapp',['cntrlApp']);

Controller1.js

var myApp = angular.module('cntrlApp');
 myApp.controller('Controller1', [$scope, $rootScope, function(){
           //blah blah
    }]);

Answer 2

是。你的方式是正确的方式。您还可以查看RequireJS

Answer 3

假设您的项目将继续增长，我建议您使用require.js与Typescript一起使用。我们已经实现了这一点，它极大地提高了代码的稳健性，并且管理和重构代码变得更加容易。

然后，根据您的应用程序的复杂程度，您可能会考虑将其构建到域模型中，然后构建视图，服务等....显然，这很大程度上取决于项目的复杂程度。＃39;重新建设，以及你认为你正在进行项目的地方。

Answer 4

关于如何最好地构建Angular应用程序，有很多意见。你似乎朝着一个好方向前进。这是我喜欢的方式：

在 index.html 中，单独包含脚本。自我调用的匿名函数将使用Angular进行自我调整。使用像Grunt或Gulp这样的构建过程来稍后缩小和连接它们。

<script src="main.js"></script>
<script src="Controller1.js"></script>
<script src="Factory1.js"></script>

在 main.js 中（我称之为app.js，我认为这是用户偏好）。

(function() {

  'use strict';


  angular
    .module('MyApp', [
      // any module dependencies
    ]);


})();

在 Controller1.js 中，设置控制器，将其定义为Angular控制器和应用程序的一部分。

(function() {

  'use strict';


  angular
    .module('MyApp')
    .controller('Controller1', Controller1);


  function Controller1($scope) {
    // do something
  }


})();

在 Factory1.js 中，设置工厂功能并将其定义为Angular工厂和应用程序的一部分。

(function() {

  'use strict';


  angular
    .module('MyApp')
    .controller('Factory1', Factory1);


  function Factory1() {
    return function() {
      // return something
    };
  }


})();

之后，没有太多事情要做。我的main.js通常有一个配置函数并处理路由。您可以通过将ng-app="MyApp"添加到html或body来初始化应用。只需将属性ng-controller="Controller1"添加到DOM中的元素，即可初始化Controller1。如果您需要Controller1可以访问Factory1，那么当您在 Controller1.js 中定义函数Controller1时，请执行此操作function Controller1($scope, Factory1) {}。

这就是你真正需要的所有内容和运行单独的文件。

如何组织角度js代码？

4 个答案: