安裝angular/cli

npm install -g @angular/cli

查看安裝版本

ng v

angular/cli

創(chuàng)建新項(xiàng)目

ng new my-angular-app

等待幾分鐘創(chuàng)建工程

工程生成的目錄

創(chuàng)建工程

創(chuàng)建新的proxy.config.json配置代理

proxy.config.json

{
    "/api": {
       "target": "http://localhost:3000"
    }
 }

跳轉(zhuǎn)到工程目錄，啟動(dòng)

cd my-angular-app
ng serve -o //啟動(dòng)后打開(kāi)窗口

啟動(dòng)成功

頁(yè)面

然后嘗試寫(xiě)自己的組件
先安裝一個(gè)UI組件（此處選用ngx-bootstrap）

npm install ngx-bootstrap --save

安裝bootstrap

npm install bootstrap --save

在angular.json中配置css樣式

"styles": [
       "node_modules/bootstrap/dist/css/bootstrap.min.css",
        "src/styles.css"
 ],

在app.component.ts中設(shè)置主題

import { Component } from '@angular/core';
import { setTheme } from 'ngx-bootstrap/utils';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-angular-app';
  constructor() {
    setTheme('bs3') //或者bs4;
  }
}

創(chuàng)建accordion.component.html

<accordion>
    <accordion-group heading="Tab 1">
      Tab 1 details.
    </accordion-group>
    <accordion-group heading="Tab 2">
      <p>Tab 2 details.</p>
    </accordion-group>
    <accordion-group heading="Tab 3">
      <p>Tab 3 details.</p>
    </accordion-group>
    <accordion-group heading="Tab 4">
      <p>Tab 4 details.</p>
    </accordion-group>
  </accordion>

創(chuàng)建accordion.component.ts

import { Component } from '@angular/core';
 
@Component({
  selector: 'demo-accordion-basic',
  templateUrl: './accordion.component.html'
})
export class AccordionBasicComponent {}

在app.modules.ts中引入AccordionModule和AccordionBasicComponent

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { AccordionModule } from 'ngx-bootstrap/accordion';
import { AccordionBasicComponent } from "./accordion.component";

@NgModule({
  declarations: [
    AppComponent,
    AccordionBasicComponent
  ],
  imports: [
    AccordionModule.forRoot(),
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在app.component.html中創(chuàng)建標(biāo)簽

<demo-accordion-basic></demo-accordion-basic>

頁(yè)面輸出

accordion