Angular 入門

Created: November-22, 2018

建立一個新的 HTML 檔案並貼上以下內容：

<!DOCTYPE html>
<html ng-app>
<head>
  <title>Hello, Angular</title>
  <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
</head>
<body ng-init="name='World'">
  <label>Name</label>
  <input ng-model="name" />
  <span>Hello, {{ name }}!</span>
  <p ng-bind="name"></p>
</body>
</html>

現場演示

使用瀏覽器開啟檔案時，你將看到一個輸入欄位，後跟文字 Hello, World!。編輯輸入中的值將實時更新文字，而無需重新整理整個頁面。

說明：

從 Content Delivery Network 載入 Angular 框架。

<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>

使用 ng-app 指令將 HTML 文件定義為 Angular 應用程式
```
<html ng-app>
```
使用 ng-init 初始化 name 變數
```
<body ng-init=" name = 'World' ">
```
請注意，ng-init 僅用於演示和測試目的。構建實際應用程式時，控制器應初始化資料。
將資料從模型繫結到 HTML 控制元件上的檢視。用 ng-model 將 <input> 繫結到 name 屬性
```
<input ng-model="name" />
```
使用雙括號 {{ }} 顯示模型中的內容
```
<span>Hello, {{ name }}</span>
```
另一種繫結 name 屬性的方法是使用 ng-bind 而不是 handlebars{{ }}
```
 <span ng-bind="name"></span>
```

最後三個步驟建立了雙向資料繫結 。對輸入所做的更改會更新模型，這將反映在檢視中。

使用車把和 ng-bind 之間存在差異。如果你使用把手，你可能會在解析表示式之前（在載入資料之前）看到實際的 Hello, {{name}} 作為頁面載入，而如果使用 ng-bind，它將僅在解析名稱時顯示資料。作為替代方案，指令 ng-cloak 可用於防止把手在編譯之前顯示。