Anjularjs基础使用

参考：菜鸟教程

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>
复制代码