首先安裝node和npm，其次用cnpm代替npm（百度都是）就不多說了
安裝angular官方腳手架工具
cnpm -g i @angular/cli
其次利用腳手架創建項目，一路Y就行
ng new my-app
1.組件：
angular的核心就是組件
image.png
組件元數據裝飾器：
@Component({ /*@component 是component裝飾器，裝飾器里的屬性叫元數據selector,templateUrl,styleUrls*/
selector: 'app-root', /*這個組件可以用app-root這個html標簽調用<app-root></app-root>像這樣*/
templateUrl: './app.component.html',/*templateUrl制定html作為組件的模板*/
styleUrls: ['./app.component.css']/*templateUrl制定html作為組件的模板*/
})
export class AppComponent {
title = 'mydemo';
}
/*控制器是指被component裝飾器裝飾的typescript類*/
2. 模塊
app的模塊也是帶著裝飾器的typescript類
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [ /*declarations聲明模塊中有什么東西，只能聲明組件，指令，管道*/
AppComponent,
],
imports: [/*引入angular的自有模塊*/
BrowserModule,
AppRoutingModule
],
providers: [],/*只能聲明服務*/
bootstrap: [AppComponent]/*聲明了模塊的主組件是什么*/
})
export class AppModule { }
3. 引入第三方庫（jquery,bootstrap)
cnpm i jquery --save
cnpm i bootstrap --save
cnpm install @types/jquery --save
cnpm install @types/bootstrap --save
- 在 angular.json中配置如下
"styles": [
"src/styles.css",
"./node_modules/bootstrap/dist/css/bootstrap.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.js",
"./node_modules/bootstrap/dist/js/bootstrap.js"
]
