Angular 基础知识

1. 初始化项目

> ng new app-ui
> cd app-ui
> ng serve --open
1
2
3

2. 目录结构

# 根页面, 一般只包含 <app-root></app-root> 模块
src/index.html

# 程序入口
src/main.ts

# 根模块
# Root Component (<app-root></app-root>) 是所有组件的入口
src/app/app.module.ts
src/app/app.component.ts
src/app/app.component.html
src/app/app.component.css

# 其他模块,放到 app 子目录里。如 login 模块:
src/app/login/login.component.ts
src/app/login/login.component.html
src/app/login/login.component.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

3. 详解 HTTP

(1). 添加 HTTP 支持

  • src/app.module.ts 中导入 HttpClientModule,并添加到 @NgModle...imports 列表中。
// src/app.module.ts
... ...
import { HttpClientModule }    from '@angular/common/http';
... ...

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

(2). 在 Component 中使用 HttpClient

  • 导入 HttpHeaders 中定义 headers 属性
......
import { HttpClient, HttpHeaders } from '@angular/common/http';
......

const httpOptions = { headers: new HttpHeaders({
  'Content-Type': 'application/json'
}) };

......
export class DemoComponent implements OnInit {
  ......
  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.http.get("http://127.0.0.1:8188/", httpOptions).subscribe(
      response => {
        console.log(response);
      }
    )
  };
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

(3). 在 Service 中使用 HttpClient

  • 与上一步类似。

  • 一般建议放在 Service 中使用 HttpClient,然后将 Service 注入到 Component 中调用。

4. 路由

(1). 配置路由模块

app.module.ts 中导入相关模块,并配置路由数据

//----- src/app/app.module.ts  -------//
//.....
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {path: 'register', component: RegisterComponent}
]
@NgModule({
  //......
  imports: [
    RouterModule.forRoot(
      routes,
      {enableTracing: true}
    ),
    //......
  ],
  //......
})
export class AppModule { }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- src/app/app.component.html -->
<a routerLink="/register" routerLinkActive="active">Register</a>
1
2

5. 使用 Material Design

# 在项目根目录,执行:
> ng add angular-bootstrap-md

# 可能报错,缺少 npm-registry-client,安装如下:
> npm install npm-registry-client
1
2
3
4
5
最近更新: 8/11/2019, 11:08:36 PM