导航是很简单的，只是不同页面之间的切换，路由是实现导航的一种。 一个url对应的一个页面，在angular2中是一个组件。定义一个规则。 设计的时候，先去 基础知识 大多数带路由的应用都要在index.html的标签下先添加一个元素，来告诉路由器该如何合成导航用的URL。 路由是从@angular/router包中引入的。 路由都是需要进行配置的。而这个配置需要的也就是RouterModule模块

入手方式： 需求 – 先要弄清楚我们做什么？ 被使用方式 – 长什么样子？什么场景被使用？怎么被使用？ 将每个特性写成单元测试，然后写代码，将这个单元的代码测试通过后，再进行下一个特性代码的单元测试。 绑定宿主元素的事件，事件绑定的时候捕捉到这个事件源$event（table指令，这是属性型指令的重点）。 Angular指令可分为三种 组件 属性型指令 结构型指令 今天来学习一下属性型指令。 属性

From表单分为两种类型： 模板驱动表单（Template-Driven Forms） 模型驱动表单（Model-Driven-Forms） 模型：有结构的状态（是一种数据结构）FormContrller 表单项 @angular/forms 模板驱动表单 @angular/reactiveForms 关注点是表单的行为，不是怎么生成DOM。关注点是出错了，是一种出错的状态，是否发生了改变。 Te

import 'rxjs/add/operator/map';

angular2 @input和@output理解 先做个比方，然后奉上代码 比如： <talk-cmp [talk]="someExp" (rate)="eventHandler($event.rating)"> input， [talk]="someExp" 这个标签可以理解为一个专门的监听器，监听父组件传递过来的someExp参数，并存入自身组件的talk变；好像是开了个后门，允许且只允许父

ng2-file-upload文件上传 1、安装ng2-file-upload模块 npm install ng2-file-upload --save 2、如果使用systemjs打包，需要在配置systemjs.config.js文件 A、在System.config的map字段中的最后一行输入以下字段： 'ng2-file-upload':'npm:ng2-file-upload' B、

ng2-pagination 分页组件 1、安装插件 npm install ng2-pagination --save 2、如果使用System.js打包那么就需要配置systemjs.config.js文件 A. map中加入以下代码 'ng2-pagination': 'npm:ng2-pagination' B. packages中添加以下代码 "ng2-pagination": {

目录 目录 架构概览 模块 组件 模板 元数据Metadata 数据绑定 指令directive 服务 依赖注入 其他重要的Angular特性和服务 APPMODULE 根模块 imports 数组 declarations 数组 bootstrap 数组 在maints中引导 架构概览 用 Angular 扩展语法编写 HTML 模板， 用组件类管理这些模板，用服务添加应用逻辑， 用模块打包发布

我们在使用Angular2项目时，直接使用官网提供的基础配置文件，在NodeJS下面就可以生成一个新的ng2项目，但是这样非常不便利，每次都要新建目录，复制配置文件，使用Node命令安装支持库，最后才是写代码。Angular-cli就是用来简化这一操作的，而且官方配置文件不包含打包命令，对于新手来说，对System打包和webpack打包都不熟悉的情况下，使用Angular-cli能够非常方便的生

ng2 http获取服务器数据的时候传递参数详解 1、 六种方法获取服务器数据所传递的参数 get(url: string, options?: RequestOptionsArgs): Observable<Response>; post(url: string, body: string, options?: RequestOptionsArgs): Observable<Response>;

1、 使用npm安装angular2-highcharts npm install angular2-highcharts --save 2、主模块中引入 app.module.ts import {ChartModule} from "angular2-highcharts"; ... imports: [ ChartModule ] ... 3、组件中定义图标配置数据，可在highch

依赖注入这部分分为两部分来学习。第一部分自然是官网上的文档，另外一部分，是自己的“血泪时间史”。 之所以称之为“血泪时间史”，是因为在这部分上花费的时间实在是有点多，也就是前面提到过的“时间的教训”，所以在这里要记录下来，避免下次再犯这样的错误。 依赖注入 依赖注入是一个用来管理代码依赖的强大模式。 应用程序全局依赖 在这里主要说的是，在应用程序根组件AppComponent中注册那些被应用程序全

坑了半天终于搞定了，看代码。 前端部分代码 1、app.module.ts import {JsonpModule} from "@angular/jsonp"; 2、需要调取数据的组件 jsonp.component.ts import {Component} from "@angular/core"; import {Jsonp, URLSearchParams} from "@angular

1、 angular2 核心代码 主要是使用jsonp ?callback=JSONP_CALLBACK （核心代码） constructor(public jsonp:Jsonp) { // 这里是跨域请求端口为3000的express服务器数据 let wikiUrl = 'http://localhost:3000/users?callback=JSONP_CALLBACK'

按照生命周期执行的先后顺序，Angular生命周期接口如下所示 名称 时机 接口 范围 ngOnChanges 当被绑定的输入属性的值发生变化时调用，首次调用一定会发生在 ngOnInit之前。 OnChanges 指令和组件 ngOnInit 在第一轮 ngOnChanges 完成之后调用。 ( 译注：也就是说当每个输入属性的值都被触发了一次 ngOnChanges 之后才会调用 ngOnIni

1、首先全局安装angular-cli，并创建项目 npm install -g angular-cli ng new my-app cd my-app 2、安装ng2-bootstrap和bootstrap npm install ng2-bootstrap bootstrap --save 3、在主模块中导入，需要的模块（src/app/app.module.ts） import { Aler

1、下载安装ts-md5 npm install ts-md5 --save 2、 需要的组件中加载md5模块 import {Md5} from "ts-md5/dist/md5"; 3、 加密 constructor() { console.log(Md5.hashStr("123456")); } 这样就会打印出加密过的结果 （e10adc3949ba59abbe56e057f20f

1、 安装 ng2-charts npm install ng2-charts --save 2、 还必须引入 chart.js npm install chart.js --save 3、 主模块中引入 import { ChartsModule } from 'ng2-charts/ng2-charts'; imports: [ ChartsModule ] 4、 如果使用angular

很多人看到 Angular 从2.4.x 版本之后直接跳到了Angular 4.0.0 beta 版本, 为什么没有 Angular 3.x 呢? 先说一下 Angular 4 将于 2017年3月 发布. (/≧▽≦)/ 原因很简单 原因并没有你想的那么复杂, 一句话就能描述: __Angular开始使用semver语义化版本, 并做了一次版本对齐__. 早在去年9月. Angular 团队就宣

由于具有实现更高性能的浏览器和智能电话应用程序的潜力，单页应用程序 (SPA) 技术在软件行业引起了广泛的兴趣。在过去 5 年多的时间里，开发人员对 Angular（一个开源 SPA 框架）的兴趣远超他们对其他 Web 框架（React、Backbone、Meteor 和 Ember）的兴趣，这从 StackOverflow 网站上针对每种 Web 框架的问题数量上可以判断出： Web 和移动开发