Question

在angularjs中，我们将控制器定义为window。虽然这不会与其他js模块和插件创建名称冲突，但它仍然不是一个好习惯：单个应用程序应该将单个对象暴露给全局命名空间。

这是window中定义的常用方式：

function UserController($scope) { ... }

HTML：

<div ng-controller="UserController">

这就是我的想法：

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

所以在那种情况下，我应该像这样从

启动控制器

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

您怎么看？

Answer 1

其中一种方法是在Angular中定义它，例如你描述的方式。换句话说：

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

我已经确认上述方法不会污染全局命名空间。

编辑：您也不需要使用<div ng-controller="myApp.UserController">，因为您可以在属性ng-app中定义myApp：<body ng-app="myApp">这样您就可以在没有为myApp添加前缀的情况下调用ng-controller。

Answer 2

定义控制器最干净的方法是每个文件1个。每个文件都应该包含一个立即调用的函数表达式（IIFE）或闭包，它允许它拥有自己的局部变量而不会污染全局范围。这是我对项目采取的方法：

my-app.js - 主模块定义文件 - 此文件的主要用途是定义应用程序模块及其依赖项，定义路由（如果正在使用路由），以及配置提供程序。最简单的形式看起来像这样：

(function (angular) {
  angular.module('myApp', ['myApp.someFeature']);
}(angular));

some-feature / some-feature.js - 功能模块定义文件 - 此文件定义功能的模块以及此功能所需的任何依赖项。这可以是任何逻辑分组，而不仅仅是一个功能。这使得在必要时将该功能很容易地引入另一个模块或应用程序。

(function (angular) {
  angular.module('myApp.someFeature', []);
}(angular));

some-feature / some-feature-controller.js - 该功能所需的控制器 - 如果该功能包含多个控制器，则需要更具描述性的名称，但我们假设此功能仅需要1个控制器。

(function (angular) {
  function SomeFeatureController($scope) {
    ...
  }

  angular
    .module('myApp.someFeature')
    .controller('SomeFeatureController', SomeFeatureController);
}(angular));

index.html - Page 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>

Answer 3

正如btesser在单独的文件和函数中编写控制器并在控制器的函数原型中定义其方法的建议是AngularJS应用程序的最佳实践。您可以使用闭包或IIFE来防止污染全局命名空间，它只会将您的函数暴露给当前上下文。

＆＃13;

(function(){
'use strict';

angular.module('myApp', [])
.controller('MyAppCtrl', MyAppCtrl)

;
  
function MyAppCtrl(){
  this.greeting = 'I\'m app ctrl';
}
  
MyAppCtrl.prototype.hello = function(){
  alert(this.greeting);
}

})();

＆＃13;

<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>
  

	
</body>

＆＃13;

不用angularjs污染全局

3 个答案: