初始化角度模块和控制器的正确方法

Question

我正在尝试学习angular.js，并看到了几种初始化模块和控制器的不同方法。

这是我发现如何通过调试一个一直用作指南的站点来做到这一点的方法。

var myApp = angular.module("myApp", []);
myApp.controller("myController", myController);

function myController($scope) {
     //some code
}

她是我在一些不同的教程中看到的一种方式

angular.moudule('myApp', []).controller('myController', function($scope){
    //some code
}

我了解这可能是个人喜好，但我想知道是否有首选的方法或更清洁的方法来执行此操作。 另外，如果有更好的方法也请提及。

Answer 1

这两种方式有多个不同之处：

• 具有全局变量
• 链接方法
• 内联回调函数

这使我们从您的两个示例中获得了八种组合，从而直接比较了每个繁琐的操作。 使用您认为最适合您（和您的团队）并且适合该项目的任何内容（例如，是否需要myApp变量在代码中的其他位置使用，例如从外部文件加载组件等）。 如果仍然不能确定，可以在线找到一些Angular样式指南，以进行探索。

Answer 2

我也遵循约翰·帕帕（John papa）的风格指南。

/* recommended */

// some.controller.js
angular
    .module('app')
    .controller('SomeController', SomeController);

function SomeController() { }

Answer 3

有很多方法，但始终可重用的方法是一种更好且有用的方法。

将模块放在单独的变量中

 var myApp = angular.module('myApp',[]); myApp.controller('FirstController', ['$scope', function($scope) { $scope.greet = 'Hi Im First Controller !'; }]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <div ng-app="myApp" ng-controller="FirstController"> {{ greet }} </div> 

链接方法

 var myApp = angular.module('myApp',[]).controller('SecondController', ['$scope', function($scope) { $scope.greet = 'Hi Im Chained Second Controller !'; }]); 

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <div ng-app="myApp" ng-controller="SecondController"> {{ greet }} </div>