TOMMYHU

Vue.js 是用于构建交互式的 Web 界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。从技术上讲， Vue.js 集中在 MVVM 模式上的视图模型层，并通过双向数据绑定连接视图和模型。实际的 DOM 操作和输出格式被抽象出来成指令和过滤器。相比其它的 MVVM 框架，Vue.js 更容易上手。

Vue.js 是一个用于创建 Web 交互界面的库。它让你通过简单而灵活的 API 创建由数据驱动的 UI 组件。

适用人群
即便您已经熟悉了一些这类的库或框架，我们还是推荐您继续阅读接下来的概览，因为您对它们的认识也许和它们在 Vue.js 语境下的定义不尽相同。

学习前提
Vue.js 的 API 是参考了 AngularJS、KnockoutJS、Ractive.js、Rivets.js。所以建议学习前，对上述 4 个框架系统做些了解。

Vue.js是一个在谷歌的哥们用了一段时间angularjs之后甚感不爽，例如脏watch，factory，service，provider之类不清晰，然后自己也diy了一把，基于观测者模式，指令，filter重新造另一个轮子，当然这个轮子能否持续下去还要看社会是否会持续火热了

一、service引导

刚开始学习Angular的时候，经常被误解和被初学者问到的组件是 service(), factory(), 和 provide()这几个方法之间的差别。This is where we'll start the twenty-five days of Angular calendar.

二、service

在Angular里面，services作为单例对象在需要到的时候被创建，只有在应用生命周期结束的时候（关闭浏览器）才会被清除。而controllers在不需要的时候就会被销毁了。

这就是为什么使用controllers在应用里面传递数据不可靠的原因，特别是使用routing的时候。Services are designed to be the glue between controllers, the minions of data, the slaves of functionality, the worker-bees of our application（就是说services在应用的controllers、 方法、数据之前起到了很关键的作用）



现在我们开始看怎么创建service。每个方法我们都会看到下面两个一样的参数：

name-我们要定义的service的名字

function-service方法

他们都创建了相同的底层对象类型。实例化后，他们都创建了一个service，这些对象没有什么功能上的差别。

1、factory()

Angular里面创建service最简单的方式是使用factory()方法。


factory()让我们通过返回一个包含service方法和数据的对象来定义一个service。在service方法里面我们可以注入services，比如 $http 和 $q等。
angular.module('myApp.services') .factory('User', function($http) { // injectables go here   var backendUrl = "http://localhost:3000";  var service = {    // our factory definition     user: {},     setName: function(newName) {       service.user['name'] = newName;     },     setEmail: function(newEmail) {       service.user['email'] = newEmail;     },     save: function() {       return $http.post(backendUrl + '/users', {         user: service.user       });     }   };  return service; });

在应用里面使用factory()方法

在应用里面可以很容易地使用factory ，需要到的时候简单地注入就可以了
angular.module('myApp') .controller('MainCtrl', function($scope, User) {   $scope.saveUser = User.save; });

什么时候使用factory()方法

在service里面当我们仅仅需要的是一个方法和数据的集合且不需要处理复杂的逻辑的时候，factory()是一个非常不错的选择。

注意：需要使用.config()来配置service的时候不能使用factory()方法

2、service()
service()通过构造函数的方式让我们创建service，我们可以使用原型模式替代javaScript原始的对象来定义service。

和factory()方法一样我们也可以在函数的定义里面看到服务的注入
angular.module('myApp.services') .service('User', function($http) { // injectables go here   var self = this; // Save reference   this.user = {};   this.backendUrl = "http://localhost:3000";   this.setName = function(newName) {     self.user['name'] = newName;   }   this.setEmail = function(newEmail) {     self.user['email'] = newEmail;   }   this.save = function() {     return $http.post(self.backendUrl + '/users', {       user: self.user     })   } });

这里的功能和使用factory()方法的方式一样，service()方法会持有构造函数创建的对象。

在应用里面使用service()方法
angular.module('myApp') .controller('MainCtrl', function($scope, User) {   $scope.saveUser = User.save; });


什么时候适合使用service()方法

service()方法很适合使用在功能控制比较多的service里面

注意：需要使用.config()来配置service的时候不能使用service()方法


3、provider()

provider()是创建service最底层的方式，这也是唯一一个可以使用.config()方法配置创建service的方法

不像上面提到的方法那样，我们在定义的this.$get()方法里面进行依赖注入
angular.module('myApp.services') .provider('User', function() {   this.backendUrl = "http://localhost:3000";   this.setBackendUrl = function(newUrl) {     if (url) this.backendUrl = newUrl;   }   this.$get = function($http) { // injectables go here     var self = this;     var service = {       user: {},       setName: function(newName) {         service.user['name'] = newName;       },       setEmail: function(newEmail) {         service.user['email'] = newEmail;       },       save: function() {         return $http.post(self.backendUrl + '/users', {           user: service.user         })       }     };     return service;   } });

在应用里面使用provider()方法

为了给service进行配置，我们可以将provider注入到.config()方法里面
angular.module('myApp') .config(function(UserProvider) {   UserProvider.setBackendUrl("http://myApiBackend.com/api"); })

这样我们就可以和其他方式一样在应用里面使用这个service了
angular.module('myApp') .controller('MainCtrl', function($scope, User) {   $scope.saveUser = User.save; });

什么时候使用provider()方法

当我们希望在应用开始前对service进行配置的时候就需要使用到provider()。比如，我们需要配置services在不同的部署环境里面（开发，演示，生产）使用不同的后端处理的时候就可以使用到了

当我们打算发布开源provider()也是首选创建service的方法，这样就可以使用配置的方式来配置services而不是将配置数据硬编码写到代码里面。

还可以看看这篇翻译：http://www.oschina.net/translate/top-10-mistakes-angularjs-developers-make



点击查看完整的代码：https://gist.github.com/auser/7743235

AngularJS实现注入服务的方法有5种方式：
decorator
constant
value
service
factory
provider
其中provider是一切方法的基础，有点类似于XMLHttpObject，在这个基础之上建立起来的，像jquery的$.ajax等等。

第一种方式：decorator
<div ng-controller="appCtrl">{{ content }}</div>      <script type="text/javascript">       var app = angular.module('myApp', []);       app.value('profile', 'I\'am a angular developer.');       app.config(function ($provide) {           $provide.decorator('profile', function ($delegate) {               return $delegate + ' I like angularJS. So sorry, you are hacked!';           });       });          app.controller('appCtrl', ['$scope', 'profile', function ($scope, profile) {           $scope.content = profile;       }]);   </script>  

第二种方式：constant
<div ng-controller="UsingConstantServiceCtrl">{{ magicNumber }},{{ bookTitle }}</div>   <div ng-controller="UsingValueServiceCtrl">{{ magicNumberFromService }}</div>      <script type="text/javascript">       var app = angular.module('myApp', []);          app.constant('magicNumber', 42);//常量直接接作为服务       app.constant('magicNumber', 422);//TODO 重新赋值是无效的       app.constant('bookTitle', "Hitchhiker's Guide");          function UsingConstantServiceCtrl($scope, magicNumber, bookTitle) {           $scope.magicNumber = magicNumber;           $scope.bookTitle = bookTitle;       }          (function () {           var existingServiceInstance = {               getMagicNumber: function () {                   return 42; // Note that we are using an "hard-coded" magic number               }           };           app.value('magicNumberService', existingServiceInstance);       }());          function UsingValueServiceCtrl($scope, magicNumberService) {           $scope.magicNumberFromService = magicNumberService.getMagicNumber();       }   </script>  


第三种方式：value
<pre code_snippet_id="92094" snippet_file_name="blog_20131202_3_1841481" name="code" class="javascript"><div ng-controller="appCtrl">{{ title }}</div>    <script type="text/javascript">       var app = angular.module('myApp', []);       app.config(function ($provide) {           $provide.value('title', 'my Title')       });       app.controller('appCtrl', ['$scope', 'title', function ($scope, title) {           $scope.title = title;       }]);   </script>

第四种方式：service
<pre code_snippet_id="92094" snippet_file_name="blog_20131202_4_2538810" name="code" class="javascript"><div ng-controller="UsingValueServiceCtrl">{{ magicNumberFromService }}</div>   <script type="text/javascript">       var app = angular.module('myApp', []);          app.constant('magicNumber', 42);//常量直接接作为服务          (function() {           var MyService = function(magicNumber) { // "magicNumber" is injected               this.getMagicNumber = function() {                   return magicNumber;               };           };              app.service('magicNumberService', MyService);       }());          function UsingValueServiceCtrl($scope, magicNumberService) {           $scope.magicNumberFromService = magicNumberService.getMagicNumber();       }   </script></pre><br/>   <br/>   <pre></pre>   <br/>   <br/>  


第五种方式：factory
<div ng-controller="UsingValueServiceCtrl">{{ magicNumberFromService }}</div>         <script type="text/javascript">       var app = angular.module('myApp', []);             app.constant('magicNumber', 42);//常量直接接作为服务             (function () {           // registers a service factory with "magicNumber" injected           app.factory('magicNumberService', function (magicNumber) {               return {                   getMagicNumber: function () {                       return magicNumber;                   }               };           });       }());             function UsingValueServiceCtrl($scope, magicNumberService) {           $scope.magicNumberFromService = magicNumberService.getMagicNumber();       }   </script>  


第六种方式：provider
<div ng-controller="UsingValueServiceCtrl">{{ magicNumberFromService }}</div>      <script type="text/javascript">       var app = angular.module('myApp', []);          app.constant('magicNumber', 42);//常量直接接作为服务          (function() {           var MyService = function(magicNumber) { // "magicNumber" is injected               this.getMagicNumber = function() {                   return magicNumber;               };           };              app.service('magicNumberService', MyService);       }());          function UsingValueServiceCtrl($scope, magicNumberService) {           $scope.magicNumberFromService = magicNumberService.getMagicNumber();       }   </script>  

理解AngularJS中的依赖注入
AngularJS中的依赖注入非常的有用，它同时也是我们能够轻松对组件进行测试的关键所在。在本文中我们将会解释AngularJS依赖注入系统是如何运行的。

Provider服务（$provide）
$provide服务负责告诉Angular如何创造一个新的可注入的东西：即服务(service)。服务会被叫做provider的东西来定义，你可以使用$provide来创建一个provider。你需要使用$provide中的provider方法来定义一个provider，同时你也可以通过要求改服务被注入到一个应用的config函数中来获得$provide服务。下面是一个例子：
app.config(function($provide) {   $provide.provider('greeting', function() { this.$get = function() {   return function(name) { alert("Hello, " + name);   }; };   }); });  
代码laycode - v1.1
在上面的例子中我们为一个服务定义了一个叫做greeting的新provider；我么可以把一个叫做greeting的变量注入到任何可注入的函数中（例如控制器，在后面会讲到）然后Angular就会调用这个provider的$get函数来返回这个服务的一个实例。在上面的例子中，被注入的是一个函数，它接受一个叫做name的参数并且根据这个参数alert一条信息。我们可以像下面这样使用它：
app.controller('MainController', function($scope, greeting) {   $scope.onClick = function() { greeting('Ford Prefect');   }; });
代码laycode - v1.1
现在有趣的事情来了。factory，service以及value全部都是用来定义一个providr的简写，它们提供了一种方式来定义一个provider而无需输入所有的复杂的代码。例如，你可以用下面的代码定义一个和前面完全相同的provider：
app.config(function($provide) {   $provide.factory('greeting', function() { return function(name) {   alert("Hello, " + name); };   }); });  
代码laycode - v1.1
这非常的重要，所以一定要记住：在幕后，AngularJS实际上是在调用前面出现的代码（就是$provide.provider的版本）。从字面上来说，这两种方法基本上没有差别。value方法也一样 – 如果我们需要从$get函数（也就是我们的factory函数）返回的值永远相同的话，我们可以使用value方法来编写更少的代码。例如如果我们的greeting服务总是返回相同的函数，我们可以使用value来进行定义：
app.config(function($provide) {   $provide.value('greeting', function(name) { alert("Hello, " + name);   }); });  
代码laycode - v1.1
再一次申明，以上两种方式的效果完全一样 – 只不过是代码的量不同而已。

现在你可能已经注意到了我们使用的烦人的
app.config(function($provide){...})  
代码laycode - v1.1
代码了。由于定义一个新的provider是如此的常用，AngularJS在模块对象上直接暴露了provider方法，以此来减少代码的输入量：
var myMod = angular.module('myModule', []); myMod.provider("greeting", ...); myMod.factory("greeting", ...); myMod.value("greeting", ...);  
代码laycode - v1.1
上面的代码和前面app.config(...)这样?嗦的写法完全相同。

除了上面提到的可以注入的东西之外，还有一个constant方法。基本上，它和value的用法一致。我们会在后面来讨论两者的不同点。

为了巩固前面的学习成果，下面所有的代码所做的都是同一件事情：
myMod.provider('greeting', function() {   this.$get = function() { return function(name) {   alert("Hello, " + name); };   }; }); myMod.factory('greeting', function() {   return function(name) { alert("Hello, " + name);   }; }); myMod.value('greeting', function(name) {   alert("Hello, " + name); });  
代码laycode - v1.1
注入器（$injector）
注入器负责从我们通过$provide创建的服务中创建注入的实例。只要你编写了一个带有可注入性的参数，你都能看到注入器是如何运行的。每一个AngularJS应用都有唯一一个$injector，当应用启动的时候它被创造出来，你可以通过将$injector注入到任何可注入函数中来得到它（$injector知道如何注入它自己！）。

一旦你拥有了$injector，你可以动过调用get函数来获得任何一个已经被定义过的服务的实例。例如：
var greeting = $injector.get('greeting'); greeting('Ford Prefect');  
代码laycode - v1.1
注入器同样也负责将服务注入到函数中；例如，你可以魔法般的将服务注入到任何函数中，只要你使用了注入器的invoke方法：
var myFunction = function(greeting) {   greeting('Ford Prefect'); }; $injector.invoke(myFunction);  
代码laycode - v1.1
如果注入器只是创建一个服务的实例一次的话，那么它也没什么了不起的。它的厉害之处在于，他能够通过服务名称缓存从一个provider中返回的任何东西，当你下一次再使用这个服务时，你将会得到同一个对象。

因此，你可以通过调用$injector.invike将服务注入到任何函数中也是合情合理的了。包括：

控制器定义函数
指令定义函数
过滤器定义函数
provider中的$get方法（也就是factory函数）
由于constant和value总是返回一个静态值，它们不会通过注入器被调用，因此你不能在其中注入任何东西。

配置provider
你可能会感到困惑：既然factorry和value能够节省那么多的代码，为什么还有人要使用provider。答案是provider允许我们进行一些配置。在前面我们已经提到过当你通过provider（或者其他简写方法）创建一个服务时，你实际上创建了一个新的provider，它将定义你的服务如何被创建。我们没有提到的是，这些provider可以被注入到config函数中，你可以和它们进行一些交互。

首先，AngularJS分两个阶段运行你的应用 – config阶段和run阶段。config阶段是你设置任何的provider的阶段。它也是你设置任何的指令，控制器，过滤器以及其它东西的阶段。在run阶段，AngularJS会编译你的DOM并启动你的应用。

你可以在myMod.config和myMod.run中添加任何代码 – 这两个函数分别在两个阶段运行。正如我们看到的，这些函数都是可以被注入的 – 我们在第一个例子中注入了内建的$provide函数。然而，值得注意的是在config阶段，只有provider能被注入（只有两个例外是$provide和$injector)。

例如，下面的代码就是错误的写法：
myMod.config(function(greeting) {   //不会运行 -- greeting是一个服务的实例   //只有服务的provider能被注入到config中 }); 代码laycode - v1.1 但是你可以通过下面的方法注入provider： myMod.config(function(greetingProvider) {   // 这下好了！ });  
代码laycode - v1.1
有一个例外：constant，由于它们不能被改变，因此它不能被注入到config中（这就是它和value之间的不同之处）。它们只能通过名字被获取。

无论何时你为一个服务定义了一个provider，这个provider的名字都是serviceProvider。在这里service是服务的名字。现在我们可以使用provider的力量来做一些更复杂的事情了！
myMod.provider('greeting', function() {   var text = 'Hello, ';   this.setText = function(value) {      text = value;   };   this.$get = function() {      return function(name) {          alert(text + name);      };   }; }); myMod.config(function(greetingProvider) {   greetingProvider.setText("Howdy there, "); }); myMod.run(function(greeting) {   greeting('Ford Prefect'); });
代码laycode - v1.1
现在我们在provider中拥有了一个叫做setText的函数，我们可以使用它来自定义我们alert的内容；我们可以再config中访问这个provider，调用setText方法并自定义我们的service。当我们最终运行我们的应用时，我们可以获取greeting服务，然后你会看到我们自定义的行为起作用了。

控制器($controller)
控制器函数是可以被注入的，但是控制器本身是不能被注入到任何东西里面去的。这是因为控制器不是通过provider创建的。然而，有一个内建的AngularJS服务叫做1$controller，它负责设置你的控制器。当你调用myMod.controller(…)时，你实际上是访问了这个服务的provider，就像上面的例子一样。

例如，当你像下面一样定义了一个控制器时：
myMod.controller('MainController', function($scope) {   // ... });  
代码laycode - v1.1
你实际上做的是下面这件事：
myMod.config(function($controllerProvider) {   $controllerProvider.register('MainController', function($scope) { // ...   }); });
代码laycode - v1.1
当Angular需要创建一个你的控制的实例时，它会使用$controller服务（它反过来会使用$injector来调用你的控制器以便它能够被注入依赖项）。

过滤器和指令
filter和directive和controller的运行方式相同；filter会使用一个叫做$filter的服务以及它的provider $filterProvider，而directive使用一个叫做$compile的服务以及它的provider $compileProvidr。下面是相应的文档：
$filter: <a href="http://docs.angularjs.org/api/ng.$filter" target="_blank">http://docs.angularjs.org/api/ng.$filter</a> $filterProvider: <a href="http://docs.angularjs.org/api/ng.$filterProvider" target="_blank">http://docs.angularjs.org/api/ng.$filterProvider</a> $compile: <a href="http://docs.angularjs.org/api/ng.$compile" target="_blank">http://docs.angularjs.org/api/ng.$compile</a> $compileProvider: <a href="http://docs.angularjs.org/api/ng.$compileProvider" target="_blank">http://docs.angularjs.org/api/ng.$compileProvider</a>
其中，myMod.filter和myMod.directive分别是这些服务的简写。

总结
总结一下，任何能够被$injector.invoke调用的函数都是能被注入的。包括，但不限于下面的这些：

控制器
指令
factory
过滤器
provider中的$get函数
provider函数
服务
provider创建的新服务都可以用来注入。包括：

constant
factory
provider
service
value
另外，内建的服务$controller和$filter也可以被注入，同时你也可以使用这些服务来获得新的过滤器和控制器。

本文译自Understanding Dependency Injection，原文地址https://github.com/angular/angular.js/wiki/Understanding-Dependency-Injection

MVC三个组成部分：Model 、View、Controller。今天主要想和大家分享的是View这一块。微软的MVC摒弃了之前的aspx页面的拖拖控件就能搞定的理念，因为发现那样会把程序员惯成傻子，而做出来的网站毫无性能可言，慢的像猪头！所以在展示页面View这一部分的操作几乎就是纯手工写html代码了。这对于程序员来说也挺苦恼的，因为从轻松拖控件直接升级为纯手工写代码（当然，可能难度不大，但是其中的麻烦是不可言喻的）。幸好微软推出了HtmlHelper，方便了我们写html代码，大大提高了效率。

　　何为HtmlHelper？HtmlHelper也好SQLHelper也好，说白了就是把很多代码封装起来，然后供我们调用，用于节省开发时间，降低错误率。好了闲言少叙，开始正题；如果我们用MVC做一个简单的文章回复功能，View层中写一个TextBox一个TextArea一个Submit按钮，TextBox写标题TextArea写内容然后一点Submit就可以搞定了，这样看起来没什么问题。但是想一想如果在提交回复时出现了错误，没提交成功。按道理说在TextBox和TextArea中应该还保存刚才我们写的内容的，但是可惜View层中已经没有了ViewState。于是乎悲催的事情发生了，我们写了半天的评论，一点按钮，一个小错误没成功，回来后啥都没了，傻眼了！这样该怎么办呢？好办啊！在Controller里面给控件赋值不就可以了吗？想法很好，但可惜MVC模式中Controller操作View中的控件是犯法的！这怎么办？于是乎htmlhelper应运而生！ 在View中将手写的TextBox和TextArea删掉，然后用HtmlHelper，具体代码如下：标题： <%:Html.TextBox("txtTitle","txtTitle") %>评论内容： <%:Html.TextArea("txtContent") %>这两个尖括号里里面的东西就是HtmlHelper了。以第一个为例：先写尖括号百分号然后是冒号，但是我们知道啊在WebForm时代，我们也这样在html里面加C#代码但是百分号后面往往是等号，那冒号和百分号的区别是什么呢？诸位可以试一下，冒号包裹的内容如果含有尖括号等的html标签，会识别出来。而等号不识别而是直接把内容显示出来。Html.TextBox里面的参数，第一个是该TextBox的Name属性，第二个是Value属性，当然还可以设置它的样式了 <%:Html.TextBox("txtTitle", "txtTitle", new { disable="none",....})%>大括号里面写属性，多个时用逗号隔开。在Controller里面可以通过ViewData["txtTitle"]进行取值和赋值。这样子一个HtmlHelper基本上就出炉了。

　　当然有很多公司都有自己的HtmlHelper，然后今天就研究了一下，应该怎样写出自己的HtmlHelper，然后查看代码发现了所谓的每一个控件的HtmlHelper其实就是分别写一个类然后对HtmlHelper进行扩展，然后便写了一个扩展的类实现了一个特殊的Span标签的展示。具体方法如下：新建一个类，命名为SpanExtensions这个类是一个静态类，Public Static Class SpanExtensions  里面写一个方法，GetSpan方法，当然这也是一个静态方法，同时实现对HtmlHelper的扩展，还需要传入一个里面显示内容的参数具体代码如下：

public static string GetLabel(this HtmlHelper helper, string txt)  

  {            

            return string.Format("{0}", txt);

}

　　这样在前面的View里面用Htmlhelper调用的时候发现没有，怪了，明明写了的，后来发现原来是SpanExtensions类的命名空间和View不一样，我想引用然后发现如果以后用这个方法的地方很多就太麻烦了，然后就直接把SpanExtensions的命名空间改为View的命名空间，然后就找到了，写完后一运行！发现：亲娘来，连html标签都出来了，难不成还得转？后来看了看HtmlHelper里面的TextBox发现返回值不一样，它的返回值是一个MvcHtmlString类型，啥东西啊？没见过！于是我就想把MvcHtmlString这个东西和String能够联系起来，后来整出来了，代码如下：  MvcHtmlString mc = MvcHtmlString.Create(string.Format("{0}", txt)); 这样直接返回mc就可以搞定了！

string controllerName = (string)htmlHelper.ViewContext.RouteData.GetRequiredString("controller"); string areaName = (string)htmlHelper.ViewContext.RouteData.DataTokens["area"];

在 controller 中可以使用 ControllerContext 取得：

ControllerContext.RouteData.Values["controller"] ControllerContext.RouteData.Values["action"]

在 view 中可以使用 ViewContext：
ViewContext.RouteData.Values["controller"] ViewContext.RouteData.Values["action"]

 前一段时间想装一下sqlserver，但是一直装不上。搞得我很郁闷，我重装了一下系统。但是还是没有装上。 

查询列表中数据丢失，每页10条
以下query全部数据正常
SELECT * FROM TABLE ORDER BY CREATETIME DESC

以下分配查询数据丢失
SELECT * FROM TABLE ORDER BY CREATETIME DESC LIMIT 0，10;
SELECT * FROM TABLE ORDER BY CREATETIME DESC LIMIT 10，10;

怀疑是CREATETIME相同导致分页问题
查看数据库果然发现有3条数据CREATETIME相同

解决：
CREATETIME 类型到毫秒
或者
CREATETIME update时间为不同
或者
增加主键参与排序
ORDER BY CREATETIME,id DESC