2012-08-25 61 views
22

在angularjs中,我們將我們的控制器定義爲window。雖然這不會與其他js模塊和插件產生名稱衝突,但它仍然不是一個好習慣:單個應用程序應該將單個對象暴露給全局名稱空間。用angularjs不污染全局

這是通常的方式,在window定義:

function UserController($scope) { ... } 

HTML:

<div ng-controller="UserController"> 

這是我認爲的:

myApp.UserController = function ($scope) { ... }; 

因此,在這種情況下,我應該從這樣的HTML啓動控制器,像這樣

<div ng-controller="myApp.UserController"> 

您怎麼看?

回答

22

其中一個方法是在Angular中定義它,比如你描述的方式。換句話說:

angular.module('YourApp').controller('ControllerName', function($scope) {})

我已經證實了上述方法不污染全局命名空間。

編輯:您也不需要使用<div ng-controller="myApp.UserController">,因爲您可以在屬性ng-app中定義myApp:<body ng-app="myApp">這樣,您可以調用ng-controller,而無需每次都在myApp前加前綴。

+1

我不知道'module'對象內部'controller'功能,但讓很多道理=)致謝。 –

+1

Angular需要更好的文檔。這是一個很好的框架,但它有一個陡峭的學習曲線 –

+0

感謝關於如何使用ng-app而不是ng-controller模塊的編輯 – Alex

1

定義控制器的最簡潔的方法是每個文件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> 
0

如建議在單獨的文件和功能定義在控制器的函數原型其方法是最好的做法btesser寫控制器AngularJS應用程序。您可以使用閉包或IIFE來防止污染全局名稱空間,它只會將您的函數暴露給當前上下文。

(function(){ 
 
'use strict'; 
 

 
angular.module('myApp', []) 
 
.controller('MyAppCtrl', MyAppCtrl) 
 

 
; 
 
    
 
function MyAppCtrl(){ 
 
    this.greeting = 'I\'m app ctrl'; 
 
} 
 
    
 
MyAppCtrl.prototype.hello = function(){ 
 
    alert(this.greeting); 
 
} 
 

 
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="myApp"> 
 
<div ng-controller="MyAppCtrl as ctrl"> 
 
    <pre>{{ctrl | json}}</pre> 
 
    <button ng-click="ctrl.hello()">Hello!</button> 
 
</div> 
 
    
 

 
\t 
 
</body>