AngularJS-1

框架：优秀的可以重复使用的代码，单独提取并封装，提高代码的服用了、开发速度，并保证良好的浏览器的兼容性。


angularJS、phoneGap、Ionic、ZeptoJS、React。。。


判断框架：①它适用的场景 ②如何使用 ③遇到了问题怎么解决(维基百科、官网、论坛（stackoverflow）)




一、常用的设计原则和设计模式


1、设计原则（明确）
① YANGI（You aren't gonna need it） 不写不需要的代码
②KISS（Keep it simple and stupid） 代码越简单越好
③DRY（Don't Repeat Yourself）封装代码
④高内聚低耦合
内聚：一个模块内部的不同部分之间的关系
耦合：不同模块/组件的关系
⑤SRP(single responsibility principle) 单一责任原则
⑥OCP（open closed principle） 开闭原则
对扩展开放 对修改关闭
⑦LCP（least knownledge principle） 最少知识法则




2、设计模式（23种 了解）
总体来说设计模式分为三大类：


①创建型模式，共五种：工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。


②结构型模式，共七种：适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。


③行为型模式，共十一种：策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模式、解释器模式。




经常用到的设计模式：
工厂方法模式、单例模式、适配器模式、解释器模式、观察者模式


MVC、MVVM、MVP。。。--》终极目标：模块化和复用


MVC：
Model（模型数据）、View（视图）、Controller（控制器）


遥控器--》控制器：数据的增删改查的操作
电视 --》View：展示数据
光缆 --》Model：模型数据


why MVC？
解耦（降低代码的耦合度）、职责的切分。。。。


工作原理：当对视图操作的时候，触发控制器中的一些方法，在这些方法中对于数据的增删改查的操作，借助一些绑定显示，更新到视图。




二、认识AngularJS


1、什么是AngularJS
ng是一个由Google维护的开源的框架，实现单页面应用程序，适用于数据操作比较频繁的场景


2、为什么AngularJS
四大特征：
①采用了MVC的设计模式
②双向数据绑定
③依赖注入
④模块化设计


3、怎么使用？
引入对应的js文件。


3.1 表达式
语法：{{表达式}}
作用：将表达式的结果输出到调用该表达式的元素的innerHTML中




3.2 指令
ngApp指令：①指定angularJS的作用范围②自动载入并启动ng应用


ngInit指令：初始化一些变量（对象、数组。。。），注意：不需要写上var关键字
语法：<ANY ng-init=""></ANY>


练习：ngInit指令创建一个对象数组（学生数组），模拟4个对象，每个对象包含name、sex、score；将对象数组输出到一个table中。


步骤：
①引入js文件，指定ngApp指令
②通过ngInit初始化数据
③将数据展示在table中。






ngApp/ngInit
注意事项：ngInit来初始化变量的时候，如果需要初始化多个变量，只需要通过‘；’来隔开
<span ng-init="name='lucy';age=20">{{name}}</span>


ngApp指令ng应用的作用范围，如果ngApp调用了多次，只有第一次是生效的。


三、ng常用的指令


ng中的指令：是由AngularJS提供的，可以将指令用在HTML中作为扩展属性、扩展标签


扩展属性用法：<ANY ng-xx=""></ANY>
扩展标签用法：<ngView></ngView>


1、ngBind
用法： <ANY ng-bind=“”></ANY>
双花括号 -》表达式的结果输出到调用元素的innerHTML中。
ngBind 将表达式的结果输出到调用元素的innerHTML中，但是相对于{{}}，解决在ng启动较慢时，{{}}闪烁的问题。


2、ngRepeat指令
为HTML添加循环功能
语法1：<ANY ng-repeat="临时变量 in 集合"></ANY>
语法2：<ANY ng-repeat="（下标变量名，值变量名） in 集合"></ANY>


用途：对于指定的集合的每个成员，依次赋值给临时变量，将当前元素循环输出一遍。


$index/$first/$middle...




3、ngIf指令
为HTML添加选择功能
语法:<ANY ng-if="表达式"></ANY>
用途：表达式的结果为true，当前元素会挂到DOM树，否则删除。



4、ngShow/ngHide


语法:<ANY ng-show="表达式"></ANY>
用途：根据表达式输出结果，true-》显示 false-》隐藏



语法:<ANY ng-hide="表达式"></ANY>
用途：根据表达式输出结果，true-》隐藏  false-》显示


5、ngSrc 
语法：<img ng-src='{{url}}'/>




四、AngularJS如何实现MVC
M： model 模型数据：js定义的变量
V： view 视图：增强过后的html，显示数据
C： controller 控制器，负责数据的操作，function来处理



步骤：
①声明一个模块
var app = angular.module('模块名','依赖列表');
②注册模块：ng-app='模块名'
③声明控制器： app.controller('控制器名字'，function(){})
④调用控制器：ng-controller='控制器名字'
⑤操作：操作模型数据($scope.name='xiaofang'
⑥显示 （<p>{{name}}</p>）
在控制器的范围内，通过ng指令或者双花括号语法来显示数据



$scope是一个控制器的作用域对象，服务service，单例模式的对象)


事件：
单击事件 ngClick--》  <button ng-click='show()'></button>
ngDblClick
ngMouseEnter/Leave...