Angular環(huán)境搭建及簡單體驗小結(jié)

更新時間：2021年05月28日 14:28:40 作者：無風(fēng)聽海

Angular基于TypeScript和react、vue相比 Angular更適合中大型企業(yè)級項目，本文通過實例代碼給大家分享Angular環(huán)境搭建及簡單體驗，感興趣的朋友跟隨小編一起學(xué)習(xí)吧

Angular介紹

Angular是谷歌開發(fā)的一款開源的web前端框架，誕生于2009年，由Misko Hevery 等人創(chuàng)建，后為Google所收購。是一款優(yōu)秀的前端JS框架，已經(jīng)被用于Google的多款產(chǎn)品當(dāng)中。
根據(jù)項目數(shù)統(tǒng)計angular（1.x 、2.x 、4.x、5.x、6.x、7.x 、8.x、9.x）是現(xiàn)在網(wǎng)上使用量最大的框架。

Angular基于TypeScript和react、vue相比 Angular更適合中大型企業(yè)級項目。

關(guān)于Angular版本，Angular官方已經(jīng)統(tǒng)一命名Angular 1.x統(tǒng)稱為Angular JS；Angular 2.x及以上統(tǒng)稱Angular；

目前2019年12月25日angular最新版本angular9.x。根據(jù)官方介紹，Angular每過幾個月就會更新一個版本。Angular2.x以后所有的Angular版本用法都是一樣的，此教程同樣適用于Angular7.x 、Angular8.x、Angular9.x 以及未來的其它版本…。

學(xué)習(xí)Angular必備基礎(chǔ)
必備基礎(chǔ)：html 、css 、js、es6、ts

一、安裝開發(fā)環(huán)境

npm install -g typescript
npm install -g @angular/cli

二、創(chuàng)建hello-world項目

創(chuàng)建項目

ng new angular2-hello-world

查看新建項目的目錄結(jié)構(gòu)

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目錄里的結(jié)構(gòu)

cd src
tree -F

啟動應(yīng)用,可以在http://localhost:4200查看運行結(jié)果

ng serve

創(chuàng)建hello-world組件

ng-generate component hello-world

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

//導(dǎo)入依賴
import { Component, OnInit } from '@angular/core';

//通過注解聲明控件的選擇器和相關(guān)的文件url
@Component({
  selector: 'app-hello-world',
  templateUrl: './hello-world.component.html',
  styleUrls: ['./hello-world.component.css']
})

//組件的數(shù)據(jù)模型
export class HelloWorldComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

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

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

為了使用新增加的組件，我們把標(biāo)簽添加到app.component.html中。

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

執(zhí)行 ng serve查看執(zhí)行效果

三、創(chuàng)建展示用戶的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中，查看瀏覽器執(zhí)行結(jié)果。

四、創(chuàng)建用戶列表user-list指令

創(chuàng)建新組件

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數(shù)組

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數(shù)組

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

將組件添加app.component.html中，查看瀏覽器執(zhí)行結(jié)果。

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

修改user-item的name參數(shù)使用外部輸入

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>

保存查看瀏覽器執(zhí)行情況。

六、啟動過程分析

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文件，發(fā)現(xiàn)啟動的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標(biāo)注聲明了本模塊中的組件以及依賴的外部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環(huán)境搭建及簡單體驗的詳細(xì)內(nèi)容，更多關(guān)于Angular環(huán)境搭建的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: