搜索到
19
篇与
的结果
-
AngularJS中的Provider们：Service和Factory等的区别 AngularJS中的Provider们：Service和Factory等的区别 引言 看了很多文章可能还是不太说得出AngularJS中的几个创建供应商(provider)的方法(factory()、service()、provider())到底有啥区别，啥时候该用啥，之前一直傻傻分不清楚，现在来总结一下。 下文中的术语说明： 供应商 ==> 泛指provider 服务 ==> 泛指service provider ==> provider()方法创建的东东 service ==> service()方法创建的东东 先说说供应商（$provide） $provide服务负责告诉Angular如何创造一个新的可注入的东西：即服务。服务会被叫做供应商的东西来定义，你可以使用$provide来创建一个供应商。你需要使用$provide中的provider()方法来定义一个供应商，同时你也可以通过要求$provide被注入到一个应用的config函数中来获得$provide服务。 简单来说： $provide是一个服务，在Auto模块中 这个服务下面有好多方法，是用来定义供应商 而供应商是用来提供服务的，被注入来注入去的东西就是供应商们提供的服务 例子： myMod.config(function($provide) { $provide.provider('greeting', function() { this.$get = function() { return function(name) { alert("Hello, " + name); }; }; }); }); 定义供应商的方法们 AngularJS用$provide去定义一个供应商，这个$provide有5个用来创建供应商的方法： constant value service factory provider decorator (这个有点特殊) Constant 定义常量用的，这货定义的值当然就不能被改变，它可以被注入到任何地方，但是不能被装饰器(decorator)装饰。 var app = angular.module('app', []); app.config(function ($provide) { $provide.constant('movieTitle', 'The Matrix'); }); app.controller('ctrl', function (movieTitle) { expect(movieTitle).toEqual('The Matrix'); }); 语法糖： app.constant('movieTitle', 'The Matrix'); Value 这货可以是string、number甚至function，它和constant的不同之处在于，它可以被修改，不能被注入到config中，但是它可以被decorator装饰。 var app = angular.module('app', []); app.config(function ($provide) { $provide.value('movieTitle', 'The Matrix') }); app.controller('ctrl', function (movieTitle) { expect(movieTitle).toEqual('The Matrix'); }) 语法糖： app.value('movieTitle', 'The Matrix'); Service 它是一个可注入的构造器，在AngularJS中它是单例的，用它在Controller中通信或者共享数据都很合适。 var app = angular.module('app' ,[]); app.config(function ($provide) { $provide.service('movie', function () { this.title = 'The Matrix'; }); }); app.controller('ctrl', function (movie) { expect(movie.title).toEqual('The Matrix'); }); 语法糖： app.service('movie', function () { this.title = 'The Matrix'; }); 在service里面可以不用返回东西，因为AngularJS会调用new关键字来创建对象。但是返回一个自定义对象好像也不会出错。 Factory 它是一个可注入的function，它和service的区别就是：factory是普通function，而service是一个构造器(constructor)，这样Angular在调用service时会用new关键字，而调用factory时只是调用普通的function，所以factory可以返回任何东西，而service可以不返回(可查阅new关键字的作用)。 var app = angular.module('app', []); app.config(function ($provide) { $provide.factory('movie', function () { return { title: 'The Matrix' } }); }); app.controller('ctrl', function (movie) { expect(movie.title).toEqual('The Matrix'); }); 语法糖： app.factory('movie', function () { return { title: 'The Matrix' } }); factory可以返回任何东西，它实际上是一个只有$get方法的provider。 示例： 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; }); Provider provider是他们的老大，上面的几乎(除了constant)都是provider的封装，provider必须有一个$get方法，当然也可以说provider是一个可配置的factory。 var app = angular.module('app', []); app.provider('movie', function () { var version; return { setVersion: function (value) { version = value; }, $get: function () { return { title: 'The Matrix' + ' ' + version } } } }); app.config(function (movieProvider) { movieProvider.setVersion('Reloaded'); }); app.controller('ctrl', function (movie) { expect(movie.title).toEqual('The Matrix Reloaded'); }); 注意这里config方法注入的是movieProvider，上面定义了一个供应商叫movie，但是注入到config中不能直接写movie，因为前文讲了注入的那个东西就是服务，是供应商提供出来的，而config中又只能注入供应商（两个例外是$provide和$injector），所以用驼峰命名法写成movieProvider，Angular就会帮你注入它的供应商。 Decorator 这个比较特殊，它不是provider，它是用来装饰其他provider的，而前面也说过，他不能装饰Constant，因为实际上Constant不是通过provider()方法创建的。 var app = angular.module('app', []); app.value('movieTitle', 'The Matrix'); app.config(function ($provide) { $provide.decorator('movieTitle', function ($delegate) { return $delegate + ' - starring Keanu Reeves'; }); }); app.controller('myController', function (movieTitle) { expect(movieTitle).toEqual('The Matrix - starring Keanu Reeves'); }); 总结 所有的供应商都只被实例化一次，也就说他们都是单例的 除了constant，所有的供应商都可以被装饰器(decorator)装饰 value就是一个简单的可注入的值 service是一个可注入的构造器 factory是一个可注入的方法 decorator可以修改或封装其他的供应商，当然除了constant provider是一个可配置的factory 个人理解 scope等于什么，html将展现什么，这包括操作的一些交互状态，比如显示隐藏列表，如果scope（其中的判断值）等于false，列表隐藏，相反列表显示。 选择指南 当需要一个简单的可注入值，使用value 当需要在配置阶段访问的值，使用constant 当需要在多个控制器间共享数据和方法，使用service 当需要更灵活的功能，可以返回不同类型的值或函数，使用factory 当需要在配置阶段进行配置，使用provider 当需要修改或扩展现有服务的行为，使用decorator -
AngularJS angular.identity 和 angular.noop AngularJS angular.identity 和 angular.noop angular.identity 函数返回本身的第一个参数。这个函数一般用于函数风格。 格式： angular.identity() 示例代码： (function () { angular.module("Demo", []) .controller("testCtrl", testCtrl); function testCtrl() { var getResult = function (fn, val) { return (fn || angular.identity)(val); }; var result = getResult(function (n) { return n * 2; }, 3); // result = 6 var null_result = getResult(null, 3);// null_result = 3 var undefined_result = getResult(undefined, 3);// undefined_result = 3 }; }()) angular.noop 一个不执行任何操作的空函数。这个函数一般用于函数风格。 格式： angular.noop(); 示例代码： (function () { angular.module("Demo", []) .controller("testCtrl", testCtrl); function testCtrl() { var _console = function (v) { return v * 2; }; var getResult = function (fn, val) { return (fn || angular.noop)(val); }; var firstResult = getResult(_console, 3);//6 var secondResult = getResult(null, 3);//undefined var thirdResult = getResult(undefined, 3);// undefined }; }()) 总结 这两个API的用途有点特殊。总的来说，这两个方法都是用来编写函数时使用的，根据上面示例代码及运行结果可以看出，它们的作用是用来防止函数传入的参数是null或undefined或其他不能操作的对象。 如果不使用这两个函数，当你在函数调用时传入null/undefined/或者其他不能执行的对象，控制台会直接报错。 angular.identity：当传入null/undefined时，返回传入的第二个参数值 angular.noop：当传入null/undefined时，返回undefined
-
在 WebStorm 下断点调试 在 WebStorm 下断点调试 配置 WebStorm 将新建的 ThinkJS 2015+ 项目导入到 WebStorm 中，然后在首选项的 JavaScript 版本设置为 ECMASCRIPT 6。如： 点击右上角的 Edit Configurations，然后新建个项目，项目类型选择 Node.js。如： 在右侧配置项 JavaScript File 里填入 www/development.js，或者通过右侧的按钮选择也可以。如： 调试 点击右上角的调试按钮，会启动 Node.js 服务。如： 如果之前已经在命令行下启动了服务，需要关掉，否则会出现端口被占用导致报错的情况。 在 app/ 目录下的文件设置断点（一定要在 app/ 目录下，不能是 src/ 目录下），如： 打开浏览器，访问对应的接口。返回 WebStorm，点击调试按钮就可以进行调试了，并且看到的是源代码。
-
Angular.js中指令compile与link原理剖析 AngularJS中的Compile与Link 在AngularJS中，当我们设置了link选项时，实际上是创建了一个postLink()链接函数，以便compile()函数可以定义这个链接函数。 编译(compile)和链接(link)的职责 编译(compile) 函数负责对模板DOM进行转换。 链接(link) 函数负责将作用域(Scope)和DOM进行链接。 Compile与Link的区别 Compile函数 对指令的模板进行转换。 Link函数 在模型(Model)和视图(View)之间建立关联，并包括在元素上注册事件监听。 作用域(Scope)在链接阶段才会被绑定到元素上，因此在compile阶段操作scope会报错。 对于同一个指令的多个实例，compile只会执行一次；而link对于指令的每个实例都会执行一次。 在一般情况下，我们只需要编写link函数即可。 如果你自定义了compile函数，那么自定义的link函数将会无效，因为compile函数应该返回一个link函数供后续处理。 示例代码 // require 'SomeController' link: function(scope, element, attrs, SomeController) { // 在这里操作DOM，可以访问required指定的控制器 }
-
Angular2学习笔记 Angular2学习笔记 模板语法 模板是包在反引号 (`) 中的一个多行字符串。反引号 (`) ——注意，不是单引号 (') ——有很多好用的特性，比如允许多行字符串和模板字面量。 装饰器 @Component 装饰器，这个装饰器类（和我们随后将会学到的 @Directive 和 @Pipe 一样）是 InjectableMetadata 的子类型。实际上，这个 InjectableMetadata 装饰器是把一个类标识为依赖注入器实例化的目标。 TypeScript接口 接口只是 TypeScript 的一个设计期概念。JavaScript 没有接口。在生成 JavaScript 代码时，TypeScript 的接口就消失了。在运行期，没有接口类型信息可供 Angular 查找。 HTML Attribute 与 DOM Property Attribute 是由 HTML 定义的。Property 是由 DOM(Document Object Model) 定义的。 就算名字相同，HTML Attribute 和 DOM Property 也不是同一样东西。 组件交互 组件定义了一个 deleteRequest 属性，它是一个 EventEmitter 实例。（译注：deleteRequest 属性是导出 Output 属性，是组件与父级组件交互的主要方式之一。参见 输入和输出属性 和 父组件监听子组件的事件。我们需要用 @Output() 来装饰它，或者把它添加到组件元数据的 outputs 数组中，它才能在父级组件可见。） NgFor 与 trackBy 现在，把 NgForTrackBy 指令设置为那个追踪函数： <div *ngFor="let hero of heroes; trackBy:trackByHeroes">({{hero.id}}) {{hero.fullName}}</div> 追踪函数不会排除所有 DOM 更改。如果用来判断是否同一个英雄的属性变化了，Angular 就可能不得不更新 DOM 元素。但是如果这个属性没有变化——而且大多数时候它们不会变化——Angular 就能留下这些 DOM 元素。列表界面就会更加平滑，提供更好的响应。 安全导航操作符 Angular 的安全导航操作符 (?.) 是一种流畅而便利的方式，用来保护出现在属性路径中 null 和 undefined 值。这意味着，当 currentHero 为空时，保护视图渲染器，让它免于失败。 其他重要概念 数据绑定 Angular 支持多种数据绑定形式： 插值表达式：{{value}} 属性绑定：[property]="value" 事件绑定：(event)="handler()" 双向绑定：[(ngModel)]="property" 指令 Angular 有三种类型的指令： 组件：带有模板的指令 结构型指令：改变 DOM 布局的指令（如 *ngIf、*ngFor） 属性型指令：改变元素、组件或其他指令的外观和行为的指令（如 ngClass、ngStyle） 服务与依赖注入 Angular 服务是一个广义的概念，它包括应用所需的任何值、函数或特性。通常是一个具有明确用途的类。服务通过依赖注入系统被注入到需要它们的组件中。 模块 Angular 应用是模块化的，它拥有自己的模块系统，称作 NgModule。每个 Angular 应用都至少有一个 NgModule 类，也就是根模块，它习惯上命名为 AppModule，并位于一个名叫 app.module.ts 的文件中。
