Angular Cli

1. 创建 component

  • 命令

    $ ng generate component register
    CREATE src/app/register/register.component.css (0 bytes)
    CREATE src/app/register/register.component.html (27 bytes)
    CREATE src/app/register/register.component.spec.ts (642 bytes)
    CREATE src/app/register/register.component.ts (277 bytes)
    UPDATE src/app/app.module.ts (913 bytes)
    
    1
    2
    3
    4
    5
    6
  • 效果

    • 在 app 目录下创建新目录 register, 并在内部创建相应的 HTML, CSS, TS 文件
    • 将新的组件添加到 app.module.ts@NgModule({declarations[]... 中。
  • 总结

    • 一个 component 是一个组件,包含一个完整的带页面的小功能。
    • component 之间组合、导航形成一个系统。

2. 创建 service

  • 命令

    $ ng generate service authentication
    CREATE src/app/authentication.service.spec.ts (373 bytes)
    CREATE src/app/authentication.service.ts (143 bytes)
    
    1
    2
    3
  • 效果

    • 只在 app 根目录生成 Service 文件。
    • 用户的读、存等操作,应当由 Service 操作。
  • 使用

    • 需要在 app.module.ts 中添加:
    providers: [
        UserService
    ],
    
    1
    2
    3
    • 注入到 component 中
    constructor(private userService: UserService) { }
    
    1

3. 创建 class

$ ng generate class User
1

4. 创建 guard

$ ng generate guard auth
1

5. 创建 HTTP interceptor

$ ng generate class jwt-interceptor
CREATE src/app/jwt-interceptor.ts (32 bytes)
1
2

创建后,在 app.module.ts 中添加:

providers: [
{provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true}
],
1
2
3
最近更新: 10/9/2018, 10:42:31 PM