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
啟動應用,可以在//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>
為了使用新增加的組件,我們把
<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 { }