back back-top comments magnifier menu mobile right smile views

Angular2 快速入门(TypeScript + Webpack)

Jean
Jean

angular2-quickstart-banner

2016年9月底,谷歌发布了 Angular2 的正式版,可谓众望所归。相比 Angular1.x,Angular2 有了质的改变,组件化(Component)是它的核心灵魂。

本文将从一个简单的 QuickStart 开始,带你进入 Angular2 的世界。内容以 Angular 官网的快速指南为准,不同之处是我们在这里使用了 webpack 作为模块加载器 对源码编译打包,而不是官网使用的 System.js,如果你有选择困难症 千万别纠结,只要达到目的 尽管使用你熟悉的模块加载器吧。

下面我们一起来搭建这个 QuickStart 应用,让页面显示一条消息:”My First Angular App”。整个示例过程需要你有一些耐心,打开你的编辑器开始 coding 吧。

本文源码:angular2-quickstarticon-file-zipangular2-quickstart.zip

1. 开发环境和工具准备

我常用 IDE 的是公认的前端开发神器 Webstrom,当然 AtomSublime 等开源编辑器也很不错。命令行工具推荐使用 git-bash

angluar2-quickstart-tools-logo

环境方面需要 node v5.x.x 或更高版本以及 npm 3.x.x 或更高版本,
如果你还没有安装 node.js,直接去 node.js官网 下载。

2. 创建本地项目目录

mkdir angular2-quickstart
cd angular2-quickstart

3. 创建 package.json

npm init

npm init 命令 会创建一个默认的 package.json 文件,如果你没用过,没关系只需要根据命令行提示一步一步填上相关信息,或直接每次按回车就行。

在IDE里修改默认的 package.json 内容,如下:

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "postinstall": "./node_modules/.bin/typings install"
  },
  "author": "Your Name",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "~2.1.0",
    "@angular/compiler": "~2.1.0",
    "@angular/core": "~2.1.0",
    "@angular/forms": "~2.1.0",
    "@angular/http": "~2.1.0",
    "@angular/platform-browser": "~2.1.0",
    "@angular/platform-browser-dynamic": "~2.1.0",
    "@angular/router": "~3.1.0",
    "@angular/upgrade": "~2.1.0",

    "angular-in-memory-web-api": "~0.1.5",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.25"
  },
  "devDependencies": {
    "ts-loader": "^0.8.2",
    "typescript": "^2.0.3",
    "typings": "^1.4.0",
    "path": "^0.12.7",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.16.1"
  }
}

简单解释下,dependencies 是运行时所需要的依赖,devDependencies 是开发时所需要的依赖,@angular 是 Angular 的核心库,Angular2 将它分成了很多包,这样方便开发者灵活的按需引入。

reflect-metadatarxjszone.js 这些都是为 Angular 提供核心功能支持,这里就不做详细说明了。

webpack-dev-server 是支持 webpack 的静态服务器调试工具,它可以实时监控项目中文件,文件改动后使浏览器自动刷新或进行热替换。
ts-loader 是 webpack 将 TypeScript 编译成 ES5 的编译器,本文里 我们使用 TypeScript 来写例子,它也是 Angular 官方推荐的开发语言。
typings 是 TypeScript 定义的文件管理系统。

4. 创建其他配置文件:tsconfig.json 和 typings.json

创建 tsconfig.json(定义 TypeScript 编译成 ES5 的参数):

touch tsconfig.json

在 tsconfig.json 中添加代码:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": true,
    "declaration": false
  }
}

创建 typings.json

touch typings.json

在 typings.json 中添加代码:

{
  "globalDependencies": {
    "es6-shim": "registry:dt/es6-shim#0.31.2+20160602141504"
  }
}

5. 安装所有依赖包

OK,现在运行 npm install 安装 package.json 里所有的依赖包,过程可能会有些慢(如果你开了 VPN 就不存在这问题),这里推荐使用淘宝镜像命令加快安装速度 cnpm install

npm install

安装完后,你的项目目录应该是这样:

angular2-quickstart-project-directory1

如果在运行 npm install 之后没有出现 typings 目录,你就需要通过命令手动安装它:

npm run typings install

6. 创建应用入口

NgModules 把 Angular 应用组织成了一些功能相关的代码块。 Angular 本身也被拆成了一些独立的 Angular 模块。 这让你可以只导入你应用中所需的 Angular 部件,以得到较小的文件体积。

每个 Angular 应用都至少有一个模块: 根模块 ,在这里它叫做 AppModule 。

在项目目录中创建 app 子目录,接着在 app 目录下创建 app.module.ts

mkdir app
touch app/app.module.ts

在刚创建的 app.module.ts 文件中添加下面代码:

// zone 为异步任务提供hook支持,主要应用于提高脏检查效率和降低性能损耗
// reflect-metadata 为Decorator提供反应射API,注意:Decorator是ES6的提案
import 'zone.js/dist/zone';
import 'reflect-metadata';

// 引入NgModule装饰器
import { NgModule } from '@angular/core';

// 引入浏览器模块
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
    imports: [ BrowserModule ]
})

export class AppModule {}

这个文件是整个应用的入口,由于应用需要运行在浏览器中,所以需要从 @angular/platform-browser 中导入 BrowserModule,并将它添加到 imports 数组中。

7. 创建组件,并添加到应用中

每个 Angular 应用都至少有一个根组件,整个应用由一个个组件组成,而组件化(Component)则是 Angular 的核心灵魂。

创建组件 AppComponent,即文件 app.component.ts,在其中添加代码:

touch app/app.component.ts

在 app.component.ts 中添加代码:

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

// 为 AppComponent 组件类添加注解
@Component({
  selector: 'my-app',
  template: '<h1>My First Angular App</h1>'
})

export class AppComponent {}

@Component 装饰器 会把一份 元数据 关联到 AppComponent 组件类上

  • selector 用来为该组件的 HTML 元素指定简单的 CSS 选择器
  • template 用来告诉 Angular 如何渲染该组件的视图

class AppComponent 之所以是空的,因为我们的例子不需要应用逻辑。

编辑 app.module.ts 文件,导入 AppComponent ,并把它添加到 NgModule 装饰器中的 declarations 和 bootstrap 字段:

// zone 为异步任务提供hook支持,主要应用于提高脏检查效率和降低性能损耗
// reflect-metadata 为Decorator提供反应射API,注意:Decorator是ES6的提案
import 'zone.js/dist/zone';
import 'reflect-metadata';

// 引入NgModule装饰器
import { NgModule } from '@angular/core';

// 引入浏览器模块
import { BrowserModule } from '@angular/platform-browser';

// 引入组件AppComponent
import { AppComponent } from './app.component';

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

export class AppModule {}

8. 启动应用

创建 main.ts文件,让 Angular 加载根组件 AppComponent

touch app/main.ts

在 main.ts 中添加代码:

// 引入启动器
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

// 引入入口文件
import { AppModule } from './app.module';

// 启动应用
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

为什么要分别创建 main.ts 、应用模块 和应用组件的文件呢?

因为应用的引导过程与 创建模块或者 展现视图是相互独立的关注点。如果该组件不会试图运行整个应用,那么测试它就会更容易。

但我们应该用正确的方式组织 Angular 应用的文件结构。 启动 App 与展现视图是两个相互分离的关注点。 把这些关注点混在一起会增加不必要的难度。 可以通过使用不同的引导器 (bootstraper) 来在不同的环境中启动 AppComponent 。 测试组件也变得更容易,因为不需要再运行整个程序才能跑测试。 让我们多花一点精力来用 “正确的方式” 实现它

9. 创建应用的宿主页面 index.html

在目录下创建 index.html 文件:

touch index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Angular2 QuickStart</title>
</head>
<body>
    <!-- 对应 @Component({ selector: 'my-app', ... }) -->
    <my-app></my-app>

    <!-- 编译打包后的文件 -->
    <script src="dist/bundle.js"></script>
</body>
</html>

10. 创建 webpack.config.js

我们使用 webpack 作为编译打包工具,就需要创建 webpack.config.js

touch webpack.config.js

在 webpack.config.js 中添加代码:

var path = require('path');

module.exports = {
    entry: {
        main: './app/main.ts'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/dist/',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.ts$/,
                loader: 'ts'
            }
        ]
    },
    // require 文件时可省略后缀 .js 和 .ts
    resolve: {
        extensions: ['', '.js', '.ts']
    },
    // 配置 webpack-dev-server
    devServer:{
        historyApiFallback: true,
        hot: true,
        inline: true,
        port: 9090 // 修改端口,一般默认是8080
    }
};

修改 package.json 在其中添加 start 命令:
( package.json 的其他部分这里做了省略 )

{
  "scripts": {
    "start": "webpack-dev-server --inline --hot --colors --progress",
    "postinstall": "./node_modules/.bin/typings install"
  },
}

一切就绪,先不急着启动 webpack-dev-server,初学者经常遇到的坑,关于 webpack-dev-server 无法让浏览器在代码修改后进行热替换,首页要确保是否全局安装了 webpack-dev-server,如果没有就运行下面命令:

npm install webpack-dev-server -g

更重要的是 webpack-dev-server 只会将静态文件打包在内存中 而非你的磁盘里 这是为了方便开发环境调试,所以初学者会疑惑为什么运行了 webpack-dev-server,dist 文件夹下确无文件产生,想产生文件就运行 webpack

10. 大工告成,走起!

在命令行输入:

npm start

git-bash 里显示:

ng2-git-bash-2

在浏览器打开 http://localhost:9090/index.html,就会看到我们的第一个 angular2 应用了:

angular2-quickstart-preview

你也可以尝试在 app.component.ts 中将 “My First Angular App” 修改成别的文字,浏览器会自动进行热替换,是不是有一些成就感。

相信通过这个快速指南,你已经对 Angular2 产生了兴趣。

本文由 前端先生 原创,欢迎转载分享,但请注明出处。

2条评论

2条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

扫描二维码分享到微信