原文发表于本人的个人博客,地址: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配置好了之后就可以开始配置开发环境了,
目录结构:
开发环境:
开发环境的配置需要安装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,'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,如有问题,欢迎留言探讨。
如需转载,请注明原文链接。