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...