展示所有常见的 Angular 结构

Created: November-22, 2018

以下示例在一个文件中显示常见的 AngularJS 构造：

<!DOCTYPE html>
<html ng-app="myDemoApp">
  <head>
    <style>.started { background: gold; }</style>
    <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
    <script>
      function MyDataService() {
        return {
          getWorlds: function getWorlds() {
            return ["this world", "another world"];
          }
        };
      }

      function DemoController(worldsService) {
        var vm = this;
        vm.messages = worldsService.getWorlds().map(function(w) {
          return "Hello, " + w + "!";
        });
      }

      function startup($rootScope, $window) {
        $window.alert("Hello, user! Loading worlds...");
        $rootScope.hasStarted = true;
      }
      
      angular.module("myDemoApp", [/* module dependencies go here */])
        .service("worldsService", [MyDataService])
        .controller("demoController", ["worldsService", DemoController])
        .config(function() {
          console.log('configuring application');
        })
        .run(["$rootScope", "$window", startup]);
    </script>
  </head>
  <body ng-class="{ 'started': hasStarted }" ng-cloak>
    <div ng-controller="demoController as vm">
      <ul>
        <li ng-repeat="msg in vm.messages">{{ msg }}</li>
      </ul>
    </div>
  </body>
</html>

该文件的每一行解释如下：

现场演示

ng-app="myDemoApp"，引导应用程序的 ngApp 指令，告诉角度 DOM 元素由名为 myDemoApp 的特定 angular.module 控制;
<script src="angular.min.js"> 是引导 AngularJS 库的第一步 ;

声明了三个函数（MyDataService，DemoController 和 startup），这些函数在下面使用（和解释）。

angular.module(...) 与数组一起使用作为第二个参数创建一个新模块。此数组用于提供模块依赖项列表。在这个例子中，我们链接调用 module(...) 函数的结果;
.service(...) 创建一个 Angular Service 并返回链接模块;
.controller(...) 创建一个 Angular Controller 并返回模块进行链接;
.config(...) 使用此方法注册需要对模块加载执行的工作。
.run(...) 确保代码在启动时运行并将一组项目作为参数。使用此方法注册在完成注入器加载所有模块时应执行的工作。
- 第一项是让 Angular 知道 startup 函数需要将内置的 $rootScope 服务作为参数注入;
- 第二项是让 Angular 知道 startup 函数需要将内置的 $window 服务作为参数注入;
- 数组中的最后一项 startup 是启动时运行的实际函数;
ng-class 是用于设置动态 class 的 ngClass 指令，并且在此示例中动态利用 $rootScope 上的 hasStarted
ng-cloak 是一个指令，用于防止在 Angular 完全加载应用程序之前简单显示未呈现的 Angular html 模板（例如“{{ msg }}”）。
ng-controller 是一个指令，它要求 Angular 实例化一个具有特定名称的新控制器来编排 DOM 的那一部分;
ng-repeat 是使 Angular 迭代一个集合并为每个项目克隆一个 DOM 模板的指令 ;
{{ msg }} 展示插值：现场渲染范围或控制器的一部分;