angularjs介绍
-是什么？
--为动态Web应用设计的结构框架
---AngularJS 是一个为动态WEB应用设计的结构框架，提供给大家一种新的开发应用方式，这种方式可以让你扩展HTML的语法，以弥补在构建动态WEB应用时静态文本的不足，从而在web应用程序中使用HTML声明动态内容。
核心功能
-双向数据绑定
实现了model与view完全绑定在一起，model变化，view也变化，反之亦然
-模板
模板相当于HTML文件被浏览器解析到DOM中，AngularJS遍历这些DOM，AngularJS把模板当做DOM来操作，去生成一些指令来完成对View的数据绑定
-MVVM
吸收了传统的MVC设计模式，但又不是传统意义上的MVC，更接近于MVVM（Model-View-ViewModel）
-依赖注入
拥有内建的依赖注入子系统，可以帮助开发人员更容易的开发，理解和测试应用
-指令
可以用来创建自定义的标签，也可以用来装饰元素，或者操作DOM属性
为什么要使用
前后端分离，后端只提供数据接口，路由，模板渲染等在前端完成
HTML和JS分离，展示和逻辑分离
减少JS代码，减少DOM元素查找，事件绑定等代码
适合API开发
使用前准备
1.官网下载文件，拷贝到工程中
2.使用CDN
https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js
http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js
常用指令
1.介绍
AngularJS有一套 完整的、可扩展的、用来帮助web应用开发的指令集
使得HTML可以转变成“特定领域语言（DSL）”，用来扩展浏览器能力的技术之一，在DOM编译期间，和HTML关联着的指令会被检测到，并且被执行，这使指令可以为DOM指定行为，或者改变它
指令就是HTML的新属性，来扩展HTML，带有前缀”ng-“
绑定在DOM元素上的函数，可以调用方法、定义行为、绑定controller以及$scope对象、操作DOM等等
当关联的HTML结构进入编译阶段时应该执行的操作
本质上只是一个当编译器编译到相关DOM时需要执行的函数，可以卸载元素的名称里，属性里，CSS类名里，注释里
AngularJS的动态性和响应能力，都要归功于指令属性，常用的有: ng-app / ng-init / ng-model / ng-bind / ng-repeat
2.ng-app
<div ng-app="">
</div>
一个AngularJS应用程序初始化完成了标记作用域，
也就是div元素就是AngularJS应用程序的所有者，
在它里面的指令也就会被AngularJS编译器所编译、解析了
表明一个AngularJS应用程序
初始化AngularJS程序
拥有该指令的标签为根节点，开始编译其中的DOM
3.ng-init
初始化作用
//变量
<div ng-app="" ng-init="name = 'lidaze'; age = 18">
{{ name + " " + age }}
</div>
//对象
<div ng-app="" ng-init="person = {name: 'lidaze', age: 18}">
{{ person.name }}
</div>
//数组
<div ng-app="" ng-init="arr = [12, 23, 56, 34]">
{{ arr[0] }}
</div>
。。。
使用一个控制器或模块来代替它
4.ng-model
使用ng-model指令可以把应用程序数据绑定到HTML元素，实现model和view的双向绑定
<div ng-app="">
<input type="text" ng-model="name">
<h1>{{ name }}</h1>
</div>
原理
a. angular加载完成之后会启动，首先找ng-app
b. 找到后认为ng-app里面的所有内容都归angular来管
c. 找子层标签里所有指令，然后就可以找到ng-model
d. 找到会生成数据模型，然后挂在根作用域上
e. 然后下面的所有标签都可以读取ng-model的值
5.表达式
在 {{ }} 里面可以写我们想写的东西
{{ 20 + 20 }}
{{ num1 + num2 }}
{{ firstName + " " + lastName }}
6.ng-bind
和 {{}} 类似
<div ng-app="" ng-init="firstName = '李'; lastName = '泽'">
<input type="text" ng-model="firstName">
<input type="text" ng-model="lastName">
<!-- <h1>{{ firstName + " " + lastName }}</h1> -->
<h1 ng-bind="firstName + ' ' + lastName"></h1>
</div>
和 {{}} 区别
ng-bind在angular解析渲染完毕后将数据显示出来
在使用花括号语法时，因为浏览器需要首先加载页面，渲染它，然后AngularJS才能把它解析成你期望被看到的内容，所以对于首个页面中的数据绑定操作，建议使用ng-bind，以避免其未被渲染的模板被用户看到。
7.ng-click
定义一个AngularJS单机事件
<div ng-app="" ng-init="flag = true;">
<button type="button" ng-click="flag = !flag">点击修改</button>
{{ flag }}
</div>
扩展
ng-show
设置HTML元素可见
ng-hide
设置HTML元素隐藏
8.ng-repeat
遍历数据集合中的每个数据元素
向HTML容器中添加多个类似DOM元素的时候，适合使用ng-repeat
遍历数组
<div ng-app="" ng-init="names = ['李大泽', '李小泽', '老王', '小赵', '王五']">
<ul>
<li ng-repeat="name in names">{{ name }}</li>
</ul>
</div>
遍历对象
<div ng-app="" ng-init="person = {name: 'lidaze', age: 18, gender: 'man'}">
<ul>
<li ng-repeat="(key, value) in person">{{ key + " " + value }}</li>
</ul>
</div>
遍历数组套对象
<div ng-app="" ng-init="people = [{name: 'lidaze1', age: 18, gender: 'man'}, {name: 'lidaze2', age: 18, gender: 'man'}, {name: 'lidaze3', age: 18, gender: 'man'}]">
<ul>
<li ng-repeat="p in people">{{ p.name + " " + p.age + " " + p.gender }}</li>
</ul>
</div>
9.ng-class
预设指令，用来动态自定义dom元素的css className
示例
<div class="" ng-app="" ng-init="flag = false;">
<button type="button" ng-click="flag = !flag;" name="button">修改颜色</button>
<section ng-class="{true: 'active', false: 'inactive'}[flag]">
</section>
</div>
10.ng-include
将多个页面公共的提取出来
示例
<div class="" ng-app="" ng-init="flag = false;">
<div class="" ng-include="'common.html'">
</div>
</div>
网友评论