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 可用于防止把手在编译之前显示。