《Angular2 從開發到部署系列》之「第一個 Angular2 應用」

時間 2019-12-07

標籤 angular2 angular 開發部署系列第一個應用欄目 AngularJS 简体版

原文原文鏈接

前言

抱歉隔了好久才更新。。。javascript

在學習以前，我給你們推薦點學習資料css

Angular2官網官網的文檔寫的其實很詳細了，並且中文文檔也同步進行翻譯，想要學好 Angular2 就必定要多看文檔，此次 Angular2 團隊下了很大功夫在文檔方面，寫的至關詳細和全面。html

ng-book 2 這本書介紹的很全面，比較適合入門，可是是英文版的，目前 Angular2 中文官網的雪狼大叔組織了一批同窗正在翻譯這本書，相信很快便能在書店買到了。java

@AngularClass 這是一個一幫牛人組成的隊伍，專門教學 Angular 的一些課程，他們在 github 上有不少的開源，咱們這篇的 webpack 打包，就是參考他們的 angular2-webpack-starter。webpack

...網上還有不少的資料，學習要善用 Google 和 stackoverflow。git

第一個 Angular2 應用

在 Angular2 中，很重要的一個方法就是 @component，你或許會以爲它很像 Angular1 中的 directive，其實他就是一個 @Directive 加上一個 view。接下來跟着我一步步寫一個 Angular2 的應用吧。es6

第一個 Angular2 組件

進入咱們以前搭建好的項目目錄，而後創建一個 src 文件夾，並在裏面再創建一個 app 文件夾，這裏面用來存放咱們的所有 Angular2 代碼。github

cd awesome-start

mkdir -p src/app

在 src 目錄下，咱們要創建幾個文件。web

index.html 入口頁typescript
main.ts 應用啓動文件
polyfills.ts 添加一些瀏覽器不支持 api 的填充
vendor.ts 引入第三方引入庫
app/app.module.ts 應用根模塊
app/app.component.ts 應用根組件
app/app.component.html 應用根組件模板
app/app.component.css 應用根組件樣式

是否是以爲這麼多文件，看着都迷糊。別怕，其實這樣寫是方便咱們組織咱們的項目，使每一個文件的用途更加清晰，也更利於後期的維護。另外，在文件的命名上，咱們發現有 .component.ts、.module.ts 這樣的命名，這是一種以特性來命名的方式，這樣的好處就是你能清楚地知道這個文件是幹什麼的。是否是你看一眼app.component.ts這個文件就知道他裏面應該是一個組件呢？這也是官方推崇的一種命名方式，建議你們使用這樣的命名方式來開發你的應用。

Ok，接下來，咱們就要開始寫組件了。

打開 app/app.component.ts 文件，加入下面的代碼

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {}

這裏都是些什麼鬼？

其實正如你所見，一個 component，就是一個 class，不過稍微有些不一樣的是，這個 class 是帶有一個 @Component 裝飾器的。裝飾器是一個 es6 的新特性，這裏咱們其實能夠看作一個將要傳給 AppComponent 這個 class 的元數據。

selector 就是咱們組件的名字，你可使用 css 選擇器的方式來命名你的組建，例如

// 選擇帶有不帶有 attr 屬性的 a 標籤
selector: 'a:not([attr])'

templateUrl 存放組建的模板 url
styleUrls 存放組建樣式 url，注意這是一個數組

接下來爲咱們的組件加點內容，打開 app/app.component.html

<main>
    <h1>哎呦~不錯哦！</h1>
</main>

好了，這樣咱們的第一個組件寫好了，是否是並不複雜。接下來咱們就在入口頁面裏面引用它，打開 index.html

<!doctype html>
<html>
<head>
    <base href="<%= webpackConfig.metadata.baseUrl %>">
    
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title><%= webpackConfig.metadata.title %></title>
    
    <meta name="description" content="<%= webpackConfig.metadata.title %>">
</head>
<body>

    <!-- 組件入口 -->
    <app-root>Loading...</app-root>

    <% if (webpackConfig.metadata.isDevServer && webpackConfig.metadata.HMR !== true) { %>
    <!-- Webpack Dev Server reload -->
    <script src="/webpack-dev-server.js"></script>
    <% } %>
</body>
</html>

你可能會很迷惑，怎麼這麼多亂起八糟的，別怕，那些東西你都不須要關心，只須要關心 body 標籤裏的 app-root 就行，由於他就是咱們所寫的組件，angular 會找到他，而後把它渲染出來。

OK，入口文件也寫好了，是否是能夠運行了？通常這種設問句的答案99%都是否認的。雖然咱們寫好了組件（AppCompnent），而且使用了它（<app-root>），可是咱們的應用依然不能運行，由於咱們還須要一個引導方法啓動咱們的程序（若是它能本身啓動，那就至關智能了...）。

寫一個 NgModule

使用過 Angular1 的會知道，在 Angular1 中有一個模塊化的方法 angular.module，一樣在2中也有一個相似的方法 NgModule。Angular2 的各個模塊都封裝在這樣一個個 NgModule 中，例如咱們熟悉的一些模板指令 ngIf、ngFor 這些都存放在 commonModule 裏面，若是想要使用這些指令的時候，咱們首先就要先引入 commonModule 這個模塊，否則 Angular2 會不認識（雖然是親生的）這些指令，並拋給你一堆錯誤。接下來咱們看看怎樣寫一個 NgModule。

打開 app.module.ts

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

/* import 根組件 */
import { AppComponent } from './app.component';

@NgModule({
    imports: [
        BrowserModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

BrowserModule 這個模塊，是全部在瀏覽器啓動的 Angular2 應用所必須的。

declarations 在這 module 裏面，咱們引入了以前寫的 AppComponent，而且在 declarations 裏面聲明瞭它，這是必要的，若是咱們不提早聲明咱們的組件，那麼 Angular2 會不認識咱們寫的組件，這樣就不會把他渲染出來。不止組件，咱們寫的 @Pipe @Directive 這些都須要提早在 declarations 裏面聲明出來。

bootstrap 在這裏面把咱們須要啓動的根組件聲明出來，Angular2 會從啓動 bootstrap 裏面的組件。

啓動應用

就快完成了，再堅持一下，打開 main.ts

/**
 * @import 啓動模塊
 */
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';

/**
 * @import 根模塊
 */
import { AppModule } from './app/app.module';

if (process.env.ENV === 'production') enableProdMode();

platformBrowserDynamic().bootstrapModule(AppModule);

這個文件就是咱們應用的啓動文件了，它會引導啓動咱們的應用。

好了，一切準備就緒，接下來咱們就能夠運行咱們的應用了。