angular基础

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

---

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、设计模式（）
总体来说设计模式分为三大类：

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

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

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

MVC：--》终极目标：模块化和复用

---

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

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

---

认识AngularJS

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

---

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

<script src="js/angular.js"></script>

---

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

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

<div ng-controller="myCtrl">
    <input type="checkbox" ng-checked="checked">是否同意
</div>

---

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}}'/>

6、事件：

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

两种方法：①ngInit 耦合度比较高 ②$scope
初始化模型数据：通过控制器的$scope来实现。

7.ngDisabled

语法:<ANY ng-Disabled="表达式"></ANY>

用途：按钮是否可用

8.ngChecked

语法:<ANY ng-checked="表达式"></ANY>

用途：按钮是否选中

9、ngStyle/ngClass...

---