AngularJS_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所在的标签内部的作用范围,才能识别控制器所声明的变量、方法;
AngularJS_01之基础概述、设计原则及MVC设计模式的更多相关文章
- java 28 - 1 设计模式 之 面向对象思想设计原则和模版设计模式概述
在之前的java 23 中,了解过设计模式的单例模式和工厂模式.在这里,介绍下设计模式 面向对象思想设计原则 在实际的开发中,我们要想更深入的了解面向对象思想,就必须熟悉前人总结过的面向对象的思想的设 ...
- 面向对象设计思想和MVC设计模式
虽然之前学习Java时有接触过面向对象的设计思想,但因当时Java没学好.所以导致这两天讲php的面向对象设计时,感到没有头绪,这也反应了我练习少和逻辑能力的不足.而MVC设计思想 面向对象就是要将系 ...
- 面向对象程序的设计原则--Head First 设计模式笔记
一.找出应用中可能需要变化的地方,把它们独立出来,不要和那些不需要变化的代码混在一起. 把会变化的部分取出并“封装”起来,好让其他部分不会受到影响.这样,代码变化引起的不经意后果变少,系统变得更有弹性 ...
- Unity3D设计原则
原则1:单一职责 原则2:里氏替换原则(子类扩展但不改变父类功能) 原则3:依赖倒置原则 原则4:接口隔离原则 原则5:迪米特法则(最少知道原则) 原则6:开闭原则 原则1:单一职责原则 说到单一职责 ...
- 连载:面向对象的葵花宝典:思考、技巧与实践(39) - 设计原则 vs 设计模式
它的设计原则,和设计模式,是否该用它? ============================================================================= 在& ...
- JAVA设计模式总结之六大设计原则
从今年的七月份开始学习设计模式到9月底,设计模式全部学完了,在学习期间,总共过了两篇:第一篇看完设计模式后,感觉只是脑子里面有印象但无法言语.于是决定在看一篇,到9月份第二篇设计模式总于看完了,这一篇 ...
- 设计原则:开-闭原则(Open-Closed Principle, OCP)
开-闭原则就是软件实体应当对扩展开放,对修改关闭.(Software entities should be open for extension,but closed for modification ...
- Java设计原则—开闭原则(转)
原文出自:http://www.cnblogs.com/muzongyan/archive/2010/08/05/1793454.html 开闭原则(Open Closed Principle)是Ja ...
- Java设计模式的7种设计原则还有很多人不知道
前言 其实没有设计模式我们也能完成开发工作.但是为什么需要设计模式呢?让你看起来很牛,没错这个算一个.让你的代码层次感分明,可读性强而且容易维护.让你像我一样有更多的摸鱼划水时间. 可能有人说我一个类 ...
随机推荐
- JS核心系列:浅谈函数的作用域
一.作用域(scope) 所谓作用域就是:变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的. function scope(){ var foo = "global&quo ...
- Python高手之路【四】python函数装饰器
def outer(func): def inner(): print('hello') print('hello') print('hello') r = func() print('end') p ...
- Kooboo CMS技术文档之五:站点配置管理
站点关系 管理站点间的关系,站点可以有子站点,子站点继承父站点的部分配置数据,同时子站点还可以根据需要,本地化由父站点继承而来的数据.通过继承和本地化,可以让子站点在用最小的改动代价,来完成一个与父站 ...
- HTML5 input元素新的特性
在HTML5中,<input>元素增加了许多新的属性.方法及控件.本文章分别对这三方面进行介绍. 目录 1. 属性 2. 方法 3. 新控件 1. 属性 <input>元素在H ...
- 再部署一个 instance 和 Local Network - 每天5分钟玩转 OpenStack(131)
上一节部署了 cirros-vm1 到 first_local_net,今天我们将再部署 cirros-vm2 到同一网络,并创建 second_local_net. 连接第二个 instance 到 ...
- [转载]Cookie/Session的机制与安全
Cookie和Session是为了在无状态的HTTP协议之上维护会话状态,使得服务器可以知道当前是和哪个客户在打交道.本文来详细讨论Cookie和Session的实现机制,以及其中涉及的安全问题. 因 ...
- .Net语言 APP开发平台——Smobiler学习日志:如何快速在手机上实现ContextMenu
最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 样式一 一.目标样式 我们要实现上图中的效果,需要如下的操作: 1.从工具栏上的&qu ...
- bzoj3037--贪心
题目大意: applepi手里有一本书<创世纪>,里面记录了这样一个故事--上帝手中有着N 种被称作"世界元素"的东西,现在他要把它们中的一部分投放到一个新的空间中去以 ...
- JDBC增加删除修改
一.配置程序--让我们程序能找到数据库的驱动jar包 1.把.jar文件复制到项目中去,整合的时候方便. 2.在eclipse项目右击"构建路径"--"配置构建路径&qu ...
- isEmpty和isNull()区别
isEmpty和isNull()区别一个NULL字符串一定是一个空串,一个空串未必是一个NULL字符串例如:QString().isNull(): //结果为trueQString().isEm ...