qrcode

马上订阅,开启修仙之旅

angular

Angular Library 快速入门

新建 Workspace123$ ng new sf-lib-app$ cd sf-lib-app$ ng serve 在介绍如何创建 Angular Library 之前,让我们来看一下 Angular 新的配置文件 —— angular.json。早期版本的 angular-cli.json 文件已经被替换为 angular.json 文件,文件的内容也发生了改变。这里我们关心的 pro...

Angular Provider 作用域

Services 是每个 Angular 应用程序的基本块之一。Service 是一个普通的 TypeScript 类,它也可以没有使用 @Injectable 装饰器。 比如下面是我们定义一个 UserService 类: 1export class UserService {} 定义完 UserService 类之后,我们可以在 NgModule 中注册它: 1234...

Angular 6.x 指令快速入门

目录 第一节 - 创建指令 第二节 - 定义输入属性 第三节 - 事件处理 第四节 - 获取宿主元素属性值 第五节 - 使用 <ng-template> 元素 第六节 - 使用 ngTemplateOutlet 指令 第七节 - 使用 ngComponentOutlet 指令 第八节 - 创建结构指令 第九节 - 微语法简介 阅读须知本系列教程的开发环境及开发语言: Angu...

Angular 自定义管道

本文将使用 UltimateAngular/angular-pro-src 中的示例,来一步步介绍自定义管道的相关知识。在该示例中,我们将定义一个 FileSizePipe 管道,它用于实现对文件大小进行格式化显示。 切回正题,我们先来看一下数据: 12345[ { name: 'logo.svg', size: 2120109, type: 'image/svg' &#125...

Angular 动态创建组件

本文我们将介绍在 Angular 中如何动态创建组件。 定义 AlertComponent 组件首先,我们先来定义一个 AlertComponent 组件: 123456789101112import { Component, EventEmitter, Input, Output } from '@angular/core';@Component({ sel...

Angular ng-template vs ng-container

通常情况下,当我们使用结构指令时,我们需要添加额外的标签来封装内容,如使用 *ngIf 指令: 12345678<section *ngIf="show"> <div> <h2>Div one</h2> </div> <div> <h2>Div two</h2> </div>&...

Angular 组件样式

ngClass通常情况下,要为某个元素添加指定样式,我们可以直接这样做: 1<button class="btn btn-primary">提交</button> 但某些时候我们需要根据不同的条件,为指定元素应用不同的样式。对于这种场景,我们可以使用属性绑定,如: 123<button class="btn" [class.btn-primary]="true"...

Angular 依赖注入简介

在介绍依赖注入的概念和作用前,我们先来看个例子。各位同学请睁大眼睛,我要开始 “闭门造车” 了。 一辆车内部构造很复杂,出于简单考虑,我们就只考虑三个部分:车身、车门和引擎。 现在我们来分别定义各个部分: 定义车身类 1export default class Body { } 定义车门类 1export default class Doors { &#...

Angular 自定义属性指令

本文将使用 UltimateAngular/angular-pro-src 中的示例,来一步步介绍自定义属性指令的相关知识。在正式开发前,我们可以先看一下,最终效果 Stackblitz - Custom-Attribute-Directive。 该示例中定义了两个自定义指令: CreditCardDirective —— 信用卡指令,用于对输入的 16 位信用卡号码,格式化显示(每 4 ...

Angular 6.x 快速入门

目录 第一节 - Angular 环境搭建 第二节 - 插值表达式 第三节 - 自定义组件 第四节 - 常用指令简介 第五节 - 事件绑定 第六节 - 表单模块简介 第七节 - Http 模块简介 第八节 - 注入服务 第九节 - 路由模块简介 第一节 - Angular 环境搭建基础要求 Node.js Git Angular 开发环境 安装 Angular CLI (可选) 1$ ...