Angular4的QuickStart—— ES6 而非TypeScript


原文发表于本人的个人博客,地址:Angular4的QuickStart——With ES6 Not TypeScript,欢迎反馈探讨。

今年3月份,Angular官方发布了新版——Angular4.0.0,新版本的特性已经有很多文章了,在此不一一赘述。

但从Angular2.x以来,JavaScript版本的官方文档就从未完整过,而ES6的QuickStart也从未在日程之内,这对初学者而言多少有点不太友好。虽然网上有ES6+Angular2.x的QuickStart,但是多少有点问题,而且跟Angular4有些不一样,也过时了。今天为了折腾Angular4到处找文档查资料,搞了好久才搞定一个“hello world”,实在有些不爽,为了帮助像我一样的初学者,我觉得把这个ES6的QuickStart写出来也许会有点用。

NOTE:本文实现的内容与官方文档中的QuickStart实现的内容没有区别,只是本文是用ES6实现的,而非JavaScript或TypeScript.

废话少说,show the code.

首先是开发环境,先上package.json:

//package.json
{
  "name": "angular4-quickstart-es6-webpack",
  "version": "1.0.0",
  "description": "The Angular 4 Quickstart tutorial done in ES6 with webpack and Babel, without using TypeScript.",
  "scripts": {
    "start": "npm run lite",
    "lite": "lite-server",
    "webpack": "webpack --progress",
    "postinstall": "npm run webpack"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": ""
  },
  "homepage": "",
  "dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "0.1.2"
  },
  "devDependencies": {
    "babel-core": "^6.7.0",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "concurrently": "^2.0.0",
    "lite-server": "^2.1.0",
    "script-loader": "^0.6.1",
    "webpack": "^1.12.14"
  }
}

除了Angular官方文档中列出的包和工具之外,还包括了ES6的相关模块及其转码工具Babel。package.json配置好了之后就可以开始配置开发环境了,

目录结构:

Angular4的QuickStart—— ES6 而非TypeScript

开发环境:

开发环境的配置需要安装Node(官网),然后安装webpack,

npm install webpack -g

然后在nges6目录下执行:

npm install

或者执行:

cnpm install

安装时间可能会有点长,耐心等待,安装完成后,开发所需要的包就会被下载到node_modules文件夹中,接下来是webpack的配置文件:

//webpack.config.js
var path = require('path');
module.exports = {
    entry: path.join(__dirname, 'public', 'src','index.js'),
    output: {
        path: path.join(__dirname, 'public', 'dist'),
        filename: 'vendor.js'
    },
    devtool: 'source-map',
    module: {
        loaders: [
            {
                test: //.js$/,
                loader: "babel-loader",
                query: {
                    presets: ['es2015']
                }
            },
        ]
    }
}

配置文件中我们定义了入口文件(public/src/index.js),然后定义了输出路径和输出文件的命名(public/dist/vendor.js),webpack将把我们需要的全部依赖打包到一个文件中(vendor.js),这样我们在HTML中只要用一个script标签引入这个文件就可以了(暂不考虑懒加载的问题)。

不知道上面这部分在说什么的同学,请先以“nodejs”、“npm”、“webpack”等关键词搜索网上的资料。

组件

Angular从2.0开始组件化,关于组件,中文文档中介绍说:“组件是一个 Angular 类,用于把数据展示到视图 (view),并处理几乎所有的视图显示和交互逻辑。组件是 Angular 系统中最重要的基本构造块之一。”组件是一个应用的基础构成,所以,我们首先在app.component.js中定义一个“组件”:

//app.component.js
import {Component} from '@angular/core';

class AppComponent {
    static get annotations() {
        return [
            new Component({
                selector: "my-app",
                template: '<h1>My First Angular 2 App</h1>'
            }),
        ];
    }
    
    constructor () {}
}

export {AppComponent};

在组件的定义中,需要用装饰器(Decorator)将组件的元数据附加到类上,然后Angular根据这些元数据创建一个组件实例。但是由于ES6目前不支持装饰器语法,因此通过static get annotations()方法完成这一工作。

模块:

Angular是以模块的形式来组织代码,每个Angular应用都至少有一个根模块(Root Module),所以接下来是app.module.js:

//app.module.js
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';

class AppModule{
    static get annotations() {
        return [
            new NgModule({
                imports: [ BrowserModule ],
                declarations: [ AppComponent ],
                  bootstrap: [ AppComponent ]
            })
        ];
    }
}

export {AppModule};

首先用ES6中的import关键字导入依赖的包(platform-browser/core)以及我们编写的组件(app.component),然后用class关键字声明我们的根模块(AppModule)。关于impors、declarations、bootstrap的含义,请查阅官方文档中关于根模块的部分官方文档链接

启动引导:

在main.js中启动(bootstrap)根模块,这个引导文件基本上只写这一次就OK了:

//main.js
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';

let boot = document.addEventListener('DOMContentLoaded', () => {
    platformBrowserDynamic().bootstrapModule(AppModule);
});

module.exports = boot;

index.js

index.js用于告诉webpack需要打包的依赖都有哪些。

//index.js
require('!!script!../../node_modules/es6-shim/es6-shim.min.js');
require('!!script!../../node_modules/core-js/client/shim.min.js');
require('!!script!../../node_modules/zone.js/dist/zone.js');
require('!!script!../../node_modules/rxjs/bundles/Rx.min.js');
require('!!script!../../node_modules/@angular/core/bundles/core.umd.js');
require('!!script!../../node_modules/@angular/common/bundles/common.umd.js');
require('!!script!../../node_modules/@angular/compiler/bundles/compiler.umd.js');
require('!!script!../../node_modules/@angular/platform-browser/bundles/platform-browser.umd.js');
require('!!script!../../node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js');


require('./app/main');

index.html

最后是index.html文件:

<!DOCTYPE html>
<html>
<head>
    <title>Angular 4 QuickStart</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <my-app>Loading...</my-app>

    <script type="text/javascript" src="public/dist/vendor.js"></script>
</body>
</html>

代码写好了,接下来是两个命令:

webpack --progress
npm start

这两个命令会将所有需要的js模块打包到vendor.js中,并启动一个本地服务器,调用你的浏览器,你会看到你的应用跑起来了:

由于本人也是入门级选手,很多东西也没搞清楚,所以文章写得很简单。但是其中的诸多概念都有不少文章有所论述,可以在网上查到,我也不可能说得更明白,所以就不拾人牙慧了,更深入的内容留待以后探讨。本文主要是提供一个基于webpack+ES6的QuickStart,如有问题,欢迎留言探讨。

如需转载,请注明原文链接


发表评论

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

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>