《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);

这个文件就是咱们应用的启动文件了，它会引导启动咱们的应用。

好了，一切准备就绪，接下来咱们就能够运行咱们的应用了。

npm start

打开 http://localhost:3000，恭喜你，咱们的应用成功启动了。

好吧，很丑，不建议的话，能够在 app.component.css 里面给咱们的应用润色一下。本身动手尝试一下吧，写几个组件练练手。这会比你一直看效果更好。