首先安裝node和npm抓督,其次用cnpm代替npm(百度都是)就不多說(shuō)了
安裝angular官方腳手架工具
cnpm -g i @angular/cli
其次利用腳手架創(chuàng)建項(xiàng)目,一路Y就行
ng new my-app
1.組件:
angular的核心就是組件
image.png
組件元數(shù)據(jù)裝飾器:
@Component({ /*@component 是component裝飾器束亏,裝飾器里的屬性叫元數(shù)據(jù)selector,templateUrl,styleUrls*/
selector: 'app-root', /*這個(gè)組件可以用app-root這個(gè)html標(biāo)簽調(diào)用<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: [],/*只能聲明服務(wù)*/
bootstrap: [AppComponent]/*聲明了模塊的主組件是什么*/
})
export class AppModule { }
3. 引入第三方庫(kù)(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"
]