安裝工具

• Nodejs, npm 最新版, https://nodejs.org/en/
• Angular CLI, npm install -g @angular/cli

Angular CLI

https://github.com/angular/angular-cli
https://cli.angular.io/

項目建立

ng new blog-client
cd my-app
ng serve –open (aliasng serve -o)

• 常用命令
  --dry-run (alias: -d) : Run through without making any changes.
  --style less : The file extension to be used for style files.
  --routing : add route file
• app.module.ts

@NgModule({
  declarations: [
    //在此聲明該模塊下的組件
    AppComponent
  ],
  imports: [
    // 在此引入外部模塊
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

• Angular Material
  https://material.angular.io/guide/getting-started
  1. 安裝包
     npm: npm install --save @angular/material @angular/cdk @angular/animations
     (必須加--save 才會保存到package.json中)
     yarn: yarn add @angular/material @angular/cdk @angular/animations
  2. import modules
     import {MatButtonModule, MatCheckboxModule} from '@angular/material';
import {MatButtonModule, MatCheckboxModule} from '@angular/material';
  3. include a theme
     style.less: @import "~@angular/material/prebuilt-themes/indigo-pink.css";
• blog Module
  ng g m blog --routing --spec false
  • 在angular.json中配置模板

"schematics": {
        "@schematics/angular:component": {
          "styleext": "less",
          "spec": false
        },
        "@schematics/angular:moudle": {
          "spec": false
        }
      },

• blog component

*API startup跨域配置

 //配置跨域
 services.AddCors(options =>
            {
                options.AddPolicy("AllowAngularDevOrigin",
                    builder => builder.WithOrigins("http://localhost:4200")
                    .WithExposedHeaders("X-Pagination")
                    .AllowAnyHeader()
                    .AllowAnyMethod());
            });
 services.Configure<MvcOptions>(options =>
            {
                options.Filters.Add(new CorsAuthorizationFilterFactory("AllowAngularDevOrigin"));
...
app.UseCors("AllowAngularDevOrigin");