安裝工具
- 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/
項(xiàng)目建立
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- 安裝包
npm:npm install --save @angular/material @angular/cdk @angular/animations
(必須加--save 才會(huì)保存到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<MvcOptions>(options =>
{
options.Filters.Add(new CorsAuthorizationFilterFactory("AllowAngularDevOrigin"));
...
app.UseCors("AllowAngularDevOrigin");
