创建一个新的HTML文件并粘贴以下内容：
<!DOCTYPE html>
<html ng-app>
<head>
<title>Hello, Angular</title>
<script xx_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!。编辑输入中的值将实时更新文本，而无需刷新整个页面。
说明：
从内容交付网络加载Angular框架。
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
使用ng-app指令将HTML文档定义为Angular应用程序
<html ng-app>
使用初始化name变量ng-init
<body ng-init=" name = 'World' ">
请注意，ng-init仅应用于演示和测试目的。在构建实际应用程序时，控制器应初始化数据。
将数据从模型绑定到HTML控件上的视图。一个绑定<input>的name财产ng-model
<input ng-model="name" />
使用双括号显示模型中的内容 {{ }}
<span>Hello, {{ name }}</span>
绑定name属性的另一种方法是使用ng-bind代替把手"{{ }}"
<span ng-bind="name"></span>
最后三个步骤建立了两种方式的数据绑定。对输入所做的更改将更新模型，该模型将反映在视图中。
使用把手和会有所不同ng-bind。如果使用把手，Hello, {{name}}则在解析表达式之前（加载数据之前），页面加载时可能会看到实际情况；而如果使用ng-bind，则仅在解析名称时显示数据。作为替代方案，该指令ng-cloak可用于防止在编译之前显示把手。