angularjs介绍

官网https://angularjs.org/

-是什么？

--为动态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


            


一个AngularJS应用程序初始化完成了标记作用域，
也就是div元素就是AngularJS应用程序的所有者，
在它里面的指令也就会被AngularJS编译器所编译、解析了

表明一个AngularJS应用程序
初始化AngularJS程序
拥有该指令的标签为根节点，开始编译其中的DOM

3.ng-init

初始化作用

//变量

 {{ name + " " + age }}

//对象

 {{ person.name }}

//数组

 {{ arr[0] }}

。。。

使用一个控制器或模块来代替它

4.ng-model

使用ng-model指令可以把应用程序数据绑定到HTML元素，实现model和view的双向绑定


 
 {{ name }}

原理

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

和 {{}} 类似

和 {{}} 区别

ng-bind在angular解析渲染完毕后将数据显示出来
在使用花括号语法时，因为浏览器需要首先加载页面，渲染它，然后AngularJS才能把它解析成你期望被看到的内容，所以对于首个页面中的数据绑定操作，建议使用ng-bind，以避免其未被渲染的模板被用户看到。

7.ng-click

定义一个AngularJS单机事件


      
      {{ flag }}

扩展
ng-show
设置HTML元素可见

ng-hide
设置HTML元素隐藏

8.ng-repeat

遍历数据集合中的每个数据元素
向HTML容器中添加多个类似DOM元素的时候，适合使用ng-repeat

遍历数组

    
        {{ name }}

遍历对象

   
       {{ key + " " + value }}

遍历数组套对象

            
                {{ p.name + " " + p.age + " " + p.gender }}

9.ng-class

预设指令，用来动态自定义dom元素的css className

示例

10.ng-include

将多个页面公共的提取出来

示例

注意：

必须用web容器打开站点才能成功，本地文件访问模式会报错

ng-include的值如果要写文件名需要加单引号，否则会被当做变量

angular入门