Angular環境搭建及簡單體驗

一、安裝開發環境

npm install -g typescript

npm install -g @angular/cli

二、建立hello-world專案

建立專案

ng new angular2-hello-world

檢視新建專案的目錄結構

cd angular2-hello-world

sudo apt install tree

tree -F -L 1

.

├── angular.json

├── karma.conf.js

├── node_modules/

├── package.json

├── package-lock.json

├── README.md

├── src/

├── tsconfig.app.json

├── tsconfig.json

└── tsconfig.spec.json

2 directories, 8 files

檢視src目錄裡的結構

cd src

tree -F

啟動應用,可以在http://localhost:4200檢視執行結果

ng serve

建立hello-world元件

ng-generate component hello-world

在hello-world.component.ts中定義新的元件

//匯入依賴

import { Component, OnInit } from '@angular/core';

//通過註解宣告控制元件的選擇器和相關的檔案url

@Component({

  selector: 'app-hello-world',

  templateUrl: './hello-world.component.html',

  styleUrls: ['./hello-world.component.css']

})

//元件的資料模型

export class HelloWorldComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {

  }

}

在hello-world.component.html中定義模板

<p>mango, hello-world works!</p>

為了使用新增加的元件，我們把標籤新增到app.component.html中。

<h1>

  <app-hello-world></app-hello-world>

</h1>

執行 ng serve檢視執行效果

三、建立展示使用者的user-item指令

生成指令元件

mango@mango:~/angular2-hello-world$ ng generate component user-item

CREATE src/app/user-item/user-item.component.css (0 bytes)

CREATE src/app/user-item/user-item.component.html (24 bytes)

CREATE src/app/user-item/user-item.component.spec.ts (641 bytes)

CREATE src/app/user-item/user-item.component.ts (286 bytes)

UPDATE src/app/app.module.ts (585 bytes)

為元件宣告並初始化一個name欄位

import { Component, OnInit } from '@angular/core';

@Component({

  selector: 'app-user-item',

  templateUrl: './user-item.component.html',

  styleUrls: ['./user-item.component.css']

})

export class UserItemComponent implements OnInit {

  name: string,

  constructor() {

    this.name = 'mango';

  }

  ngOnInit(): void {

  }

}

在模板中顯示變數name的值

<p>

    {{name}} welcome  into Angular world.

</p>

將app-user-item新增到app.component.html中，檢視瀏覽器執行結果。

四、建立使用者列表user-list指令

建立新元件

mango@mango:~/angular2-hello-world$ ng generate component user-list

CREATE src/app/user-list/user-list.component.css (0 bytes)

CREATE src/app/user-list/user-list.component.html (24 bytes)

CREATE src/app/user-list/user-list.component.spec.ts (641 bytes)

CREATE src/app/user-list/user-list.component.ts (286 bytes)

UPDATE src/app/app.module.ts (677 bytes)

在元件中宣告並初始化names陣列

import { Component, OnInit } from '@angular/core';

@Component({

  selector: 'app-user-list',

  templateUrl: './user-list.component.html',

  styleUrls: ['./user-list.component.css']

})

export class UserListComponent implements OnInit {

  names: string[];

  constructor() {

    this.names = ['mango', 'pear', 'grap', 'apple'];

  }

  ngOnInit(): void {

  }

}

在元件的模板中遞迴遍歷names陣列

<ul>

    <li *ngFor="let name of names">Hello {{name}}</li>

</ul>

將元件新增app.component.html中，檢視瀏覽器執行結果。

五、組合使用user-item和user-list

修改user-item的name引數使用外部輸入

import { Component, OnInit, Input } from '@angular/core';

@Component({

  selector: 'app-user-item',

  templateUrl: './user-item.component.html',

  styleUrls: ['./user-item.component.css']

})

export class UserItemComponent implements OnInit {

  @Input()

  name!: string;

  constructor() { 

  }

  ngOnInit(): void {

  }

}

修改user-list的模板

<ul>

    <app-user-item *ngFor="let name of names" [name]="name"></app-user-item>

</ul>

儲存檢視瀏覽器執行情況。

六、啟動過程分析

ng會首先從angular.json中查詢程式的main入口為src/main.ts

{

            "outputPath": "dist/angular2-hello-world",

            "index": "src/index.html",

            "main": "src/main.ts",

            "polyfills": "src/polyfills.ts",

            "tsConfig": "tsconfig.app.json",

            "assets": [

              "src/favicon.ico",

              "src/assets"

            ],

            "styles": [

              "src/styles.css"

            ],

            "scripts": []

          }

檢視main.ts檔案，發現啟動的Module是AppModule，位於app/app.module.ts中

import { enableProdMode } from '@angular/core';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

import { environment } from './environments/environment';

if (environment.production) {

  enableProdMode();

}

platformBrowserDynamic().bootstrapModule(AppModule)

  .catch(err => console.error(err));

在app.module.ts中可以看到，通過NgModule標註聲明瞭本模組中的元件以及依賴的外部Module及作為頂層元件啟動的AppComponent；

import { NgModule } from '@angular/core';

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

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

import { AppComponent } from './app.component';

import { HelloWorldComponent } from './hello-world/hello-world.component';

import { UserItemComponent } from './user-item/user-item.component';

import { UserListComponent } from './user-list/user-list.component';

@NgModule({

  declarations: [

    AppComponent,

    HelloWorldComponent,

    UserItemComponent,

    UserListComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

Angular環境搭建及簡單體驗

Angular環境搭建及簡單體驗

最新文章