AngularJS - 環境設定

本章介紹如何在 Web 應用開發中設定 AngularJS 庫。它還簡要介紹了目錄結構及其內容。

當你開啟連結 https://angularjs.org/ 時，你會看到有兩個選項可以下載 AngularJS 庫：

在 GitHub 上檢視 - 點選此按鈕，你會被引導到 GitHub 並獲取所有最新的指令碼。
下載 AngularJS 1 - 點選此按鈕，你會看到一個如下所示的對話方塊：

此螢幕提供了使用 Angular JS 的各種選項，如下所示：

下載並本地託管檔案
- 有兩個不同的選項：Legacy 和 Latest。名稱本身就具有自描述性。Legacy 版本低於 1.2.x，Latest 版本為 1.3.x。
- 我們還可以選擇最小化、未壓縮或壓縮版本。
CDN 訪問 - 你還可以訪問 CDN。CDN 為你提供對區域資料中心的訪問。在本例中，是 Google 主機。CDN 將託管檔案的責任從你自己的伺服器轉移到一系列外部伺服器。它還有一個優勢，如果你的網頁訪問者已經從同一個 CDN 下載了 AngularJS 的副本，則無需重新下載。

在本教程中，我們始終使用庫的 CDN 版本。

示例

現在讓我們使用 AngularJS 庫編寫一個簡單的示例。讓我們建立一個名為 myfirstexample.html 的 HTML 檔案，如下所示：

線上演示

<!doctype html>
<html>
   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
   </head>
   
   <body ng-app = "myapp">
      <div ng-controller = "HelloController" >
         <h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
      </div>
      
      <script>
         angular.module("myapp", [])
         
         .controller("HelloController", function($scope) {
            $scope.helloTo = {};
            $scope.helloTo.title = "AngularJS";
         });
      </script>
      
   </body>
</html>

讓我們詳細瞭解以上程式碼：

包含 AngularJS

我們在 HTML 頁面中包含 AngularJS JavaScript 檔案，以便我們能夠使用它：

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
   </script>
</head>

你可以在其官方網站上檢視 AngularJS 的最新版本。

指向 AngularJS 應用

接下來，需要告訴 HTML 的哪個部分包含 AngularJS 應用。你可以透過向 AngularJS 應用的根 HTML 元素新增 ng-app 屬性來實現。你可以將其新增到 html 元素或 body 元素，如下所示：

<body ng-app = "myapp">
</body>

檢視

這部分是檢視：

<div ng-controller = "HelloController" >
   <h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
</div>

ng-controller 告訴 AngularJS 使用哪個控制器與該檢視一起使用。helloTo.title 告訴 AngularJS 在此位置的 HTML 中寫入名為 helloTo.title 的模型值。

控制器

控制器部分為：

<script>
   angular.module("myapp", [])
   
   .controller("HelloController", function($scope) {
      $scope.helloTo = {};
      $scope.helloTo.title = "AngularJS";
   });
</script>

此程式碼在名為 myapp 的 Angular 模組中註冊了一個名為 HelloController 的控制器函式。我們將在各自的章節中進一步學習有關模組和控制器的內容。控制器函式透過 angular.module(...).controller(...) 函式呼叫在 Angular 中註冊。

將 $scope 引數模型傳遞給控制器函式。控制器函式添加了一個 helloTo JavaScript 物件，並在該物件中添加了一個 title 欄位。

執行

將上述程式碼儲存為 myfirstexample.html，並在任何瀏覽器中開啟它。你會看到以下輸出：

Welcome AngularJS to the world of Tutorialspoint!

頁面在瀏覽器中載入時會發生什麼？讓我們看看：

HTML 文件載入到瀏覽器中，並由瀏覽器評估。
載入 AngularJS JavaScript 檔案，建立 Angular 全域性物件。
執行註冊控制器函式的 JavaScript 程式碼。
接下來，AngularJS 掃描 HTML 以搜尋 AngularJS 應用以及檢視。
找到檢視後，它將該檢視連線到相應的控制器函式。
接下來，AngularJS 執行控制器函式。
然後，它使用控制器填充的模型資料呈現檢視。頁面現在已準備就緒。

列印頁面