摘要：
$http服务允许我们与服务端交互，有时候我们希望在发出请求之前以及收到响应之后做些事情。即http拦截。$httpProvider包含了一个interceptors的数组。我们这样创建一个interceptor。 app.factory('myInterceptor', ['$log', func 阅读全文
摘要：
promise是Javascript异步编程很好的解决方案。对于一个异步方法，执行一个回调函数。比如页面调用google地图的api时就使用到了promise。 function success(position){ var cords = position.coords; console.log( 阅读全文
摘要：
在AngularJS的实际项目中，经常需要处理多个$http请求，每个$http请求返回一个promise,我们可以把多个promise放到$q.all()方法接受的一个数组实参中去。■ 处理多个$http请求 angular.module('app',[]) .controller('AppCtr 阅读全文
摘要：
AngularJS中有一个filterFilter函数用来对集合过滤，非常方便。源代码大致如下： function filterFilter(){ return function(aray, expression comparator){ if(!isArray(array)) return arr 阅读全文
摘要：
在AngularJS中，ng-controller是最常用的directive。比如： var app = angular.module("app",[]); app.controlle("AppCtrl", function(){ var app = this; app.people = [ {" 阅读全文
摘要：
本篇体验使用AngularJS向后端ASP.NET API控制器上传文件。 首先服务端： public class FilesController : ApiController { //using System.Web.Http [HttpPost] public async Task<HttpR 阅读全文
摘要：
如何在页面呈现一段html代码段呢？在textarea中我们这样写：<textarea name="" id="" cols="30" rows="" ng-model="app.someHtml"></textarea>也可以这样写：<div ng-bind-html="app.someHtml" 阅读全文
摘要：
有这样的一个场景，这里有一个表单：<form role="form"> ...</form>我们希望在form的外层动态包裹上一层。有可能是这样：<div id="well"> <form role="form"> ... </form></div>也有可能是这样：<div id="red"> <f 阅读全文
摘要：
在AngularJS中如何实现一个Model的缓存呢？可以通过在Provider中返回一个构造函数，并在构造函数中设计一个缓存字段，在本篇末尾将引出这种做法。一般来说，Model要赋值给Scope的某个变量。有的直接把对象赋值给Scope变量；有的在Provider中返回一个对象再赋值给Scope变 阅读全文
摘要：
如何在控制台获取到某个元素的Scope呢？假设，页面元素为：<label>Name:</label><input type="text" ng-model="yourName" placeholder="Enter a name here"><h1>{{yourName}}</h1>→ 选择inpu 阅读全文
摘要：
本篇通过jQuery和Angular两种方式来实现同一个实例，从而体验两者的不同点以及AngularJS的迷人之处。首先当然需要引用jquery.js和angular.js文件。■ 使用jQuery让写一个简单的click事件 <button id="jquery-button">JQuery Bu 阅读全文
摘要：
在AngularJS中$interval用来处理间歇性处理一些事情。最常用的是： var app = angular.module("app",[]); app.controller("AppCtrl", function($q. $interval){ var timer = $interval( 阅读全文
摘要：
在使用AngularJS中处理promise的时候，有时会碰到需要处理多个promise的情况。最简单的处理就是每个promise都then。如下： var app = angular.module("app",[]); app.controller("AppCtrl", function($q. 阅读全文
摘要：
在AngularJS中，可以从$rootScope中获取数据源，也可以把获取数据的逻辑封装在service中，然后注入到app.run函数中，或者注入到controller中。本篇就来整理获取数据的几种方式。■ 数据源放在$rootScope中 var app = angular.module("a 阅读全文
摘要：
首先是angular-ui-router的基本用法。■ 如何引用依赖angular-ui-router angular.module('app',["ui.router"]) .config(function($stateProvider){ $stateProvider.state(stateNa 阅读全文
摘要：
假设有这样的一个场景：我们知道一个用户某次航班，抽象成一个departure,大致是：{userID : user.email,flightID : "UA_343223",date: "01/14/2014 8:00 AM"}有关航班的，抽象成一个flight,大致是：{id: flightID, 阅读全文
摘要：
在"AngularJS中转换响应内容"中，体验了如何转换响应内容。本篇来体验如何转换请求内容。主页面通过onSend方法把request对象转递出去。 发送request对象和onSend方法被定义在了controller中。angular.module('api.controller... 阅读全文
摘要：
从远程API获取到的响应内容，通常是json格式的，有时候需要对获取到的内容进行转换，比如去除某些不需要的字段，给字段取别名，等等。本篇就来体验在AngualrJS中如何实现。在主页面，还是从controller中拿数据。 ... 阅读全文
摘要：
在任何应用程序中，中介者模式随处可见。→ 有一个事件源，触发事件，传递参数→ 中介者记下这个事件，向外界广播，并带上参赛→ 有一个地方侦听中介者事件，一旦事件源触发事件，就从中介者手里获取事件相关参数本篇，要体验的是在AngularJS中的中介者模式。场景是：当创建一个订单，需要引发一些动作，比如给... 阅读全文
摘要：
■ 搭建karma测试环境→ 创建app和test文件夹→npm install karma --save-dev→npm install karma-jasmine --save-dev→npm install karma-chrome-launcher --save-dev→karma init... 阅读全文
摘要：
通常我们这样写一个菜单： Orders 菜单项是否高亮显示取决于controller中的highlight方法。vm.highlight = funciton(path){ return $locaiton.path().substr(0, path.lenght)... 阅读全文
摘要：
在AngualrJS中使用$http每次向远程API发送请求，等待响应，这中间有些许的等待过程。如何优雅地处理这个等待过程呢？如果我们在等待过程中弹出一个遮罩层，会是一个比较优雅的做法。这就涉及到了对$http的请求响应进行拦截了。请求的时候，弹出一个遮罩层，收到响应的时候把遮罩层隐藏。其实，$ht... 阅读全文
摘要：
有这样的一个需求：添加用户的时候，根据主键判断当前添加用户的email是否已经被使用。为此，我们需要把主键和email来传递给远程的一个API，让API返回结果，告之当前email是否被使用过。写一个验证email唯一性的Directive，页面大致如下表现： Email alread... 阅读全文
摘要：
AngularJS中的transclusion类似于包含关系。通常，这样定义一个directive:转换成html可能是这样的： 现在，想在类名为someclass的div中放置一些动态内容，即： 这里有一些动态内容 如何做到呢？1、在template中通过属性或者元素的方式标记放置动态内容的位... 阅读全文
摘要：
在AngularJS中，自定义Directive过程中，有时用link和controller都能实现相同的功能。那么，两者有什么区别呢？使用link函数的Directive页面大致是：Add ItemDirective方面：(function(){ var withoutController ... 阅读全文
摘要：
所谓的延迟加载通常是：直到用户交互时才加载。如何实现延迟加载呢？需要搞清楚三个方面：1、html元素的哪个属性需要延迟加载？2、需要对数据源的哪个字段进行延迟加载？3、通过什么事件来触发延迟加载？自定义的Directive的页面表现大致是这样： ... 阅读全文
摘要：
如何使用谷歌地图把当前位置显示出来呢？--在html5中，为我们提供了navigator.geolocation.getCurrentPosition(f1, f2)函数，f1是定位成功调用的函数，f2是定位失败调用的函数，而且会把当前的地理位置信息作为实参传递给f1和f2函数。f1函数调用谷歌地图... 阅读全文
摘要：
在"AngularJS中自定义有关一个表格的Directive"中自定义了一个有关表格的Direcitve，其表格的表现方式是这样的：以上，变量colmnmap的值是事先定义在了Scope中的：return { restrict: 'E', scope: { columnm... 阅读全文
摘要：
我们知道ngModel是AngularJS中默认的一个Directive，用于数据的双向绑定。通常是这样使用的：在控制器中大致这样：$scope.customer ={ name: ''}在上一篇中，有关表格的Directive是这样使用的：以上，datasource代表数据源,是否可以用ng-mo... 阅读全文
摘要：
本篇体验在AngularJS中自定义一个有关表格的Directive。表格的需求包括：● 表格结构 Name Street Age > > > 4行● 点击某个th，就对该列进行排序● 可以给表头取别名● 可以设置某个列是否显示● 表格下方有一行显示总行数我们希望表格按如下方式展示：以... 阅读全文
摘要：
一般情况下，Javascript每次new一个对象就产生一个实例，实例指向不同的地址。就像如下：(function(){ function Person(name){ this.name = name; } Person.prototype.work = fu... 阅读全文
摘要：
本篇体验使用AngularJS中的$http对MongoLab数据表进行增删改查。主页面：Load CourseAdd New Course以上，页面上显示course_list.html，add_course.html和edit_course.html的内容显示与toggleAddCourseVi... 阅读全文
摘要：
在AngularJS中，有时候需要监视Scope中的某个变量，因为变量的改变会影响一些界面元素的显示。有时，也希望通过jQuery调用Scope的某个方法。比如以下场景： jQ Button Toggle jQ button state Counter: {{counter}}以... 阅读全文
摘要：
本篇关注AngularJS中的控制器继承，了解属性和方法是如何被继承的。嵌套控制器中属性是如何被继承的？==属性值是字符串myApp.controller("ParentCtrl", function($scope){ $scope.name = "darren";})myApp.contro... 阅读全文
摘要：
在AngularJS中，每一个controller都有对应的Scope，而Scope间有时候需要通讯。比如有如下的一个controller嵌套： ... {{$index + 1}} {{product.name}} ... 阅读全文
摘要：
本篇通过几个例子对AngularJS中的Directive进行汇总。例子1，单向绑定和双向绑定 ==单向绑定{{contacts.length}}the first name is {{contacts[0].firstname}}{{contacts[0].f... 阅读全文
摘要：
在ASP.NET Web API中实现缓存大致有2种思路。一种是通过ETag, 一种是通过类似ASP.NET MVC中的OutputCache。通过ETag实现缓存首先安装cachecow.serverinstall-package cachecow.server在WebApiConfig中。pub... 阅读全文
摘要：
有时候我们可能不想显示某个实体中的所有字段。比如客户端发出如下请求：locaohost:43321/api/groups/1/items?fields=idlocaohost:43321/api/groups/1/items?fields=id,name以上，对于Item这个类，我们可能只想显示id... 阅读全文
摘要：
谈到ASP.NET Web API的分页，考虑的因素包括：1、上一页和下一页的uri2、总数和总页数3、当前页和页容量接着是服务端的数据以怎样的形式返回？我们通常这样写：{ totalCount:10, result: [ {id:1, name:"a"}, {id:2, name:"b"} ]}以... 阅读全文
摘要：
所谓的动态排序是指支持任意字段、任意升序降序的排序。我们希望在客户端按如下格式写：localhost:8000/api/items?sort=titlelocalhost:8000/api/items?sort=name,titlelocalhost:8000/api/items?sort=-nam... 阅读全文
