展示所有常見的 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 }} 展示插值：現場渲染範圍或控制器的一部分;