Angular_01_프로젝트 생 성

설치 도구

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 (alias ng serve -o )

상용 명령 --dry-run (alias: -d): 변경 없 이 실행 합 니 다. --style less: 스타일 파일 에 사용 할 파일 확장 명 입 니 다. --routing: 경로 파일 추가

app.module.ts

@NgModule({
  declarations: [
    //           
    AppComponent
  ],
  imports: [
    //         
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Angular Material https://material.angular.io/guide/getting-started

패키지 설치 npm: npm install --save @angular/material @angular/cdk @angular/animations (package. json 에 저장 해 야 합 니 다) yarn: yarn add @angular/material @angular/cdk @angular/animations

import modules import {MatButtonModule, MatCheckboxModule} from '@angular/material'; import {MatButtonModule, MatCheckboxModule} from '@angular/material';

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(options =>
            {
                options.Filters.Add(new CorsAuthorizationFilterFactory("AllowAngularDevOrigin"));
...
app.UseCors("AllowAngularDevOrigin");