22

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

这是通常的方式，定义在window：

function UserController($scope) { ... }

HTML：

<div ng-controller="UserController">

这就是我的想法：

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

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

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

你怎么看？

4

3 回答 3

22

解决它的一种方法是在 Angular 本身中定义它，例如您描述的方式。换句话说：

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

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

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

于 2012-08-25T13:12:44.190 回答
1

定义控制器的最简洁方式是每个文件 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 - 页面 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>
于 2014-11-26T09:35:56.673 回答
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>
  

	
</body>

于 2014-12-17T16:38:58.257 回答