沈斯明技术博客

依赖注入一直是Angular的一个最大特点和卖点。它允许在我们应用不同组件中注入依赖，而不需要知道这些依赖是如何创建的，或者它们需要的依赖关系是什么，可是，已证明了目前的Angular 1的依赖注入系统有一些问题，所以建立了下一代框架Angular 2来解决这些问题，在这篇文章中，我们将探索新的依赖注入系统。在我们进入新的依赖注入系统之前，先让我们先了解什么是依赖注入，而Angular 1的问

在/app目录新建一个文件，名叫app-routing.module.ts。路由模块将导入RouterModule令牌，并配置路由。 我们遵循文件名约定，并命名Angular模块为AppRoutingModule。和app.module.ts中一样，导入CrisisListComponent和HeroListComponent组件。 然后在路由模块中导入Router和路由配置（Ro

在Angular 1和Angular 2之间，有很多不同的概念和语法。 本章提供了一个快速的参考指南，指出一些常用的Angular 1语法及其在Angular 2中的等价物。可到在线例子中查看Angular 2语法。内容本页内容覆盖了：模板基础 - 绑定变量与局部变量。模板指令 - 内置指令ngIf和ngClass。过滤器/管道 -

angular2 脏检查总述这系列文章将介绍angular2的脏值检查是如何工作的？如何比ng1更高效？带着上述问题，让我们一起来看看angular2这禽兽（谁让它叫angular，又那么生猛）干了什么。什么是脏值检查片面的说脏检查是对比当前的数据和曾经的数据是否发生改变。而在这个context下，我想介绍的是angular2从发现数据的变化到找到变化的点到更新DOM的整个

应用继续演进。 首先加入的是HighlightDirective，一个属性型指令，它会设置所在元素的背景色。app/highlight.directive.tsCOPY CODEimport { Directive, ElementRef, Renderer } from '@angular/core';@Directive({ selector: '[highligh

import { Directive, ElementRef, Input, Renderer } from '@angular/core';@Directive({ selector: '[myHighlight]' })export class HighlightDirective { constructor(el: ElementRef, renderer: Renderer) {

我们有几种方式来把样式加入组件：内联在模板的 HTML 中设置styles或styleUrls元数据通过 CSS 文件导入上述作用域规则对所有这些加载模式都适用。元数据中的样式我们可以给@Component装饰器添加一个styles数组型属性。 这个数组中的每一个字符串（通常也只有一个）定义一份 CSS。COPY

管道把数据作为输入，然后转换它，给出期望的输出。 我们将把组件的birthday属性转换成对人类更友好的日期格式，来说明这一点：app/hero-birthday1.component.tsCOPY CODEimport { Component } from '@angular/core';@Component({ selector: 'hero-birthday'

我们还可以写自己的自定义管道。 下面就是一个名叫ExponentialStrengthPipe的管道，它可以放大英雄的能力：app/exponential-strength.pipe.tsCOPY CODEimport { Pipe, PipeTransform } from '@angular/core';/* * Raise the value exponentia

在angular2中调用扫描接口，现在可以将值正确添加到数组里，如下：constructor() { this.records = [];}barcodeScanner() { var self = this; cordova.plugins.barcodeScanner.scan(function (result) { if (!result.cancelled) {

app/hero-form.component.html (excerpt)COPY CODE type="text" class="form-control" id="name" required [ngModel]="model.name" name="name" (ngModelChange)="model.name = $event"

大多数应用程序包含多个屏幕或视图 (view)。 用户通过点击链接、按钮和其它类似动作，在它们之间导航，使应用程序从一个视图切换到另一个视图。Angular 的组件路由器 (component router)是一个特性丰富的机制，可以配置和管理整个导航过程，包括建立和销毁视图。多数情况下，组件会通过RouterConfig中定义的路由到视图的对照表来附加到路由器上。路由组件

指令 (directive) 和组件 (component) 具有生命周期，由 Angular 在创建、更新和销毁它们的过程中进行管理。你可以通过实现一个或多个生命周期钩子接口，切入到生命周期中的关键时间点。每个接口只有一个钩子方法，方法名是接口名加前缀 ng。例如，OnInit接口的钩子方法名为 ngOnInit。Angular 会按以下顺序调用钩子方法：

1 import http and Inject1import {httpInjectables, Http} from 'angular2/http';1import {Inject} from 'angular2/di';

TypeScript SetUp1 use TypeScript cmd on WebStrom     1.1 download typeScript package using 'npm install -g typescript'     1.2 configure the configuration in webStrom   2 add a ts file a

1. 说明管道用来转换模板显示的内容，应用程序中经常出现获取数据，转换数据，显示数据的逻辑。管道就是用来在转换数据阶段起作用的。主要存在两种类型的管道，pure pipe和impure pipe2. Pure PipePure Pipe，stateless，关注于纯粹对象的变更，检测到输入值发生了纯变更时才会执行纯管道。纯变更是指对原始类型值 (String、Number、Bo

Data directionSyntaxBinding typeOne-wayfrom data sourceto view targetCOPY CODE{{expression}}[target] = "expression"bind-target = "expression"InterpolationProper

1. input properties, typically adorned with @Input decorations.import{ Component,Input} from'@angular/core';import{ Hero} from'./hero';@Component({selector:'hero-

The following example shows how the router can populate the entryComponents field of an NgModule based on the router configuration which refers to components.下面的例子说明angular2.0如何基于NgModule配置组件的路由

@SkipSelf装饰器在注入器injector层级中的祖先injector中查找 CoreModule,如果没有祖先injector则会提供一个CoreModule实例

const routes: Routes = [  { path: '', component: HomeComponent },  { path: 'path/:routeParam', component: MyComponent },  { path: 'staticPath', component: ... },  { path: '**', component: ... 

app/dashboard.component.ts (metadata)COPY CODE@Component({ moduleId: module.id, //将 moduleId 属性设置为 module.id就可以加载templateUrl模板及相关的module selector: 'my-dashboard', templateUrl: 'dashboard.c

1 import Router1import {RouteConfig, RouterOutlet, RouterLink, routerInjectables} from 'angular2/router';2 setting your RouteConfig1

Dependency injection“依赖注入”是提供类的新实例的一种方式，还负责处理好类所需的全部依赖。大多数依赖都是服务。 Angular 使用依赖注入来提供新组件以及组件所需的服务。Angular 通过查看构造函数的参数类型得知组件需要哪些服务。 例如，HeroListComponent组件的构造函数需要一个HeroService服务：app/hero