angularjs不会污染全球

Not polluting global with angularjs

本文关键字：污染 angularjs      更新时间：2023-09-26

在angularjs中，我们将控制器定义为window。虽然这不会造成与其他js模块和插件的名称冲突，但这仍然不是一个好的做法：单个应用程序应该向全局命名空间公开单个对象。

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

function UserController($scope) { ... }

HTML:

<div ng-controller="UserController">

这就是我的想法：

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

所以在这种情况下，我应该从html启动控制器，就像这个

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

你觉得怎么样？

绕过它的方法之一是在Angular本身中定义它，如您所描述的方式。换句话说：

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

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

编辑：您也不需要使用<div ng-controller="myApp.UserController">，因为您可以在属性ng-app:<body ng-app="myApp">中定义myApp。这样，您就可以调用ng控制器，而无需每次都在myApp前加前缀。

定义控制器最干净的方法是每个文件1个。每个文件都应该包装一个立即调用的函数表达式（IIFE）或闭包，使其能够在不污染全局范围的情况下拥有自己的局部变量。这是我在项目中采用的方法：

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

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

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

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

some feature/some-feature-controller.js-该功能所需的控制器-如果该功能包括多个控制器，则需要一个更具描述性的名称，但假设该功能只需要一个控制器。

(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>

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

相关文章：