后台模板

转载自 http://www.ngui.cc/news/show-110.html安装 Angular CLI (可选)安装 Angular CLI (可选)$ npm install -g @angular/cli检测 Angular CLI 是否安装成功$ ng --version使用 Angular CLI新建项目$ ng 

转载自 http://www.ngui.cc/news/show-31.htmlAngular 是什么Angular 是由谷歌开发与维护一个开发跨平台应用程序的框架，同时适用于手机与桌面。Angular 有什么特点基于 Angular 我们可以构建适用于所有平台的应用。比如：Web 应用、移动 Web 应用、移动应用和桌面应用等。通过 Web Worker和服务

转载自 http://www.ngui.cc/news/show-137.html指令的功能该指令实现 ngIf 指令相反的效果，当指令的输入条件为 Falsy 值时，显示DOM元素。指令的实现import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'; @Di

转载 自  http://www.ngui.cc/news/show-136.htmlngTemplateOutlet 的作用该指令用于基于已有的 TemplateRef 对象，插入对应的内嵌视图。在应用 NgTemplateOutlet 指令时，我们可以通过 [ngTemplateOutletContext] 属性来设置 EmbeddedViewRef 的上下文对象。绑定的上下文

转载自 http://www.ngui.cc/news/show-131.html在 Angular 中，我们可以通过 ViewChild 装饰器来获取视图中定义的模板元素，然后利用 ViewContainerRef 对象的 createEmbeddedView() 方法，创建内嵌视图。import { Component, TemplateRef, ViewConta

转载自 http://www.ngui.cc/news/show-130.html在 Angular 中，我们可以通过 Attribute 装饰器来获取指令宿主元素的属性值。指令的作用该指令用于演示如何利用 Attribute 装饰器，获取指令宿主元素上的自定义属性 author 的值。指令的实现import { Directive, HostBinding,

转载自 http://www.ngui.cc/news/show-128.html在 Angular 中，我们可以使用 HostListener 属性装饰器，实现元素的事件绑定。指令的作用该指令用于演示如何利用 HostListener 装饰器，监听用户的点击事件。指令的实现import { Directive, HostBinding, HostL

转载自 http://www.ngui.cc/news/show-127.html为了能够让用户自定义 GreetDirective 指令的问候内容，我们需要使用 Input 装饰器去定义指令的输入属性。指令的作用该指令用于演示如何利用 Input 装饰器，定义指令的输入属性，从而实现让用户自定义问候内容。指令的实现import { Directive, Hos

转载自 http://www.ngui.cc/news/show-126.html在 Angular 中，我们可以使用 HostBinding 装饰器，实现元素的属性绑定。指令的作用该指令用于演示如何利用 HostBinding 装饰器，设置元素的 innerText 属性。指令的实现import { Directive, HostBinding}

转载自 http://www.ngui.cc/news/show-146.html如何添加多选控件？在 Angular 中，我们通过  方式添加多选控件。import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` Angu

如何添加单选控件？在 Angular 中，我们通过  方式添加单选控件。import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` Angular版本： <input [attr.id]

转载自 http://www.ngui.cc/news/show-144.html表单控件除了 valid 状态外，还包含哪些状态？在 Angular 中表单控件有以下 6 种状态，我们可以通过 #userName="ngModel" 方式获取 ngModel 对象，进而获取控件的状态信息。具体状态如下：valid - 表单控件有效invalid - 表

转载自 http://www.ngui.cc/news/show-143.html如何为表单添加验证状态样式信息？在 Angular 表单中，若验证通过则会在表单控件上添加 ng-valid 类，若验证失败则会在表单控件上添加 ng-invalid 类。import { Component } from '@angular/core'; @Compo

转载自  http://www.ngui.cc/news/show-142.htmlngModelGroup 有什么作用？ngModelGroup 指令是 Angular 表单中提供的另一特殊指令，可以对表单输入内容进行分组，方便我们在语义上区分不同性质的输入。例如联系人的信息包括姓名及住址，现在需对姓名和住址进行精细化信息收集，姓名可精细化成姓和名字，地址可精细化成城市、区、街等

转载自  http://www.ngui.cc/news/show-141.html如何使用表单？在 Angular 中，我们可以使用熟悉的  标签来创建表单。import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <input

转载自 http://www.ngui.cc/news/show-140.html如何显示验证失败的错误信息？在 Angular 中，我们可以通过 #userName="ngModel" 方式获取 ngModel 对象，然后通过该对象的 errors 属性，来获取对应验证规则 (如 required, minlength 等) 的验证状态。import { Comp

转载自 http://www.ngui.cc/news/show-139.html如何为表单控件添加验证功能？目前 Angular 支持的内建 validators 如下：required - 设置表单控件值是非空的email - 设置表单控件值的格式是 emailminlength - 设置表单控件值的最小长度maxlength

转载自  http://www.ngui.cc/news/show-30.html基础要求Node.jsGitAngular 开发环境配置方式基于 Angular Quickstarthttps://github.com/angular/quickstart基于 Angular CLIn

转载自 http://www.ngui.cc/news/show-102.html在 Angular 中，我们可以使用 {{}} 插值语法实现数据绑定。绑定普通文本import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `Hello {{name}}`,

转载自 http://www.ngui.cc/news/show-111.html新建组件$ ng generate component simple-form --inline-template --inline-style # Or $ ng g c simple-form -it -is # 表示新建组件，该组件使用内联模板和内联样式在命令行窗口运行以上命令后，将

转载自 http://www.ngui.cc/news/show-112.html在 Angular 中，我们可以使用 (eventName) 语法，进行事件绑定。此外，可以使用 #variableName 的语法，定义模板引用。具体示例如下：SimpleFormComponentimport {Component, OnInit} from '@angular/core';

转载自 http://www.ngui.cc/news/show-113.html获取鼠标事件在第三节的示例中，假如我们需要获取鼠标事件，那应该怎么办呢？这时，我们可以引入 $event 变量，具体如下：import {Component, OnInit} from '@angular/core'; @Component({ selector: 'app-simple-

转载自 http://www.ngui.cc/news/show-114.html新建服务$ ng g s mail在命令行窗口运行以上命令后，将输出以下内容：installing service create src/app/mail.service.spec.ts create src/app/mail.service.ts WARNING Service is

转载自 http://www.ngui.cc/news/show-115.html在 Angular 中我们可以使用 ngFor 指令来显示数组中每一项的信息。使用 ngFor 指令更新 MailService 服务import { Injectable } from '@angular/core'; @Injectable() export class Mai

转载自 http://www.ngui.cc/news/show-116.html为了让我们能够开发更灵活的组件，Angular 为我们提供了 Input 装饰器，用于定义组件的输入属性。使用 Input 装饰器更新 SimpleFormComponent 组件import {Component, OnInit,Input} from '@angular/core';

转载自  http://www.ngui.cc/news/show-117.html使用过 AngularJS 1.x 的同学，应该很熟悉 ng-model 指令，通过该指令我们可能方便地实现数据的双向绑定。而在 Angular 中，我们是通过 ngModel 指令，来实现双向绑定。使用双向绑定引入 FormsModuleimport {FormsModule} fro

转载自  http://www.ngui.cc/news/show-118.htmlOutput 装饰器的作用是用来实现子组件将信息，通过事件的形式通知到父级组件。在介绍 Output 属性装饰器前，我们先来介绍一下 EventEmitter 这个幕后英雄：let numberEmitter: EventEmitternumber> = new EventEmitternumb

在 Angular 中，我们可以在设置组件元数据时通过 styles 或 styleUrls 属性，来设置组件的内联样式和外联样式。使用 styles 属性import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core'; @Component({ selector: 'app-simple

转载自  http://www.ngui.cc/news/show-109.html基础知识导入路由模块// ... import { RouterModule } from '@angular/router'; @NgModule({ imports: [BrowserModule, FormsModule, HttpModule, RouterModule],

转载自  http://www.ngui.cc/news/show-108.html基础知识组件中注入服务步骤(1) 配置已创建的服务，如：@NgModule({ // ... providers: [MemberService]}) export class AppModule { }(2) 导入已创建的服务，如：import { Membe

转载自 http://www.ngui.cc/news/show-107.htmlAngular 4.3 版本后，推荐使用 HttpClient，可以参考 Angular HTTP Client 快速入门   // 此处需修改基础知识导入 Http 模块// ... import { HttpModule } from '@angular/http'; @

转载自  http://www.ngui.cc/news/show-106.htmlAngular 中有两种表单：Template Driven Forms - 模板驱动式表单 (类似于 AngularJS 1.x 中的表单 )Reactive Forms - 响应式表单本小节主要介绍模板驱动式的表单，接下来我们来演示如何通过表单来为我们的之前创建的

转载自 http://www.ngui.cc/news/show-105.html在 Angular 中，我们可以通过 (eventName) 的语法，实现事件绑定。基础知识事件绑定语法date-picker (dateChanged)="statement()">date-picker>等价于date-picker on-dateChanged="stat

转载自 http://www.ngui.cc/news/show-104.html在 Angular 实际项目中，最常用的指令是 ngIf 和 ngFor 指令。基础知识ngIf 指令简介该指令用于根据表达式的值，动态控制模板内容的显示与隐藏。它与 AngularJS 1.x 中的 ng-if 指令的功能是等价的。ngIf 指令语法"condition"

自定义组件 http://www.ngui.cc/news/show-103.html在 Angular 中，我们可以通过 Component 装饰器和自定义组件类来创建自定义组件。基础知识定义组件的元信息在 Angular 中，我们可以使用 Component 装饰器来定义组件的元信息：@Component({ selector: 'my-app', //

转载自 http://www.ngui.cc/news/show-138.htmlAngular Forms 简介Angular 4 中有两种表单：Template Driven Forms - 模板驱动式表单 (类似于 AngularJS 1.x 中的表单 )Reactive Forms - 响应式表单本文主要介绍 Template Dri