AngularJS教程 AngularJS从0到1——HelloWorld

一、下载AngularJS库

AngularJS现在已更新到2.x版本，但是现在开发者用的较多的是1.x版本，在此以1.3版本为例。

angularjs官方网站：https://angularjs.org
当然啦，国外网站嘛，打开速度可能会有点慢，你也可以选择到我的csdn资源里免费下载。

csdn资源下载地址：http://download.youkuaiyun.com/detail/jasper_success/9823119

二、HelloWorld

要求：在输入框中输入文本，< p >标签的内容随之改变。

<input type="text" ng-model="username"/>
<p ng-bind="username"></p>
<p>{{username}}</p>

这就是一个最简单的angularjs demo，由此你也可以体会到angularjs数据绑定的强大之处。

注意，这里我使用了两个p标签，两个p标签的文本信息都同时改变。这是因为在angularjs中，ng-bind指令和{{}}的作用是相同的。使用的时候注意ng-bind是用在标签内部的，而{{}}是用在标签外部的。

ng-bind和{{}}的区别在于，如果页面数据尚未加载完，那么{{}}中的代码会显示到页面上，而ng-bind不会。

三、指令整理

• ng-model 数据模型
• ng-bind 数据绑定

四、练习

要求：页面中有两个输入框和一个span标签，输入框中输入数字后，span标签中自动计算二者相加之和。

代码展示：

<input type="number" ng-model="num1" />
<input type="number" ng-model="num2" />
<span ng-bind="num1+num2"></span>

五、美图欣赏