Angular CLI

1. 安装

npm install -g @angular/cli
ng --version
1
2

2. 详解 Component

> ng generate component demo
CREATE src/app/demo/demo.component.html (19 bytes)
CREATE src/app/demo/demo.component.spec.ts (614 bytes)
CREATE src/app/demo/demo.component.ts (261 bytes)
CREATE src/app/demo/demo.component.css (0 bytes)
UPDATE src/app/app.module.ts (467 bytes)
1
2
3
4
5
6
  • 执行结果

    • app/ 目录下创建新目录 demo/,并在其中创建相应的初始的 html, css, ts 文件
    • app/app.module.ts 中导入并声明此新创建的 Component。
  • 需要手动在 app/app.component.html 中,添加本 component 的 selecter,如:

<app-demo></app-demo>
1

3. 详解 Service

> ng generate service request
CREATE src/app/request.service.spec.ts (338 bytes)
CREATE src/app/request.service.ts (136 bytes)
1
2
3
  • 执行效果:

    • src/ 目录下创建 service.ts 文件。
  • 使用:

    • 在总 app.module.ts 中注册 Service
    // src/app.module.ts
    
    ... ...
    import { RequestService } from './request.service';
    ... ...
    
    @NgModule({
    declarations: [
        ......
    ],
    imports: [
        ......
    ],
    providers: [
        RequestService
    ]
    ......
    })
    export class AppModule { }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    • Component 中注入 Service
    // src/app/demo/demo.component.ts
    
    ......
    export class DemoComponent implements OnInit {
    
        constructor(private request: RequestService) { }
    
        ngOnInit() {
            this.request.getTest().subscribe(
                result => {console.log(result); this.t = result;}
            )
        };
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

4. 详解 Class

# 生成一个 User 类到目录 _model/ 内
> ng generate class _model/User
CREATE src/app/_model/user.spec.ts (146 bytes)
CREATE src/app/_model/user.ts (22 bytes)
1
2
3
4

5. 响应式表单

(1). 注册 ReactiveFormsModule

// src/app/app.module.ts

//...
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  //...
  imports: [
    //...
    ReactiveFormsModule,
    //...
  ],
  //...
})
export class AppModule { }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

(2). 使用 FormBuilder 创建 Form

//...
import { FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.sass']
})
export class RegisterComponent implements OnInit {
  constructor(private fb: FormBuilder) { }

  private registerForm = this.fb.group({
      username: '',
      password: '',
      email: '',
      website: ''
    });

  onSubmit(data){
    console.log("do submit: " + data.username + "," + data.email + "," + data.website + "," + data.password);
    this.registerForm.reset();
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

(3). 实现 HTML 页面

<form [formGroup]="registerForm" (ngSubmit)="onSubmit(registerForm.value)">
    <div><label>username:</label><input type="text" formControlName="username" /></div>
    <div><label>password:</label><input type="password" formControlName="password" /></div>
    <div><label>email:</label><input type="email" formControlName="email" /></div>
    <div><label>website:</label><input type="url" formControlName="website" /></div>

    <button class="button" type="submit">Submit</button>
</form>
1
2
3
4
5
6
7
8
最近更新: 8/19/2019, 10:52:28 PM