Angular 4.x NgSwitch 指令用法

基本用法 下面是官方给出的基本套路,看完估计该懂的都应该懂了,不懂的联想一下也应该懂得差不多了。 用法 <container-element [ngSwitch]="switch_expression"> <some-element *ngSwitchCase="match_expression_1">...</some-element> <some-element *ngSwitchCase="match_expression_2">...</some-element> <some-other-element *ngSwitchCase="match_exp...

2017
07-18

Angular 4.x NgStyle 指令用法

基本用法 官方给出的用法就只有两种不同的形式,行内添加及或者通过一个对象添加。下面就是 NgStyle 的全部内容。 语法 <some-element [ngStyle]="{'font-style': styleExp}">...</some-element> <some-element [ngStyle]="{'max-width.px': widthExp}">...</some-element> <some-element [ngStyle]="objExp">...</some-element> 示例 套路一 行间添加...

2017
07-18

Angular 4.x NgClass 指令用法

用法 语法 <some-element [ngClass]="'first second'">...</some-element> <some-element [ngClass]="['first', 'second']">...</some-element> <some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element> <some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element> <some-elemen...

2017
07-16

Angular 4.x HTTP 示例

启动服务 ng serve --open 上面的命令行就是启动服务并运行 应用。这个命令行有几个作用:1.启动应用服务;2.监听文件变化。3.重建APP。 提供 HTTP Services HttpModule 并不是核心的 NgModule。HttpModule 是一个可选项。你可以引入这个包@angular/http。 您可以从@ angular / http导入,因为systemjs.config配置了SystemJS,以便在需要时加载该库。 注册 HTTP services 应用将依赖于Angular 的 htt...

2017
07-14

Angular 4.x 路由示例(Routing)

现在应用有了新的需求: 1、添加一个 Dashboard 页面 2、添加导航功能 3、用户不管在任意一个页面中点击都能进入详情 4、当用户点击一个深度链接可以打开指定英雄详情 当你完成了以上这些,用户就可以像下面这样进行导航(页面跳转): 为了能达到上面的这些需求你得给应用添加一个路由。 准备 请确保你的项目结构目录如下: 启动服务 ng serve --open 上面的命令行就是启动服务并运行 应用。这个命...

2017
07-08

Angular 4.x 服务示例(Services)

随着应用的不断完善,更多的组件需要用到 hero 数据。 你无需一遍又一遍地复制、拷贝代码,因为在这遍文章里我们要通过服务来提供数据,创建一个数据服务,然后在需要英雄数据的组件中注入这个数据服务。 通过把数据独立出来做成一个服务,可以让你的组件更轻、更爽、更专注。还可以更容易的去做单元测试。 因为数据服务总是异步,所以你需要通过 Promise-based version 的数据服务来完成数据交互。 准备 ...

2017
07-05

Angular 4.x 多组件示例(Multiple Components)

AppComponent 为我们做了很多事件,在示例的一开始它完成了单个英雄信息的显示,接着就是多个英雄列表及对应英雄的详情信息。接下来我们将会看到新的需求及新的功能。你不可能在一个组件里完成所有东西,这维护起来会很吃力。 我需要把它们拆分成几个子组件,每一个子组件都专注一种任务或者工作流。而 AppComponent 就可以成为一个简单的壳来管理那些子组件。 在这篇文章里,你要做的第一件事就是把英雄的...

2017
07-03

Angular 4.x 列表与详情示例(Master/Detail)

在这篇文章中,我们将会做一个英雄列表,并且显示选中英雄的详情。 在开始英雄列表之旅前,请确定你已经有以下文件结构(或者新创建一个项目)。 启动服务 运行下面的命令行: ng serve --open 上面的命令行就是启动服务并运行 应用。这个命令行有几个作用:1.启动应用服务;2.监听文件变化。3.重建APP。 显示 heroes 要想在页面中显示heroes ,你就得添加 heroes 。 创建 heroes 创建一个heroes 数...

2017
07-02

Angular 4.x 入门示例(Hero Editor)

创建工程 按照下面的说明创建一个名为 angular-tour-of-heroes 的项目名。 结构如下: 注:图片来自官网截图 启动应用服务 ng serve --open 上面的命令行就是启动服务并运行 应用。这个命令行有几个作用:1.启动应用服务;2.监听文件变化。3.重建APP。 声明 hero 在AppComponent中添加两个属性,一个是用于应用名的 title 属性,一个是用于英雄名的 hero 属性。 app.component.ts (AppComponent cl...

2017
07-02

Angular 4.x 工程项目搭建之旅

前言 Angular 2 时代的到来,终结了不少开发者对未来的向往,但完全独立于Angularjs(Angular 1)的实现,让我们对这个框架充满了前所未有的好奇。存在即使合理,所以Angular 2 的横空出世也就理所当然了。这是 Angular 2 的开始篇,本文主要讲解在使用 Angular 2 开发之前的一些准备(环境)。 安装环境 首先我们需要安装 Node.js 和 npm ,版本号也是有要求的,Node.js 至少是6.9.x 的版本以上,npm ...

2017
07-02