精华内容
下载资源
问答
  • 1、软件工程——软件设计原则  (1)避免重复原则(只要用得到Ctrl+c和Ctrl+v的就算)  (2)KISS原则,代码越简单越傻瓜越好(因为要注重团队意识)  (3)YAGNI原则,不创建不需要的代码(严格遵守客户需要,不...

    1、软件工程——软件设计原则

      (1)避免重复原则(只要用得到Ctrl+c和Ctrl+v的就算)

      (2)KISS原则,代码越简单越傻瓜越好(因为要注重团队意识)

      (3)YAGNI原则,不创建不需要的代码(严格遵守客户需要,不创建不必要的功能)

      (4)开闭原则,不让别人修改自己的代码,但可以扩展它

      (5)单一责任原则(例如在Bootstrap中每一层div包含不同功能的class)

      (6)高聚合低耦合原则,组件内部的逻辑关系越紧密越好,组件和组件之间关系越少越好。(angularjs的模块化设计就是遵循此原则)

      (7)最少知识法则/迪米特法则,例如司机不必知道如何造汽车。(在一个模块或函数中只有本身需要的东西)

     

     

    2、软件工程——设计模式

        象棋(马走日象走田) => 基本套路(双炮枪/马后炮)

    ||     ||

         js(对象/原型/闭包) =>       设计模式   =>      设计框架

      设计模式(Design pattern)是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。

      共23+1种设计模式

    +1的那种设计模式:MVC模式(现在特别常见的设计模式,也是angularjs的设计模式)

      

    3、MVC设计模式

      MVC模式根据逻辑关系,把前端项目的代码分为三个层次:

      (1)Model:模型,就是业务数据,前端项目中就是JS变量;

      (2)View:视图,就是业务数据在用户面前的展现,前端项目中就是HTML

      (3)Controller:控制器,负责业务数据的增删改查,前端项目中就是function

     

    4、AngularJS概述

    AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。所有的操作思路都以“业务数据”为关注点,彻底颠覆了传统的DOM操作。适用于以数据的CRUD(增删改查)操作为主的SPA应用。

     

     

    5、面试题:AngularJS的四大特性

      (1)MVC设计模式

      (2)双向数据绑定

      (3)依赖注入

      (4)模块化设计  例如帮助手册:

     

    注:i18n:   internationalization  国际化,Web项目若可以实现见中国人呈现汉语,见英国人呈现英语。

     

    6、如何使用angularjs(angularjs简写为an)

      引入angular.js文件即可

     

    7、Angular表达式(前提ngApp启动)

      语法:{{ 表达式 }}

      含义:Angular会计算表达式的值,输出在当前位置。

     

    8、Angular表达式可以执行哪些运算

    1. 算数运算?   + - * / %    都可以,唯独不能自增/自减
    2. 比较运算? > < 都可以
    3. 逻辑运算? && || !        都可以
    4. 三目运算? ?: 可以
    5. 调用字符串对象的成员方法? 可以
    6. 使用直接量表示法创建对象? 可以
    7. 可以使用数组吗? 可以
    8. 使用new关键字创建对象? 不可以!不允许使用new和var关键字
    9. 调用ES全局函数? 不可以!

     

     

    9、ng模块提供的指令(directive)

      (1)ngApp:启动一个Angular应用——只有Angular应用中的表达式才会被Angular执行。

    用法: <ANY ng-app>

    注意:angular应用的范围仅限于声明它的元素范围;且默认情况下一个HTML中不允许声明多个ngApp元素。

      (2)ngInit:声明模型变量(Model)——不是局部变量(违背MVC设计原则,尽量不用)

    用法: <ANY ng-init="变量名=值; 变量名=值;">

    注意:ngInit声明变量不能声明var关键字!声明的变量可以在Angular表达式中进行输出

      (3)ngBind: 计算一个表达式的值,输出为当前元素的innerHTML

    用法: <ANY ng-bind="表达式"></ANY>

    <ANY class="ng-bind: 表达式;'></ANY>

         例:<div  ng-init="age=20;"></div>
             <p ng-bind="age+5"></p>
             <p class=”ng-bind:age*5;”></p>

     

    说明:ngBind指令作用与{{}}表达式基本类似,只是可以防止用户在一瞬间看到{{}}。ngBind指令计算完成表达式的值,会替换当前元素的innerHTML.

      (4)ngController:调用Controller创建函数,实例化一个控制器对象,指定其作用范围

    用法: <ANY ng-controller="控制器名">...</ANY>

      (5)ngRepeat:用于在View实现循环输出

    用法: <ANY ng-repeat="变量名 in 集合对象"></ANY>

    含义:对于集合对象中的每一个元素,依次赋值给指定的变量名,对每次赋值都输出一遍当前元素。

      (6)ngIf:用于在View实现判断输出,为false就不输出了

    用法: <ANY ng-if="布尔表达式">

    含义: 若布尔表达式为true则输出当前元素;否则当前元素在DOM树不存在

          <div ng-if=”isIPO”>仅为真时可见</div>

     

    10、AngularJS中声明模型数据的方式

      (1)使用ngInit指令来声明Model数据

    <ANY ng-init="变量名=值;">

    说明:此方式将Model声明在View中,严重违反了MVC模型的分工,不推荐使用

      (2)使用Controller对象创建Model数据——符合MVC模型分工

    新版本的AngularJS中创建Model的语法:

    ngApp=>Module=>Controller=>Model

    1. 声明一个AngularJS的应用程序: ngApp
    2. 创建一个自定义的模块: angular.module('模块名', [依赖列表])
    3. 在应用中注册自定义模块:  ng-app="模块名"
    4. 在模块中声明Controller函数
    5. 在View中指定Controller对象的作用范围——调用控制器创建函数
    6. 在Controller中声明Model数据

     

    使用Controller创建Model数据:

    创建一个新的HTML页面,声明一个ngApp,创建一个模块,其中声明一个控制器,创建一个Model数据,在View中显示这些数据:

     

    <!DOCTYPE html>
    <!--ng-app启动一个Angular应用并注册一个模块-->
    <html lang="en" ng-app="myModule5">
    <head>
      <meta charset="UTF-8">
      <!--引入bootstrap.css文件-->
      <link rel="stylesheet" href="css/bootstrap.css">
      <title></title>
    </head>
    <body>
    <div class="container">
      <h1>练习:使用Controller创建Model,在View中加以显示</h1>
      <!--启动一个控制器并规定作用范围-->
      <div ng-controller="myCtrl5">
        <!--视图-->
        <p>{{empCount}}</p>
      </div>
      </div>
        <!--引入angular.js文件-->
        <script src="js/angular.js"></script>
        <script>
          // 用angular.module定义一个组件后边是所依赖的模块
            angular.module('myModule5', ['ng']).
            controller('myCtrl5', function($scope){// 用controller定义一个控制器,控制器中函数是对业务数据的函数操作
                //在Controller中声明Model数据
                $scope.empCount = 1000;
            });
        </script>
    </body>
    </html>

     

     

    11、AngularJS在项目中的优缺点是什么?

     

     

     

     

     

     

     

     

     

    展开全文
  • Angularjs系列之MVC设计模式

    千次阅读 2016-12-11 13:02:37
    AngularJS可以通过以下架构与服务器应用程序通讯,把客户端单一的业务角转变为业务与分布式计算单元的复杂角色。 RESTful REST,Representational State Transfer,中文没有公认的翻译,就字面理解吧。State ...

    MVC概念

    转载时请遵重他人的劳动成果,不要删除作者原文链接。转载请注明来源:http://blog.csdn.net/caoshiying
    谢谢合作。

    通过把职责、性质相近的成分归结在一起,不相近的进行隔离,MVC将系统分解为模型、视图、控制器三部分,每一部分都相对独立,职责单一,在实现过程中可以专注于自身的核心逻辑。MVC是对系统复杂性的一种合理的梳理与切分,它的思想实质就是“关注点分离”。


    以前的Web编程存在的问题

    • CSS和DOM提供的接口水平太低了,而BOM提供的控件只有input、select、textarea这几种最基本的,稍复杂一点的UI效果,都要前端自己利用CSS和DOM去组合创造。看到一个需求,脑子里第一步要想如何利用CSS、DOM这些基本的零件组合成最终的效果,实现最终效果其实是一个“创造”的过程,比如说tabView,treeView,richEditor,colorPicker这种看起来常见的组件,其实在前端里都是没有现成可用的,需要自己去实现。
    • 前端语言的胶水性需求太强。CSS、DOM、JS是三种不同的技术,这也是前端知识系统中要掌握的最重要的三个基本功。server端编程当然也会需要不同方向的知识,比如PHP、SQL等,但server端编程大部分时间只用专注在某一个知识点上,只要必要时粘一下其它语言。但前端不同,前端的效果是通过CSS、DOM、JS三者配合起来最终呈现出来的,脱了任何一个技术都寸步难行,时刻要同时考虑多个方向的知识点。换句话说,server端编程像是一个单线程,即使有技术交差,也是串行的,而前端编程像是开了三个线程同时在跑,复杂度是成倍增长的。
    • CSS+DOM+JS的组合实在太强大了,同一个效果可以有多种完全不同的实现方式,每一种实现方式都会有不同的开发难度、扩展性、可维护性。解决方案太多,看到一个效果首先会先想到如何用CSS和DOM里那些low level的接口实现,这是一个“创造”的过程,这时脑子里可能冒出好多种不同的实现方法,“创造”完了之后还要“比较”,权衡各种解决方案的优劣,纠结一阵之后,才能选出最适合的方案。当然,并非前端都是完美主义,一定要选一个最好的方式出来,而是因为前端是GUI编程,直接面向用户,是最直接的产品呈现的部分,是门面。正因为如此,所以前端也是最容易被反复修改的部分。反复“修改”有多可怕,是个程序员都懂的,如果可维护性不好,那简直是恶梦。所以前端不得不重视可维护性,不重视可维护性直接等于自虐。
    • 浏览器兼容性。浏览器种类非常多,IE、Firefox、Chrome、Opera、还有众多的IE加壳浏览器,类似搜狗、傲游、360,再加上这些浏览器的移动终端版本。需要有Web标准,前端的知识大部分是通用于各个浏览器,但还是会有历史遗留问题,不同的浏览器有不同的问题特别是市场占有率最高的IE系,就IE自己市面上就有6、7、8、9这4个版本,4个版本之间各有各的问题。如果不积累点经验,面对疑难杂症那是一头雾水。

    MVC在Web编程中的应用

    AngularJS可以通过以下架构与服务器应用程序通讯,把客户端单一的业务角转变为业务与分布式计算单元的复杂角色。

    RESTful

    REST,Representational State Transfer,中文没有公认的翻译,就字面理解吧。State Transfer 为 “状态传输” 或 “状态转移”,Representational 中文有人翻译为“表征”、“具象”,合起来就是 "表征状态传输" 或 "具象状态传输" 或 "表述性状态转移"它描述了一个架构样式的网络系统,比如 web 应用程序。
    REST是一种架构风格,REST 指的是一组架构约束条件和原则。满足这些约束条件和原则的应用程序或设计就是 RESTful。其核心是面向资源,REST专门针对网络应用设计和开发方式,以降低开发的复杂性,提高系统的可伸缩性。
    它首次出现在 2000 年 Roy Fielding 的博士论文中,他是 HTTP 规范的主要编写者之一。在目前主流的三种Web服务交互方案中,REST相比于SOAP(Simple Object Access protocol,简单对象访问协议)以及XML-RPC更加简单明了,无论是对URL的处理还是对Payload的编码,REST都倾向于用更加简单轻量的方法设计和实现。值得注意的是REST并没有一个明确的标准,而更像是一种设计的风格。
    REST简化开发,其架构遵循CRUD原则,该原则告诉我们对于资源(包括网络资源)只需要四种行为:创建,获取,更新和删除就可以完成相关的操作和处理。您可以通过统一资源标识符(Universal Resource Identifier,URI)来识别和定位资源,并且针对这些资源而执行的操作是通过 HTTP 规范定义的。

    SOAP

    SOAP,英文全拼是Simple Object Access Protocol(1.2版本后停用),中文翻译为简单对象访问协议。它是一个简易对象访问协议,也是一种通信协议,也是一种用于发送消息的格式。它被设计用来通过因特网进行通信,可用于应用程序之间的通信。它基于 XML,独立于平台,独立于语言,允许您绕过防火墙,很简单又可扩展。它将被作为 W3C 标准来发展。
    它有四个部分。封装定义了一个框架 , 该框架描述了消息中的内容是什么,谁应当处理它以及它是可选的还是必须的。编码规则定义了一种序列化的机制,用于交换应用程序所定义的数据类型的实例。RPC表示定义了用于表示远程过程调用和应答的协定。绑定定义了一种使用底层传输协议来完成在节点间交换SOAP封装的约定。一个最简单的表示如下:
    <SOAP-ENV:Envelope
     [各种属性]>
    <!--百度百科示例-->
     <SOAP:HEADER [各种属性]>
     </SOAP:HEADER>
     <SOAP:Body [各种属性]>
     </SOAP:Body>
    </SOAP-ENV:Envelope>

     WSDL

    WSDL,Web Services Description Language,Web服务描述语言。在2001年3月,WSDL 1.1被 IBM、微软作为一个W3C记录(W3C note)提交到有关XML协议的W3C XML活动,用于描述网络服务。在2002年7月,W3C 发布了第一个WSDL 1.2工作草案。
    WSDL是网络服务描述语言,使用XML编写,是一种XML文档。它用于描述网络服务,也可用于定位网络服务,目前还不是W3C标准,不过W3C网站可以查询它的相关文档。
    WSDL元素基于XML语法描述了与服务进行交互的基本元素:
    • Type(消息类型):数据类型定义的容器,它使用某种类型系统(如 XSD)。
    • Message(消息):通信数据的抽象类型化定义,它由一个或者多个 part 组成。
    • Part:消息参数
    • Operation(操作):对服务所支持的操作进行抽象描述,WSDL定义了四种操作。
      • 1.单向(one-way):端点接受信息;
      • 2.请求-响应(request-response):端点接受消息,然后发送相关消息;
      • 3.要求-响应(solicit-response):端点发送消息,然后接受相关消息;
      • 4.通知(notification):端点发送消息。
    • Port Type(端口类型):特定端口类型的具体协议和数据格式规范。
    • Binding:特定端口类型的具体协议和数据格式规范。
    • Port:定义为绑定和网络地址组合的单个端点。
    • Service:相关端口的集合,包括其关联的接口、操作、消息等。
    WSDL支持 4 种消息交换方式:
    • 单向(One-way):服务端接收消息;
    • 请求响应(Request-response):服务端点接收请求消息,然后发送响应消息;
    • 要求应答(Solicit-response):服务访问端发送要求消息,然后接收应答消息。
    • 通知(Notification):服务访问端点发送通知消息。
    WSDL 文档可以分为两部分。顶部分由抽象定义组成,而底部分则由具体描述组成。抽象部分以独立于平台和语言的方式定义 SOAP 消息,它们并不包含任何随机器或语言而变的元素。这就定义了一系列服务,截然不同的网站都可以实现。随网站而异的东西如序列化便归入底部分,因为它包含具体的定义。

    如何架构

    这里属于讨论空间。架构方案、技术实现方法千千万,大家自由发挥。我用一点关键词说一下自己的想法。
    • 概念:单词缩写,读音
    • 架构:业务逻辑层,分布式计算
    • 源头:系统跨平台协作方案Web Service
    • 依赖注入技术两个体系中的发展:Java开源社区比较活跃的是Spring+Jersey,C#有闭源的原因,除了官方方案,可选余地不多,主要是Autofac+WebAPI
    • 云计算:客户端由单一业务单元的角色转变为业务单元与计算节点的复合角色
    • 数据交换方案:XML与JSON
    • 微软公司:适应技术潮流推行SignalR与WebAPI

    转载时请遵重他人的劳动成果,不要删除作者原文链接。转载请注明来源:http://blog.csdn.net/caoshiying
    谢谢合作。

    展开全文
  • AngularJS 组件设计模式简介 到这里查看幻灯片: API 密钥已被剥离,因此您需要访问以下网站以获取您自己的密钥: 这个在 constants.js 中作为 API_KEY 转到此处查找有关如何获取 Google API 密钥的信息,该密钥...
  • 我工作的业务不会涉及到 angularJS[ng] 这么重量级的东西,只有自己闲暇之余做的项目才能一尝angularJS。我才疏学浅,而这个话题又很大,所以见到的实在有限,但凡有讨论这些比较抽象的东西,必然有争论。这一切都是...

    javascript厚积薄发走势异常迅猛,导致现在各种MV*框架百家争雄,MVVM从MVC演变而来,为javascript注入了全新的活力。我工作的业务不会涉及到 angularJS[ng] 这么重量级的东西,只有自己闲暇之余做的项目才能一尝angularJS。我才疏学浅,而这个话题又很大,所以见到的实在有限,但凡有讨论这些比较抽象的东西,必然有争论。这一切都是探索过去未知的领域,无论谁对谁错,任何的探索都是值得的。

     

    本文内容如下:

    • 前言
    • Model View Controller - MVC
    • Model View ViewModel - MVVM
    • ViewModel
    • AngularJS带来的活力
    • 结语

    前言

    初次接触MVC是ASP.NET MVC,早前一直编写aspx的我接触到MVC之后爱的死去活来,深深的被它灵动简洁的思想所震撼,而当初的我js写的实在是渣,连jquery都用不好。也从未想到前端竟然也能够导入MVC这么抽象性的东西。

    近年,前端的需求也越来越重,过去后端的处理大多数都转移到了前端,而javascript又十分争气,一雪过去被鄙夷的耻辱。过去的javascript只是辅助页面的展现搞一些炫丽的特效,而现在已经演变的成为数据展现、加工的主力——随着前端任务繁重——前端MV*乘势而起。

    MV*的思想中心很一致:UI和逻辑分离,提取数据模型

    Model View Controller - MVC

    MVC核心:Model(模型),View(UI),Controller(控制器)

    • Model:数据展现的对象模型,例如一个列表页HTML对象的模型/数据库中表模型
    • View:UI,Web页面中就是HTML
    • Controller:处理/加工Model

    它们的工作模型应该是:Controller=>Model=>View

    Model View ViewModel - MVVM

    MVVM核心:Model(模型),View(UI),ViewModel(视图模型)

    • Model:数据展现的对象模型
    • View:页面UI
    • ViewModel:实现Model和View的双向绑定

    它们的工作模型应该是:Model<=>ViewModel<=>View

    让人比较困惑的是:MVVM中的Controller是什么?

    ng和avalon都提供了名为Controller的方法,其实它们的意义和MVC一致:处理/加工Model。

    ViewModel

    初次使用angularJS(以下简称ng)让我觉得很迷茫,毕竟它颠覆了传统的DOM操作,过去的页面某个列表页的数据是拿到数据之后,要么封装成Model,要么写成一个方法然后展现到页面上,例如下面的代码:

    (function () {	var data = [{ name: 'linkFly', blog: 'http://www.cnblogs.com/silin6/' }],//拿到数据		html = ['<ul>'],		$container = $('#container');	//拼接为HTML	data.forEach(function (item) {		html.push('<li>', item.name, ' - ', item.blog);	});	html.push('</ul>');	//展现到页面	$container.html(html.join(''));})();

    而使用ng的代码如下:

    <ul data-ng-repeat="item in datas"><li>{{item.name}} - {{item.blog}} </li></ul>
    var app = angular.module('demo', []).controller('demoController', function ($scope) {//ViewModel双向绑定$scope.datas = [{ name: 'linkFly', blog: 'http://www.cnblogs.com/silin6/' }];});

    MVVM的核心思想:不用再关注数据如何呈现到页面,由框架更新Model和View。

    ng也提供了自定义的ViewModel: directive(指令) ,代码如下:

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="demo"><head>	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />	<title>ng demo</title>	<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js"></script></head><body data-ng-controller="demoController">	<hello data-ng-model="text">		<a href="javascript:;">i'm {{text}}</a>	</hello>	<script>		var app = angular.module('demo', []).controller('demoController', function ($scope) {			$scope.text = '***';		}).directive('hello', function () {			//编写hello指令			return {				restrict: 'E',//指定这个指令是Element类型的				scope: { text: '=ngModel' },//指定对象				link: function ($scope, $elem) {					//注册事件					$elem.on('click', function () {						//修改数据,双向绑定						$scope.text =							$scope.text === '***' ? 'linkFly' : '***';						$scope.$apply();					});				}			};		});	</script></body></html>

    directive 可以让你的代码插件化/组件化,当你想要完成一个日历插件,可以使用directive来实现,directive是ng中的ViewModel,再看 ViewModel的本份:更新Model到View中。因为viewModel直面操作Model和View,所以所有的事件绑定、操作DOM的逻辑都 应该在ViewModel/ng的directive中。

    再看我们之前MVVM的图:

    ViewModel实现的双向绑定原理:从外部环境接收Model,呈现到View。从View接收行为(web中是浏览器的事件,例如鼠标点击之类的)再更新Model。

    当理解了ViewModel的职责,我相信对于ng的directive理解将会很大。而数据的处理/加工,应该仍然留在Controller中。MVVM的本质也只是注入了一层ViewModel。

    AngularJS带来的活力

    其实主要源于ViewModel。

    初次接触ng的directive深感迷茫,很大程度上对MVVM不理解。因为ng的directive的行为太过组件化,过了很久才明白其实我们自己编写javascript也是组件化的,其实这也映射着更好的的web思想: Web components 。

    ng中的directive可以让那些编码中习惯瞎灌一通代码的小伙伴尝到组件化的甜头,前提是你们需要经历痛苦的思想转换。

    未来迟早要到来,Web components是趋势。

    ViewModel的思维颠覆了传统的javascript操 作DOM的行为,迎合MVC的思想又能够让javascript的逻辑更加的清晰。为了迎接ViewModel,ECMAScript下下一个版本 (ECMAScript 7,当前ECMAScript 5)准备了 Object.observe() ——监听/观察javascript对象:当被监听的对象发生变化,通知监听者,数据双向绑定的利器。

    结语

    其实如果能够理解ViewModel,那么MVVM框架中很多事情都将可以得到很明确的答案,多数时候我们总是在成型的编程思维上去敲代码,当引入了一个框架,就意味着你要接受它的思想,然而颠覆一个人的思想是一件很困难的事情,毕竟我们无法像盗梦空间里那样,悄悄注入一个想法,从此世界颠覆。

    jQuery如此的卓越也体现了这点,在你刚开始使用它的时候就发现它并没有侵入你的思想,你仍然可以用自己的思维写出自己的代码,不得不说jQuery的理念得以让其在今天大行其道——专注DOM。

    可能有人想说:"jQuery是库,不要跟框架并提。"

    我知道。只是感叹一下。

    参考

     

    • Avalon-迷你易用的MVVM框架
    • MVC,MVP和MVVM的图示

    作者:linkFly

    原文: http://www.cnblogs.com/silin6/p/4279965.html

    出处: www.cnblogs.com/silin6/

    声明:嘿!你都拷走上面那么一大段了,我觉得你应该也不介意顺便拷走这一小段,希望你能够在每一次的引用中都保留这一段声明,尊重作者的辛勤劳动成果,本文与博客园共享。

    展开全文
  • AngularJS是什么AngularJS是一个开源Web应用程序框架。最初是由MISKO Hevery和Adam Abrons于2009年开发,现在是由谷歌维护。特性AngularJS是一个功能强大的基于JavaScript开发框架用于创建富互联网应用(RIA)。...

    AngularJS是什么

    AngularJS是一个开源Web应用程序框架。最初是由MISKO Hevery和Adam Abrons于2009年开发,现在是由谷歌维护。

    特性AngularJS是一个功能强大的基于JavaScript开发框架用于创建富互联网应用(RIA)。

    AngularJS为开发者提供的选项(使用JavaScript)在一个干净的MVC(模型-视图-控制器)的方式来编写客户端应用程序。

    AngularJS写的应用都是跨浏览器兼容。AngularJS使用JavaScript代码自动处理适应每种浏览器。

    AngularJS是开源的,完全免费的,并且由数千名世界各地的开发者开发维护。它是根据Apache许可证2.0版许可发布。

    总体来说,AngularJS是一个用来构建大型应用,高性能的Web应用程序的框架,同时使它们易于维护。

    核心特征数据绑定: 模型和视图组件之间的数据自动同步。

    适用范围: 这些对象参考模型。它们充当控制器和视图之间的胶水。

    控制器: 这些Javascript函数绑定到特定的范围。

    服务: AngularJS配有多个内置服务,例如$http可作为一个XMLHttpRequest请求。这些单一对象在应用程序只实例化一次。

    过滤器: 从一个数组的条目中选择一个子集,并返回一个新的数组。

    指令: 指令是关于DOM元素标记(如元素,属性,CSS等等)。这些可以被用来创建作为新的,自定义部件的自定义HTML标签。AngularJS设有内置指令(如:ngBind,ngModel...)

    模板:这些符合从控制器和模型信息的呈现的视图。这些可以是单个文件(如index.html),或使用“谐音”在一个页面多个视图。

    路由: 它是切换视图的概念。

    模型视图: MVC是一个设计模式将应用划分为不同的部分(称为模型,视图和控制器),每个都有不同的职责。

    深层链接: 深层链接,可以使应用程序状态进行编码在URL中而能够添加到书签。应用程序可从URL恢复到相同的状态。

    依赖注入: AngularJS有一个内置的依赖注入子系统,开发人员通过使应用程序从而更易于开发,理解和测试。

    AngularJS的简单实例

    AngularJs程序分为3部分:模板,表现层逻辑,数据。模板:我们用html,css写的ui视图代码,其中包含AngularJs的指令,表达式,并最终会被AngularJs编译机制编译为附加在dom树上。AngularJs的指令(directive)可以由我们自由扩展。

    表现层逻辑:包括应用程序逻辑和行为。用JavaScript定义作为视图控制器逻辑。在AngularJs作为MVC框架,在控制器中我们无需添加对于dom级的事件监听,这些在AngularJs中已经内置了。在ui节点dom事件发生后AngularJs会自动转到scope上的某个行为(Action)逻辑。

    数据:视图对象(viewobject)需要被AngularJs Scope(1.0中作为service出现)引用,可以使任何类型的JavaScript对象,数组,基本类型,对象。并且AngularJs会自动异步更新模型,即在ui发生改变的时他会自动刷新模型(mode),反之在模型发生改变的时候也会自动刷新ui。在这里我们不需要定义形如getter,setter的一些列方法。

    这里我们可以看一个简单的例子:

    sample.html:

    输入的内容:{{inputValue}}

    angular.module('myApp', [])

    .controller('myCtrl', ['$scope', function($scope) {

    $scope.inputValue = 'hello world';

    }]);

    在浏览器中打开的显示为:

    当用户改变输入框内内容时,下面的内容也会相应的进行改变。

    下面我们来分析这个程序:

    AngularJS应用主要依赖于控制器来控制数据流在应用程序中.控制器使用ng-controller 指令定义。控制器是一个包含属性/属性和函数的JavaScript对象。每个控制器接受$scope作为参数引用到应用程序/模块,由控制器来控制。

    ...

    在这里,我们采用ng-controller指令声明控制器myCtrl。作为下一个步骤,我们将定义myCtrl如下:

    angular.module('myApp', [])

    .controller('myCtrl', ['$scope', function($scope) {

    $scope.inputValue = 'hahaha';

    }]);

    myCtrl定义一个以$scope作为参数的JavaScript对象。

    $scope表示应用程序,它使用myCtrl对象。

    $scope.inputValue是myCtrl对象的属性。

    现在,我们可以在myCtrl使用ng-model或表达式来获取$scope.inputValue。

    绑定$scope.inputValue到输入框。

    输入的内容:{{inputValue}}

    绑定$scope.inputValue到html。

    现在,只要在输入框中输入任何字段,可以看到html自动更新。

    在这之上AngularJs还为我们提供了一些列的有用的service,并允许我们添加自己特定业务的服务service,提供了底层的ajax,缓存,URL 路由,浏览器抽象等服务,以及这些服务我们可以采用AngularJs的注入机制任意组合。以此为基础我们可以利用AngularJs在前端进行各种设计模式的实践。

    AngularJs下各种设计模式的实践

    单例模式(singleton)

    单例模式是一种常用的软件设计模式。在它的核心结构中只包含一个被称为单例的特殊类。通过单例模式可以保证系统中一个类只有一个实例而且该实例易于外界访问,从而方便对实例个数的控制并节约系统资源。如果希望在系统中某个类的对象只能存在一个,单例模式是最好的解决方案。

    比如AngularJs对于组件依赖问题的解决方案:

    获取依赖名称,并在缓存的hash表中查找:若该依赖存在,则直接将其作为参数传给需要该依赖的组件;否则AngularJs通过调用工厂(factory)方法对其进行实例化。(需要注意在实例化该依赖时,有可能该依赖会有额外的依赖而产生了递归调用。)将该依赖存储到缓存的hash表中,再将其作为参数传给需要该依赖的组件。

    下面是该方法GetService的一个实现:

    function getService(serviceName) {

    if (cache.hasOwnProperty(serviceName)) {

    if (cache[serviceName] === INSTANTIATING) {

    throw $injectorMinErr('cdep', 'Circular dependency found: {0}', path.join('

    }

    return cache[serviceName];

    } else {

    try {

    path.unshift(serviceName);

    cache[serviceName] = INSTANTIATING;

    return cache[serviceName] = factory(serviceName);

    } catch (err) {

    if (cache[serviceName] === INSTANTIATING) {

    delete cache[serviceName];

    }

    throw err;

    } finally {

    path.shift();

    }

    }

    }

    在这个例子中AngularJS就将每一个服务(Service)就看做一个单例,同时我们将缓存(cache)看作一个单例管理器。

    工厂模式(Factory Method)

    工厂模式是我们最常用的实例化对象模式了,是用工厂方法代替new操作的一种模式。

    我们先来看一个代码片段:

    myModule.config(function ($provide) {

    $provide.provider('foo', function () {

    var baz = 42;

    return {

    //Factory method

    $get: function (bar) {

    var baz = bar.baz();

    return {

    baz: baz

    };

    }

    };

    });

    });

    在上面的代码中我们使用config去回调定义一个新的供应商(provider)。供应商(Provider)是一个对象(Object),他包含有一个$get方法。

    在AngularJs中,任意一个service,filter,directive和controller都包含有一个provider用来实例化这个组件。

    装饰模式(Decorator)

    装饰模式是在不必改变原类文件和使用继承的情况下,动态地扩展一个对象的功能。它是通过创建一个包装对象,也就是装饰来包裹真实的对象。

    AngularJS提供一种名为'out of the box'的方法去扩展一个已经存在的服务(service)。利用$provide.decorator方法就可以对任何一个你曾经定义的service进行扩展或修改:

    myModule.controller('MainCtrl', function (foo) {

    foo.bar();

    });

    myModule.factory('foo', function () {

    return {

    bar: function () {

    console.log('I\'m bar');

    },

    baz: function () {

    console.log('I\'m baz');

    }

    };

    });

    myModule.config(function ($provide) {

    $provide.decorator('foo', function ($delegate) {

    var barBackup = $delegate.bar;

    $delegate.bar = function () {

    console.log('Decorated');

    barBackup.apply($delegate, arguments);

    };

    return $delegate;

    });

    });

    在这个例子中定义了一个新的服务foo。在config的回调中使用了$provide.decorator,并且将foo作为参数传递。在函数内部$delegate作为foo本身的一个引用,同时我们重新定义了其bar方法。从而在foo的基础上产生了一个新的服务。

    外观模式(Facade)

    外观模式为子系统中的一组接口提供一个一致的界面,定义一个高层接口,这个接口使得这一子系统更加容易使用。

    在AngularJS中很多地方都用到了外观模式。每当你想要产生一个更高等级的Api时,你就会使用外观模式。

    举个例子,让我们看看怎么创建一个XMLHttpRequest的post请求:

    var http = new XMLHttpRequest(),

    url = '/example/new',

    params = encodeURIComponent(data);

    http.open("POST", url, true);

    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    http.setRequestHeader("Content-length", params.length);

    http.setRequestHeader("Connection", "close");

    http.onreadystatechange = function () {

    if(http.readyState == 4 && http.status == 200) {

    alert(http.responseText);

    }

    }

    http.send(params);

    当我们想要使用AngularJs的$http时,我们这样写:

    $http({

    method: 'POST',

    url: '/example/new',

    data: data

    })

    .then(function (response) {

    alert(response);

    });

    或者

    $http.post('/someUrl', data)

    .then(function (response) {

    alert(response);

    });

    代理模式(Proxy)

    代理模式分为三个种类:

    抽象角色:通过接口或抽象类声明真实角色实现的业务方法。代理角色:实现抽象角色,是真实角色的代理,通过真实角色的业务逻辑方法来实现抽象方法,并可以附加自己的操作。真实角色:实现抽象角色,定义真实角色所要实现的业务逻辑,供代理角色调用。

    这里我们讲的例子是AngularJS中的抽象代理。

    下面这个片段,我们使用User来表示$resource并调用其中的get方法:

    var User = $resource('/users/:id'),

    user = User.get({ id: 42 });

    console.log(user); //{}

    在这段代码中,console.log将会输出一个空的对象。当User.get被调用时,由于Ajax请求是异步运行在后台的,所以还没有一个实际的用户就执行了console.log。因此我们需要一个User.get的代理,当实际的响应到达时,能够正确的将其填充到我们的页面中。

    在AngularJS当中,我们这样来实现:

    function MainCtrl($scope, $resource) {

    var User = $resource('/users/:id'),

    $scope.user = User.get({ id: 42 });

    }

    欢迎关注天码营微信公众号: TMY-EDU

    小编重点推荐:天码营网站

    展开全文
  • AngularJS 中的 Promise 和 设计模式

    千次阅读 2015-07-30 11:50:09
    目录[-] Promise 简单例子 链式 Promise ...AngularJS 中的实际应用 实际链式例子 测试 Promise - 基于代码 Promises And Design Patterns 写得好长好长好长长~ 解决 Javascri
  • angularjs mvvm模式

    千次阅读 2016-12-18 12:24:40
    独立开发:开发人员可以专注与业务逻辑和数据的开发(ViewModel),界面设计人员可以专注于UI(View)的设计; 可测试性:清晰的View分层,使得针对表现层业务逻辑的测试更容易,更简单。 <!DOCTYPE html> ...
  • AngularJS设计模式、设计原则、MVC
  • AngularJS 1.x现在处于长期支持(LTS)模式,因此,当前的开发工作集中在错误修复,可访问性,性能和较小的增强上。 材料设计是适用于不同设备的视觉,运动和交互设计统一系统的规范。 我们的目标是提供一组精简,...
  • AngularJS学习手册

    2016-12-16 09:22:25
    如果你熟悉JavaScript、Web开发、软件设计概念和模式,那么本书是着手学习AngularJS的优佳选择。本书主要内容有:了解AngularJS与其他MVC框架的不同。通过书中的示例项目学习AngularJS的控制器、视图和模型。把可用...
  • angularjs面试问题Here’s a list of the concepts that are frequently asked about in AngularJS interviews. 以下是AngularJS访谈中经常问到的概念列表。 What is AngularJS? 什么是AngularJS? What is the ...
  • 本文主要解决一下几个问题: 一、 什么是MVC 二、 MVC优点缺点 三、 AngularJS的MVC是怎样的 四、 来个简单的示例
  • AngularJS基础知识

    2020-12-11 06:28:33
    2.MVVM(model view view-model)设计模式 : Model将和ViewModel互动(通过$scope对象),将监听Model的变化。这些可以通过View来发送和渲染,由HTML来展示你的代码 3.方便的REST 4.数据绑定和依赖注入 5.可以操作XML...
  • 很棒的设计模式 与软件和体系结构相关的设计模式的精选列表。 -解决软件设计中给定上下文中常见问题的通用,可重用的解决方案。 它是关于如何解决可以在许多不同情况下使用的问题的描述或模板。 内容 移动的 前端...
  • AngularJS是Google开发者设计和开发的一套前端开发框架,帮助简化前端开发的负担。AngularJS主要有以下几点优势:1)它是由互联网巨人Google组织开发的;这意味着它有更加强大的社区支持;2)AngularJS非常全面,...
  • AngularJs

    2019-11-17 22:07:05
    1. AngularJS四大特征 1.1 MVC 模式 Angular遵循软件工程的MVC模式,并鼓励展现,数据,和逻辑组件之间的松耦合.通过依赖注入(dependency injection),Angular为客户端的Web应用带来了传统服务端的服务,例如独立于...
  • 1、AngularJS定义: Google AngularJS是一个JS框架,主要思路不是传统的“先查找再操作DOM元素”,而是“以数据为中心”。适用于以数据操作为主的SPA应用。   2、AngularJS与jQuery的关系?  jQuery操作思路:...
  • 一、目录: Promise 简单例子 链式 Promise Parallel Promises And...AngularJS 中的实际应用 实际链式例子 测试 Promise - 基于代码 二、参考文章 [url]http://my.oschina.net/ilivebox/blog/293771[/url]...
  • 模型 – 视图 – 控制器或MVC,MVC是普遍的叫法,是一种软件设计模式,用于开发Web应用程序。模型- 视图 – 控制器模式是由以下三部分组成: 模型/Model – 一个负责维护数据模式的最低水平。 视图/View – 负责显示...
  • 推荐angularJs开发,调试,测试工具

    千次阅读 2017-03-01 15:26:41
    首先是NodeJs 代码编辑工具 sublime text 轻量级 ...webstorm 占的资源多...protractor专门为angularJs设计 另整理下其他有用的软件: virtualBox 免费的虚拟机软件 VMWare 虚拟机 Parallels Desktop
  • angularjs结构

    2016-04-28 09:08:44
    它提供了一系列兼容性良好并且可扩展的服务,包括数据绑定、DOM操作、MVC设计模式和模块加载等。本文专注于AngularJS 指令的使用,在我们进入主题之前,我们将快速浏览AngularJS的基本用法。 AngularJS 不仅仅是一...
  • Javascript设计模式

    千次阅读 2019-04-25 17:23:36
    加入QQ群:864680898,一起学习进步!... 毫无疑问,设计模式于己于他人于系统都是多赢的,设计模式使代码编制真正工程化,设计模式是软件工程的基石,如同大厦的一块块砖石一样。项目中合理地运用设计模式...
  • AngularJS学习手册》会开发一个示例应用,不仅让你了解 AngularJS 框架的相关概念,还让你直接动手操作。如果你熟悉JavaScript、Web开发、软件设计概念和模式,那么本书是着手学习AngularJS的优佳选择。
  • AngularJS

    2018-09-26 15:58:27
     AngularJS是一个基于MVC处理模式,实现了MVVM数据双向绑定的用于开发动态web项目的框架。以其数据和展现分离、MVVM、MVC、DI等强大的特性活跃于前端开发市 场,是前端敏捷开发使用的主流的必须掌握的框架之一。 ...
  • AngularJS -AngularJS特性

    2018-08-12 15:46:24
    AngularJs是一个用于设计动态web应用的结构框架。首先,它是一个框架,不是类库,是像EXT一样提供一整套方案用于设计web应用。它不仅仅是一个javascript框架,因为它的核心其实是对HTML标签的增强。 AngularJS是一...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,242
精华内容 4,496
关键字:

angularjs设计模式