AngularJSAngularJS_01之基础概述、设计规范及MVC设计模式

1、AngularJS:
开源的JS框架,用来开发单一页面应用,以及数额操作频繁之面貌;
2、设计条件:
①YAGNI原则:You Aren’t Gonna Need It!
永不写不需之代码!
②KISS原则:Keep It Simple and Stupid!
代码保持简洁与具有表现力!
——语义化标记、注释、变量或者措施的命名、减少嵌套;
③DRY原则:Don’t Repeat Yourself!
模块的包!
——提高代码复用率,降低测试难度好后期的迭代和保护;
④high cohesion low coupling:
高内聚低耦合
内聚:一个组件内部不同部分之间的涉;
耦合:不同组件之间的涉嫌;
⑤SRP原则:Single Responsibility Principle!
单纯责任标准!
⑥OCP原则:Open Closed Principle!
开闭原则!
⑦LCP原则:
足足知识标准化!
3、设计模式:
①创造建型模式——五种:
厂子方法模式、抽象工厂模式、单例模式、建造者模式、原型模式;
②结构型模式——七种:
适配器模式、装饰器模式、代理模式、外观模式、、桥接模式、组合模式、享元模式;
③行为模式——十一栽:
策模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模式、解释器模式;
4、MVC设计模式——组合型设计模式:
①M——model——模型数据;V——view——html视图;C——controller——控制器;
view接收用户操作,然后通知controller(控制器)中对应之法门,对model(数据)进行操作,反过来更新view(视图);
5、AngularJS:
①开源的根据MVC的JS框架,用于为数操作为主的SPA应用,其四非常特点方便数据处理以及模块方便实现SPA应用;
②季格外特点:
a、采用MVC的设计模式:
符合当下互联网的发展趋势——职责的细致分;
模块化开发——提高代码复用率,降低测试难度,维护好;
b、双向数据绑定:
AngularJS区别为其他框架的主要特征;
c、依赖注入:
由此注入某些服务或者对象,直接调用;
d、模块化设计:
AngularJS框架本身就是合模块化设计,使用框架结合模块、控制器、服务等来兑现模块化开发;
③使用:
基本功语法:
{{expression}}:可实施括号中的表达式,将结果输出到innerHTML中;
ng-app:自动载入并启动ng应用;
ng-init:初始化数据(变量、对象、数组…);
*
ngApp——用来启动ng应用,同时指定angular应用的企图范围,出了限制ng表达式指令无法为实施,且只有同意调用ngApp指令一不良;
ng常用命令:
ngApp、ngInit、ng-Bind、ngRepeat(让HTML支持循环)、ngIf(让HTML支持选择/判断)、ngShow(true为显示)、ngHide(true为隐藏);
4、ng的MVC使用:
①声称模块:
var app=angular.module(‘myApp’,[‘ng’]);
②挂号模块:
ngApp指令:ng-app=”myApp”;
③扬言控制器:
app.controller(‘myCtrl’,function(){});
④运用控制器:
ngController指令:ng-controller=”myCtrl”;
⑤于控制器的回调函数中,注入$scope对象,指定模型数据:$scope.变量=值;
⑥显示:
{{}}——ng指令:
$scope作用域控制目标,将模型数据与视图建立联系;
初始化数据——ngInit:
$scope对象;
⑦指令:
<ANY ng-XX=”>
<ANY
ng-init=”变量誉为=值;变量名=值…”></ANY>——允许声明变量,双向绑定;
<ANY
ng-bind=”表达式”></ANY>——将指定的表达式的值输出为目前元素的innerHTML;
<ANY ng-repeat=”临时变量名 in
对象/数组”></ANY>——为HTML添加循环功能;
<ANY ng-repeat=”(下标变量名,值变量名叫) in
对象/数组”></ANY>——为HTML添加循环功能;
<ANY ng-if=”表达式”></ANY>——为HTML添加选择功能;
ng-click、ng-dbclick、ng-focus、ng-blur;
⑧注意:
概念模型数据,必须注入$scope;
ng-controller所在的价签中的意向范围,才能够鉴别控制器所声明的变量、方法;

相关文章