Javascript 没有用angularjs污染全球_Javascript_Angularjs

Javascript 没有用angularjs污染全球

javascript angularjs

Javascript 没有用angularjs污染全球,javascript,angularjs,Javascript,Angularjs,在angularjs中，我们将控制器定义为窗口。虽然这不会与其他js模块和插件产生名称冲突，但这仍然不是一个好的做法：单个应用程序应该向全局命名空间公开单个对象这是通常的方式，在窗口中定义： function UserController($scope) { ... } HTML: 所以在这种情况下，我应该像这样从html启动控制器 <div ng-controller="myApp.UserController"> 你认为呢？其中一种方法是在角度本身内定义它，就像你描述的

在angularjs中，我们将控制器定义为

窗口

。虽然这不会与其他

js

模块和插件产生名称冲突，但这仍然不是一个好的做法：单个应用程序应该向全局命名空间公开单个对象

这是通常的方式，在

窗口中定义：
function UserController($scope) { ... }

HTML:
所以在这种情况下，我应该像这样从html启动控制器
<div ng-controller="myApp.UserController">



你认为呢？
其中一种方法是在角度本身内定义它，就像你描述的那样。换言之：
angular.module（'YourApp'）.controller（'ControllerName'，function（$scope）{}

我已经确认上述方法不会污染全局名称空间
编辑：您也不需要使用
，因为您可以在属性ng app:
中定义myApp，这样您就可以调用ng控制器，而无需每次都在myApp前面加前缀。
定义控制器的最干净方法是每个文件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-功能所需的控制器-如果功能包括多个控制器，则需要更具描述性的名称，但假设此功能只需要一个控制器
(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>


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

（函数（）{
"严格使用",；
angular.module（'myApp'，[]）
.controller（'MyAppCtrl'，MyAppCtrl）
;
函数MyAppCtrl（）{
this.greeting='I'm app ctrl'；
}
MyAppCtrl.prototype.hello=函数（）{
警惕（这是问候语）；
}
})();

{{ctrl | json}
你好
我不知道模块
对象内部有控制器功能，但很有意义=）谢谢。Angular需要更好的文档。这是一个很好的框架，但它有一个陡峭的学习曲线，用于编辑如何将模块与ng应用程序而不是与ng控制器一起使用。注意，上面的代码假设“YourApp”模块已经创建并正在检索它。如果您是第一次创建它，它应该是：angular.module（'YourApp'，[]）。。。注意第二个参数中的[]。
(function (angular) {
  function SomeFeatureController($scope) {
    ...
  }

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

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