参考:菜鸟教程
https://www.runoob.com/angularjs/angularjs-tutorial.html
简介
通过新的属性和表达式扩展了 HTML
可以构建一个单一的页面应用程序
AngularJS 是一个 JavaScript 框架,它可通过 script 标签添加到 HTML 页面(引入anjularjs库文件)
AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML
什么是anjularjs
AngularJS 把应用程序数据绑定到 HTML 元素
AngularJS 可以克隆和重复 HTML 元素
AngularJS 可以隐藏和显示 HTML 元素
AngularJS 可以在 HTML 元素"背后"添加代码
AngularJS 支持输入验证
基础指令:是以 ng 作为前缀的 HTML 属性
ng-app:指令定义一个 AngularJS 应用程序,告诉 AngularJS某个元素是 AngularJS 应用程序 的"所有者",一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序
ng-model:指令把元素值(例如输入域的值)绑定到应用程序
ng-bind:指令把应用程序数据绑定到HTML视图
ng-init:指令初始化 AngularJS 应用程序变量
数据绑定的方式
Anjular JS对象
<label type="text" ng-init="Person={firstName:'May',lastName:'Song'}" /> 姓:
<label>{{Person.firstName}}</label>
Anjular JS数组
<label type="text" ng-init='counts=["I","am","New","people"]' /> 显示第三个数据:
<label>{{counts[2]}}</label>
Anjular JS表达式:AngularJS 使用 表达式 把数据绑定到 HTML
(1)AngularJS 表达式写在双大括号内:{{"表达式" }}
(2)AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙
(3)AngularJS 将在表达式书写的位置"输出"数据
(4)AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量
Anjular JS表达式与Javascript表达式
似于 JavaScript 表达式,AngularJS 表达式可以包含字母,操作符,变量。
与 JavaScript 表达式不同,AngularJS 表达式可以写在 HTML 中。
与 JavaScript 表达式不同,AngularJS 表达式不支持条件判断,循环及异常。
与 JavaScript 表达式不同,AngularJS 表达式支持过滤器。
数据绑定
单价:<input type="text" ng-model="quantyBind" ng-init="quantyBind='2'" />
数量:<input type="text" ng-model="countBind" ng-init="countBind='1'" />
<label>总价是:{{quantyBind}}*{{countBind}}={{quantyBind*countBind}}</label>
ng-repeat:遍历循环一个数组
<label ng-init="Names=['Mike','Amy','Summer','Lady']"></label>
<ul>
<li ng-repeat="x in Names">
{{x}}
</li>
</ul>