定義控制器的最簡潔的方法是每個文件1個。每個文件都應該包含一個立即調用的函數表達式(IIFE)或閉包,它允許它擁有自己的局部變量而不污染全局範圍。這是我對我的項目採取的方法:
my-app.js - 主模塊定義文件 - 此文件的主要用途是定義應用程序模塊及其依賴項,定義路由(如果使用路由),以及配置提供商。在其最簡單的形式,它看起來是這樣的:
(function (angular) {
angular.module('myApp', ['myApp.someFeature']);
}(angular));
一些特徵/一些-feature.js - 功能模塊定義文件 - 該文件定義了一個模塊的功能,並且該功能需要的依賴。這可以是任何邏輯分組,而不僅僅是一個功能。如果需要,這可以很容易地將該功能引入另一個模塊或應用程序中。
(function (angular) {
angular.module('myApp.someFeature', []);
}(angular));
某些特徵/一些特徵-controller.js - 爲對功能所需控制器 - 如果特徵包括多個控制器,將需要一個更具描述性的名字,但讓我們假設這個功能只需要1個控制器。
(function (angular) {
function SomeFeatureController($scope) {
...
}
angular
.module('myApp.someFeature')
.controller('SomeFeatureController', SomeFeatureController);
}(angular));
的index.html - HTML頁面文件 - 非常自我解釋
<html ng-app="myApp">
<head>
<title>My Angular App</title>
<!-- Note: Angular and jQuery (if used) go in head so they delay view loading -->
<script type="text/javascript" language="javascript" src="angular.js"></script>
</head>
<body ng-controller="SomeFeatureController">
Content here....
<!-- Note application files go at the end of the body so they do not delay view loading -->
<script type="text/javascript language="javascript src="my-app.js">
<script type="text/javascript language="javascript src="some-feature/some-feature.js">
<script type="text/javascript language="javascript src="some-feature/some-feature-controller.js">
</body>
</html>
我不知道'module'對象內部'controller'功能,但讓很多道理=)致謝。 –
Angular需要更好的文檔。這是一個很好的框架,但它有一個陡峭的學習曲線 –
感謝關於如何使用ng-app而不是ng-controller模塊的編輯 – Alex