Angular简介
AngularJS是一款由Google公司开发维护的前端MVC框架，其克服了HTML在构建应用上的诸多不足，从而降低了开发成本提升了开发效率。
AngularJS与我们之前学习的jQuery是有一定的区别的，jQuery更准确来说只一个类库（类库指的是一系列函数的集合）以DOM做为驱动（核心），而AngularJS则一个框架（诸多类库的集合）以数据和逻辑做为驱动（核心）。框架对开发的流程和模式做了约束，开发者遵照约束进行开发，更注重的实际的业务逻辑。
-
AngularJS特性核心的是：
模块化。每个模块的代码独立拥有自己的作用域，model，controller
双向数据绑定。view层的数据和model层的数据是双向绑定的，其中之一发生更改，另一方会随之变化，这不用你写任何代码
语义化标签。可以将很多功能封装成HTML的标签,属性，这大大美化了HTML的结构，增强了可阅读性.
依赖注入。将这种后端语言的设计模式赋予前端代码，这意味着前端的代码可以提高重用性和灵活性，未来的模式可能将大量操作放在客户端，服务端只提供数据来源和其他客户端无法完成的操作.
-
jquery与angular的区别
- jquery与angular能共存，jquery是一个类库，而angular是类库的集合
- jquery是以dom为驱动，angular是以数据为驱动
依赖：依赖:大多数面向对象编程语言，在调用一个类的时候，先要实例化这个类，生成一个对象。如果你在写一个类，过程中要调用到很多其它类，甚至这里的其它类，也要“依赖”于更多其它的类。这就是依赖的意思。
依赖注入：全称是“依赖注入到容器”， 容器（IOC容器）是一个设计模式，它也是个对象，你把某个类（不管有多少依赖关系）放入这个容器中，可以“解析”出这个类的实例。所以依赖注入就是把有依赖关系的类放入容器（IOC容器）中，然后解析出这个类的实例。
MVC简介
MVC是一种开发模式，指的是 Model View Controller；由模型（model），视图（view），控制器（controller）三部分组成。
- V-View，视图层，一般是我们的html文件层，用于展示数据内容。
- C-Controller，控制器，控制器帮助将模型(Model)层数据给视图层(view),或者当视图(View)层数据有所改变时，通知模型层(Model)，模型层(Model)数据也做相应的改变。
- M-Model，模型，当我们需要使用到数据的时候，数据暂存在这里。如var str="hello",或者从数据库中取出数据之后，将数据赋给一个对象或者变量，都可以理解为数据模型。
MVC运行机制
- 视图需要数据，把需要的数据发送给控制器
- 控制器去找模型要数据
- 模型处理数据，将处理好的数据返回给控制器
- 控制器将处理好的数据返回给视图
AngularJS创建模块
模块：AngularJS是以模块化的方式组织的，将整个应用划分成若干个模块，每个模块都有其特定功能，再利用某种方式将模块组织起来形成一个整体。
模块使用
先引入angular.js文件
- 创建模块
AngularJS中提供了一个全局对象angular，其中使用angular.module()方法定义一个模块
var app=angular.module('app',[]);
- 第一个参数：模块名称，第二个参数：依赖的模块
- 创建控制器
控制器作为视图与模型之间的桥梁，当控制器创建完成之后，同时也获取了模型，默认为$scope
app.controller('xmgController', ['$scope', function ($scope) {
$scope.msg = '描述信息';
}])
- 第一个参数：模控制器块名称，第二个参数：依赖的服务，再注入服务
- 绑定模块 ng-app=模块名称
通过添加属性ng-app绑定模块，模块绑定的位置代表着angular在当前页面支持范围
- 一个页面可以绑定多个模块，但是模块之间不可以嵌套
- 通常一个html中只对应一个模块
- 绑定控制器
{{msg}}
- 一个模块内可以有多个控制器，控制器可嵌套
代码示例
{{msg}}
Angular指令
指令：给原生的html添加一些新的属性，达到想要的效果（也就是angular自定义的一些属性和标签，都是以ng-为前缀）
- 常用内置指令：
- ng-app 指定应用模块,至少有一个
- ng-controller 指定控制器
- ng-show 控制器元素是否显示, true显示、false不显示
- ng-hide 控制元素是否隐藏，true隐藏、false不隐藏
- ng-if 控制元素是否“存在”，true存在、false不存在
- ng-src 增强图片路径
- ng-href 增强地址
- ng-class 控制类名
- ng-include 引入模板
- ng-disabled 表单禁用
- ng-readonly 表单只读
- ng-checked 单/复选框表单选中
- ng-selected 下拉框表单选中
- ng-bind 获取属性的值插入到当前标签中（单向数据绑定包括插值语法与ng-bind属性）
代码示例
{{name}}
{{msg2}}
SKv5876666
注意：
01 ng-src，增强图片路径。当在img标签中使用src属性来加载路径，图片会加载，但是会报错。
原因：与angular执行机制有关，当执行代码的时候，会先执行html文件，当执行到img标签时，读取属性src的路径无法识别，会报错，html执行完，回头执行angular时，读取到路径{{url}}，图片展示；
解决：使用ng-src时，执行html文件时就无法识别，执行到angular时才会识别，不会报错
面试题：
02 数据绑定：使用插值语法绑定数据，会造成闪烁情况。
原因：与img标签情况类似，也是先执行htm文件时，当做普通文本执行，会先出现普通文本的样式，再执行angular时，又会出现其他文本样式；
解决：给当前标签添加属性ng-cloak，在通过属性选择器设置样式display：none；解析html文件时，会进行样式设置为none，解析angular文件时会设置ng-cloak为显示
/*单向绑定方式:
1.插值语法 {{}} {{name}} 会闪烁 可以绑定多个属性
2.ng-bind 不会闪烁, 只能绑定一个属性
3.ng-bind-template 不会闪烁,可以绑定多个属性 格式: {{}} 以插值的 方式添加
*/
{{name}}-{{msg}}
-->
- 事件指令：
事件处理：ng-click=‘处理方法’，ng-mousedown....
- ng-repeat与ng-switch指令
//1.创建模块
var app = angular.module('app', []);
//2.创建控制器
app.controller('xmgController',['$scope', function($scope){
$scope.type = 'js';
$scope.course = ['html', 'css', 'js'];
}]);
//3.绑定模块
//4.绑定控制器
var value = 'js';
switch (value){
case 'html':
alert('html');
break;
case 'css':
alert('css');
break;
case 'js':
alert('js');
break;
default:
alert('没有匹配到')
}
-
{{value}}
ng-repeat指令，循环遍历，ng-repeat="value in course" ，course：代表需要遍历的对象，value：代表遍历对象的值；
- 数据双向绑定
双向绑定：模型数据可以绑定到视图上，视图将数据展示到界面；视图数据可以绑定到模型上（MVVM）（注：只要想获取文本框的内容，input，textarea，section.....等，立马想到数据绑定）
指令：ng-model
{{name}}
tab切换实例
Title
- 前端学院
- iOS学院
- java学院
- UI精品学院
备忘录实例
Title
- 待办事项
- 已完成事项
-
{{obj.name}}
删除
详情
-
{{obj.name}}
删除
详情