Angular4基础知识培训之快速入门

Angular4基础知识培训之快速入门目录∙第一节- Angular 简介∙第二节- Angular 环境搭建∙第三节- 插值表达式∙第四节- 自定义组件∙第五节- 常用指令简介∙第六节- 事件绑定∙第七节- 表单模块简介∙第八节- Http 模块简介∙第九节- 注入服务∙第十节- 路由模块简介第一节Angular 简介Angular 是什么Angular是由谷歌开发与维护一个开发跨平台应用程序的框架，同时适用于手机与桌面。

Angular 有什么特点∙基于Angular 我们可以构建适用于所有平台的应用。

比如：Web 应用、移动Web 应用、移动应用和桌面应用等。

∙通过Web Worker和服务端渲染(SSR)，达到在如今Web平台上所能达到的最高渲染速度。

∙Angular 让你能够有效掌控可伸缩性。

基于RxJS、Immutable.js 和其它推送模型，能适应海量数据需求。

Angular 提供了哪些功能∙动态HTML∙强大的表单系统(模板驱动和模型驱动)∙强大的视图引擎∙事件处理∙快速的页面渲染∙灵活的路由∙HTTP 服务∙视图封装∙AOT、Tree ShakingAngular 与AngularJS 有什么区别∙不再有Controller和Scope∙更好的组件化及代码复用∙更好的移动端支持∙引入了RxJS与Observable∙引入了Zone.js，提供更加智能的变化检测第二节- Angular 环境搭建基础要求∙Node.js∙GitAngular 开发环境配置方式∙基于Angular Quickstarto https:///angular/quickstart∙基于Angular CLIo npm install -g @angular/cli配置开发环境我们选用第一种配置方式搭建Angular 开发环境：基于Angular Quickstart∙使用Git克隆quickstart 项目git clone https:///angular/quickstart ng4-quickstart ∙使用IDE打开已新建的项目code ./ng4-quickstart∙安装项目所需依赖npm i∙验证环境是否搭建成功npm start基于Angular CLI∙安装Angular CLI (可选)npm install -g @angular/cli∙检测Angular CLI 是否安装成功ng --version∙创建新的项目ng new PROJECT-NAME∙启动本地服务器cd PROJECT-NAME ng serve第三节- 插值表达式在Angular 中，我们可以使用{{}}插值语法实现数据绑定。

绑定普通文本import { Component } from'@angular/core'; @Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>`, }) export classAppComponent { name = 'Angular'; }绑定对象属性import { Component } from'@angular/core'; @Component({ selector: 'my-app', template: ` <h2>大家好，我是{{name}}</h2> <p>我来自<strong>{{address.province}}</strong>省,<strong>{{address.city}}</strong>市 </p> `, }) export class AppComponent { name = 'Semlinker'; address = { province: '福建', city: '厦门' } }值得一提的是，我们可以使用Angular 内置的json管道，来显示对象信息：@Component({ selector: 'my-app', template: ` ... <p>{{address | json}}</p> `, }) export class AppComponent { name = 'Semlinker'; address = { province:'福建', city: '厦门' } }第四节- 自定义组件在Angular 中，我们可以通过Component装饰器和自定义组件类来创建自定义组件。

基础知识定义组件的元信息在Angular 中，我们可以使用Component装饰器来定义组件的元信息：@Component({ selector: 'my-app', // 用于定义组件在HTML代码中匹配的标签template: `<h1>Hello {{name}}</h1>`, // 定义组件内嵌视图 })定义组件类export class AppComponent { name = 'Angular'; }定义数据接口在TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述。

interface Person { name: string; age: number; } let semlinker: Person = { name: 'semlinker', age: 31 };自定义组件示例创建UserComponent 组件import { Component } from'@angular/core'; @Component({ selector:'sl-user', template: ` <h2>大家好，我是{{name}}</h2> <p>我来自<strong>{{address.province}}</strong>省,<strong>{{address.city}}</strong>市 </p> `}) export class UserComponent { name = 'Semlinker'; address = { province: '福建', city: '厦门' }; }声明UserComponent 组件// ...import { UserComponent } from'./ponent';@NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent, UserComponent], bootstrap: [ AppComponent ] }) export class AppModule { }使用UserComponent 组件import { Component } from'@angular/core'; @Component({ selector:'my-app', template: ` <sl-user></sl-user> `, }) export class AppComponent {}使用构造函数初始化数据@Component({...}) export class UserComponent { name: string; address: any; constructor() { = 'Semlinker'; this.address = { province: '福建', city: '厦门' } } }接口使用示例定义Address 接口interface Address { province: string; city: string; }使用Address 接口export class UserComponent { name: string; address: Address; // ... }第五节- 常用指令简介在Angular 实际项目中，最常用的指令是ngIf和ngFor指令。

基础知识ngIf 指令简介该指令用于根据表达式的值，动态控制模板内容的显示与隐藏。

它与AngularJS 1.x 中的ng-if指令的功能是等价的。

ngIf 指令语法<div *ngIf="condition">...</div>ngFor 指令简介该指令用于基于可迭代对象中的每一项创建相应的模板。

它与AngularJS 1.x 中的ng-repeat指令的功能是等价的。

ngFor 指令语法<li *ngFor="let item of items;">...</li>ngIf 与ngFor 指令使用示例import{ Component } from'@angular/core'; interface Address { province: string; city: string; } @Component({ selector: 'sl-user', template: ` <h2>大家好，我是{{name}}</h2> <p>我来自<strong>{{address.province}}</strong>省, <strong>{{address.city}}</strong>市 </p> <div *ngIf="showSkills"> <h3>我的技能</h3> <ul> <li *ngFor="let skill of skills"> {{skill}} </li></ul> </div> ` }) export class UserComponent { name: string; address: Address; showSkills: boolean; skills: string[]; constructor() { = 'Semlinker'; this.address = { province: '福建', city: '厦门' };this.showSkills = true; this.skills = ['AngularJS 1.x', 'Angular 2.x', 'Angular 4.x']; } }第六节- 事件绑定在Angular 中，我们可以通过(eventName)的语法，实现事件绑定。