Angular基本操作

Angular基本操作

本文章为笔者学习整理所用

基本操作

安装 angular CLI：npm install -g @angular/cli
创建一个工作空间：ng new [名字]
启动开发服务器：ng serve --open --open是打开网页
新建一个组件：ng generate component heroes

@Component 是个装饰器函数，用于为该组件指定 Angular 所需的元数据。

selector— 组件的选择器（CSS 元素选择器）

templateUrl— 组件模板文件的位置。

styleUrls— 组件私有 CSS 样式表文件的位置。

{{hero.name | uppercase}}
绑定表达式中的 uppercase 位于管道操作符（ | ）的右边，用来调用内置管道 UppercasePipe。

双向绑定 [(ngModel)]=“hero.name”
它属于一个可选模块 FormsModule，你必须自行添加此模块才能使用该指令。

循环 *ngFor=“let hero of heroes”

click事件 (click)=“onSelect(hero)” 对应ts文件中onSelect()方法

if判断 *ngIf=“selectedHero”

把本类中selected赋值到标识为app-hero-detail的hero中
<app-hero-detail [hero]=“selectedHero”>
hero 属性必须是一个带有 @Input() 装饰器的输入属性

import { Component, OnInit, Input } from ‘@angular/core’;
@Input() hero: Hero;

创建一个服务 ng generate service hero

@Injectable() 装饰器会接受该服务的元数据对象，就像 @Component() 对组件类的作用一样。
添加 AppRoutingModule
ng generate module app-routing --flat --module=app

–flat 把这个文件放进了 src/app 中，而不是单独的目录中。
–module=app 告诉 CLI 把它注册到 AppModule 的 imports 数组中。

添加模块

1.创建一个组件(component)

进入到相应的目录下，使用命令 [ng generate component 组件名称 --skip-import]

2.创建一个模块(module)

进入到相应的目录下，使用命令 [ng generate module 模块名称]

3.创建当前模块的路由

进入到相应的目录下，使用命令 [ng generate module 模块名称 --float --module=组件名称]

4.创建一个服务(service)

进入到相应的目录下，使用命令 [ng gererate service 组件名称]

5.添加路由，在页面上添加路由路径routerLink=“path”

6.在app.module.ts中imports中导入添加的module[模块名称]

7.在[组件名称].module.ts中的declarations添加子组件和父组件[component]，在providers中添加服务[service]

8.添加form表单，在父组件中导入ReactiveFormsModule,FormsModule两个模块，用[formGroup]=“自定义名称”

在相应的component中添加对象，类型为FormGroup,通过FormBuild控制表单元素，在页面中通过(ngSubmit)=“自定义方法”，最后发起请求