AngularJS_01之基础概述、设计标准及MVC设计格局

1、AngularJS:
开源的JS框架,用来开发单一页面应用,以及数额操作频仍的场景;
二 、设计基准:
①YAGNI原则:You Aren’t Gonna Need It!
毫不写不必要的代码!
②KISS原则:Keep It Simple and Stupid!
代码保持简洁和有着表现力!
——语义化标记、注释、变量恐怕措施的命名、减弱嵌套;
③DRY原则:Don’t Repeat Yourself!
模块的包装!
——提升代码复用率,降低测试难度方便早先时期的迭代和维护;
④high cohesion low coupling:
高内聚低耦合
内聚:3个零件内部差距组成部分之间的关系;
耦合:不相同组件之间的涉及;
⑤SRP原则:Single Responsibility Principle!
纯净义务标准!
⑥OCP原则:Open Closed Principle!
开闭原则!
⑦LCP原则:
最少知识标准化!
叁 、设计格局:
①创造型形式——多种:
厂子方法形式、抽象工厂情势、单例格局、建造者格局、原型格局;
②结构型格局——种种:
适配器格局、装饰器格局、代理方式、外观形式、、桥接格局、组合形式、享元形式;
③行为格局——十一种:
方针形式、模板方法方式、观看者情势、迭代子情势、权利链模式、命令情势、备忘录形式、状态格局、访问者格局、中介者方式、解释器形式;
肆 、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所在的竹签内部的意义范围,才能辨识控制器所申明的变量、方法;

相关文章