Angular 2+ 动态表单

前言 这篇文章没什么技术含量,只是把官方的 DEMO 拷贝过来,样式修改了下而已,没有别的。这篇文章的重点是对官方 DEMO 代码注解,把那些我认为很可能让你困惑的地方作一些备注。 动态表单 我们直接上码: app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { ReactiveFormsModule } from '@angular/forms'; import { NgModule } from '@angular/core'; impor...

2018
02-06

Angular 2+ 响应式表单

前言 使用响应式表单,我们可以在组件中创建表单控件的对象树,响应式表单可以让使用响应式编程模式、测试和校验变得更容易。 来看看演示效果: Angular 2+ 响应式表单之旅 app.component.html <site-list></site-list> app.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', sty...

2018
01-28

Angular 2+ 表单验证

前言 表单验证远处不在,但你知道在 Angular 2+ 中怎么用了吗?或许你早已知道,或许你还一头雾水,知道的可以跳过,不知道的可以留步。 表单验证之旅 在《Angular 2+ 表单》 已经有分享过表单的验证了,但只是模板驱动验证的,本文我们换一种方式来实现同样的功能,这种方式叫做响应式表单的验证,不管叫法如何变,但关键的东西还是一亲的:验证用户输入的合法性。 响应式表单的验证 下面用一个图来...

2018
01-23

Angular 2+ 表单

前言 在平时的开发中,表单吧说是最常用的了,比如内容的发布页面、登陆页面等,所以在 Angular 2+ 中的表单用法我们必需得会。下面就来看看 Angular 表单。 表单之旅 我们直接来看一个例子,通过这个例子把有关表单的一些常用的东西都融合进去,好例子一个就够! 在做之前,我们不妨先看看效果图: app.component.ts <div class="container"> <div [hidden]="submitted"> <h...

2018
01-22

Angular 2+ 用户输入

前言 事件相信你已经不陌生,比如鼠标事件、键盘事件等,我们可以通过这些事件来触发一些方法以达到我们想要的目的,这再正常不过了,下面我们就来看看有关 Angular 2+ 中的事件。 用户输入 先来看看下面这个简单的事件绑定 <button (click)="clickFn()">Click me!</button> 在 Angular 中我们使用“()” 来绑定事件,等号右边为要执行的方法。 通过 $event 对象取得用户输入 监听keyup事...

2018
01-21

Angular 做一个 SwitchButton (滑动开关)功能模块

什么是 SwitchButton 相信你早已有听闻,在这里就不用多说了,现在我们还是来看看怎么用 Angular 做下个 SwitchButton 。 在做之前,我们先来看看效果图: 效果你都见得多了,下面我们来看看代码,首先我们先来看看这个 SwitchButton 的 .html switch-button.component.html <div class="switch-button" [ngStyle]="myStyle" [ngClass]="{'switch-button-close':trigger.status}" (click)="triggerFn(...

2018
01-21

Angular 实现树形菜单(多级菜单)功能模块

前言 本文要分享的是一个多级菜单效果,也就是传说中的树形结构菜单,理论上支持无限级菜单,当然数据结构要一定的要求,但这都不是什么难事,因为我们可以把数据组装成所需要的结构。下面这个例子虽然不是很完美好,但是估计也够用了。这个多级菜单是模仿 Angular 官方的左侧菜单效果来做的,效果的相似度应该达到 99%,本文内容有点多(主要是代码),因为我想把所有的代码都贴出来,尽量不让你幻想缺...

2018
01-18

Angular 2+ 新建项目时报错 cannot-find-module

今天突然来劲想再建个 Angular 项目练练手,谁知道报错了。 报错 E:\study>ng new navMenu create navMenu/e2e/app.e2e-spec.ts (290 bytes) create navMenu/e2e/app.po.ts (208 bytes) create navMenu/e2e/tsconfig.e2e.json (235 bytes) create navMenu/karma.conf.js (923 bytes) create navMenu/package.json (1320 bytes) create navMenu/protractor.conf.js (722 bytes) create navMenu/README.m...

2018
01-15

Angular 2+ 动画

前言 Angular 2+ 动画可以让你写出来的 Angular 2+ 代码显示效果不再那么地生硬,它可以让你在对元素切换时添加一些动画,这不仅仅是好看,因为它确确实实提升了用户体验,让用户感觉这个页面科技感满满的。 基本用法 入门示例 要想使用 Angular 2+ 中的动画效果,你必需做一些准备: 在app.module.ts 中引入 animations 模块 app.module.ts import { BrowserModule } from '@angular/platform-browse...

2018
01-15

Angular 2+ 管道

前言 Angular 2+ 管道的管道与AngularJS 中的管道作用一样,对一些数据处理,让它符合我们的预期展示效果。官方也为我们提示了不少的内置管道,我们可以直接在模板中使用它们。下面我们就来讲讲 Angular 2+ 中的管道。 Angular 2+ 内置管道 内置管道比 AngularJS 的要少,因为在Angular 2+中 去掉了一些管道。Angular 2+ 的内置管道包括但不限于: DatePipe:时间格式化 UpperCasePipe :大写 LowerCa...

2018
01-14

Angular 2+ 结构型指令

前言 结构型指令跟属性型指令很相似,但它们的实现原理有很大的不同,属性型指令一般都是为了更改元素的外观或行为比如:内置的NgStyle指令,而结构型指令更多的则是更改了 HTML 结构。 结构指令之旅 什么是结构型指令 结构型指令主要的作用是 HTML 布局,即增删元素。这个增删元素是彻底的,它不像样式中的 display:none 那样只是让你看不过,而是直接从 HTML 中移除了。这样可以使得 HTML 更精简。...

2018
01-14

Angular 2+ 属性型指令

前言 Angular 中的指令相信你已经已有听闻,或者早就已经在 AngularJS 中用得出神入化了,但到了 Angular 时代一切都已经成为了过去式,一切都得生来,虽然 指令的字义和作用基本没变,但写法已经大不相同了。本文我们就来看看 Angular 2+ 中的属性型指令。 首先我们得知道在 Anguglar 2+ 中什么才算是指令。 在 Angular 中有三种类型的指令: 组件 — 拥有模板的指令,三种指令中最常用的 结构型指令 — 通...

2018
01-11

Angular 2+ 动态组件

Angular 2+ 中的动态组件怎么用?这对于像我这样的初学者来说无疑是一个很大的挑战,特别是在看官方介绍文档和示例时,倍感压力。为此,本文用尽可能简单的例子来实现Angular 2+ 动态组件加载。 在实现动态组件之前,我们就要有心理准备,因为在这个简单的示例中涉及到了比较多的知识点,包括但不限于: ViewChild ViewContainerRef ComponentFactoryResolver AfterViewInit Directive ViewChild:属性装...

2018
01-09

Angular 2+ 组件样式

前言 angular 2+ 后样式的使用模式有了很大的改变,这可能给我们带来不少的好处,也符合 Angular 2+ 本身的初衷(模块化),第个模块都会有自己样式,互不影响。让我们在修改样式时,只需要关注当前模块就可以了。好了,下面我们开始组件的样式之旅。 组件样式之旅 给组件添加样式有很多种方法,大致跟我们平时引入样式的规则相同。下面我们就来看看组件引入样式的各种套路。 元数据中的样式 import ...

2018
01-08

Angular 2+ 组件间的数据交互

组件之间的交互 通过输入型绑定把数据从父组件传到子组件 这种数据交互比较简单,直接通过属性传入子组件,然后在子组件通过 @Input 来获取值,代码如下: parent.component.rs import { Component } from '@angular/core'; @Component({ selector: 'parent-component', template: `<child-component *ngFor="let site of parentSites" [site]="site"></child-component>` ...

2018
01-07

Angular 2+ 模板语法必备套路

模板中的HTML 几乎所有的HTML语法都是有效的模板语法。<script> 被禁止(被忽略),<html>、<body>和<base>元素用在模板中是没有意义的。 插值表达式 ( {{…}} ) 把计算后的字符串插入到 HTML 元素标签内的文本或对标签的属性进行赋值,可以调用宿主组件的方法,也可以作简单的数值运算,并把求值的结果转换成字符串。 <div> <h3>{{title}}</h3> //...

2018
01-07

Angular 2+ 执行 ng eject 后,我要回到过去

前言 ng eject 是什么?它的作用就是弹出 webpack.config 配置文件以及修改了 package.json 文件和 .angular-cli.json 文件里的一些默认配置。 在这里我们不关注 ng eject 的过多细节,因为本文要分享的是如何才能让我回到过去(ng eject 执行之前)。因为执行了 ng eject 命令后,之前的 ng 前端的命令行就没法使用了。所以你懂的…… 回顾 首先我们来看看 ng eject 命令执行后,我们再执行...

2018
01-07

Angular 2+ Object literal may only specify known properties, and ‘qq’ does not exist in type ‘Person’

这是一个很神奇的报错,因为你明明看懂了它报错的提示信息,但你就是偏偏没办法解决这个错误。这种也许就是别人口中常说的不解之迷吧!但这次,在这里,这个世界性难题已经知道并可以解决了。下面就是见证奇迹的时刻,擦亮眼睛,千万别走神了。 现在我们来看看几个关键的模块: person.ts export class Person { id: string; name: string; sex: string; age: string; phone: string; e...

2018
01-07

Angular 2+ ERROR TypeError: Cannot read property ‘name’ of undefined

Angular 2+ 给我们带来新鲜感的同步,也带来了前所未有的负作用,比如一些 AngularJS(Angular 1)中不会出现的报错。在 Angular 中却无情地出现了。正如本篇文章要分享的这个一样,在 AngularJS 中是的特定场景是不会出现 ERROR TypeError: Cannot read property ‘name’ of undefined 的,但在 Angular(Angular 2+) 中却出现了。 这种错误出现的情景:比如你要从服务器获取一个对象,然后在...

2018
01-06

Angular 2+ 入门级示例

这是一篇关于angular 2+ 的入门级示例。因为是入门级,所以在这里不会对很多概念性的东西作过多的介绍,而是通过一个接近实战的业务来对 Angular 2 进行介绍。这样才不会让人觉得假大空的印象。这个实战示例分为三个部分:列表页、详情页、编辑页。数据通过模拟服务器请来来返回一个 promise 对象。 首先们来先来看看这个实战例子的一个整体结构: 注意图片等静态资源要放到 assets 目录下。然后在.html ...

2018
01-05

Angular 4.x NgPlural 指令用法

基本用法 下面是官方给出的用法样例: 官方套路 <some-element [ngPlural]="value"> <ng-template ngPluralCase="=0">there is nothing</ng-template> <ng-template ngPluralCase="=1">there is one</ng-template> <ng-template ngPluralCase="few">there are a few</ng-template> </some-element> 示例 其实 NgPlural 的用法跟 NgSwitch...

2017
07-23

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