@H_
301_0@
angular2是什么?我猜不容我赘述,各位一定略有耳闻,无论是曾经
AngularJS的拥趸,亦或是
React的粉丝,都或多或少的对她有过一点了解。未见其物、先闻其声,
angular2在问世之前已经做足了宣传,想必诸位也一定被下面各种词汇所震慑,什么:
TypeScript、
ES5、
ES6、
Dart、
Immutable、
Unidirectional Data Flow、
Reactive Programming、
Decorators、
System.js、
webpack...,天花乱坠,美不胜收!但我们不禁要问,“都说
AngularJS学习曲线陡峭,也没陡出这些个莫名词汇!”,
angular2究竟该如何上手?看了这些个知识点,有木有吓得手抖,都搞不清从何处入手了!?
@H_
301_0@本教程主旨:多些操作、少点说教(理论是进阶必须的,千万不要误读),让我们从实践中追寻真理吧!
@H_
301_0@本章源码:
environment
@H_
301_0@本章使用
angular2
版本为:
2.4.5
,
webpack
版本为:
2.2.0
推荐开发工具
vscode
@H_
301_0@这里我推荐使用
vscode(原谅我变了,之前推荐的是
atom
)。很爽的哦!
创建项目
mkdir environment
cd environment
npm init
@H_
301_0@根据
npm init
提问,创建
package.json
文件,创建后去掉不必要的字段,像这样即可:
{
"name": "environment","version": "1.0.0","description": "I will show you how to set up angular2 development environment","keywords": [
"angular2","environment"
],"scripts": {
"start": "webpack-dev-server --hot--host 0.0.0.0"
},"author": "Howard.Zuo","license": "MIT","dependencies": {
"@angular/common": "^2.4.5","@angular/compiler": "^2.4.5","@angular/core": "^2.4.5","@angular/platform-browser": "^2.4.5","@angular/platform-browser-dynamic": "^2.4.5","@angular/forms": "^2.4.5","core-js": "^2.4.1","rxjs": "5.0.3","zone.js": "^0.7.6"
},"devDependencies": {
"@types/core-js": "^0.9.35","ts-loader": "^2.0.0","typescript": "^2.1.5","webpack": "^2.2.0","webpack-dev-server": "^2.2.0"
}
}
安装依赖
npm install
- @H_301_0@@angular: 这个必须的,没意见吧?之所以分了多个包,这是最新
2.1.2
的变化,可以按需引入,增加灵活性
- @H_301_0@core-js:
javascript
的一个标准库实现,包含了大量ES2015
,ES2016
的ES5
实现
- @H_301_0@rxjs: 一个
Reactive Programming
的JavaScript
实现。这里对她的依赖是因为angular2
支持多种数据更新模式,比如:flux、Rx.js
- @H_301_0@zone.js: 用来对异步任务提供
Hooks
支持,使得在异步任务运行之前/之后做额外操作成为可能。在angular2
里的主要应用场景是提高脏检查效率、降低性能损耗。
- @H_301_0@webpack: 我们这里使用
webpack2
对源码进行编译、打包,而不是用官网介绍的System.js
的运行时加载、解释、执行。合并打包的好处不用我多说吧?减少请求数、uglify
、预检查...
- @H_301_0@webpack-dev-server: 一个轻量级的,支持
webpack
编译的静态服务器(调试工具),本章节我们就用它启动程序
- @H_301_0@ts-loader:
TypeStrong
出品的TypeScript
加载器,通过该加载器,TypeScript
源码可以顺利被编译成ES5
代码
- @H_301_0@typescript:
angular2
官方推荐的开发语言,我们在教程里也将使用该语言进行代码编写
- @H_301_0@@types/core-js: 自
typescript
2.0.0
以后,使用@types
管理声明文件,由于angular2
依赖ES2015
的诸多特性,譬如:Promise
、Map
等,所以需要引入这些API的声明
第一个示例
创建index.html
touch index.html
@H_
301_0@向刚才创建的
index.html
里
添加如下
内容:
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1">
<title>environment</title>
</head>
<body>
<!--这里引用我们的第一个component-->
<my-app></my-app>
<!--加载使用webpack编译后的bundle-->
<script type="text/javascript" src="/dist/bundle.js"></script>
</body>
</html>
创建app.ts
mkdir ts
touch ts/app.ts
@H_
301_0@向刚才创建的
ts/app.ts
里
添加如下
内容:
import {Component} from '@angular/core';
//声明第一个Component
@Component({
selector: 'my-app',template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }
创建index.ts
touch ts/index.ts
@H_
301_0@向刚才创建的
ts/index.ts
里
添加如下
内容:
//不显示引入,你会得到"Uncaught reflect-Metadata shim is required when using class decorators"的错误
import 'core-js/es6';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
//引入NgModule装饰器
import { NgModule } from '@angular/core';
//引入浏览器模块
import { BrowserModule } from '@angular/platform-browser';
//引入启动器
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
//引入我们刚才创建的第一个component
import { AppComponent } from './app';
//声明一个应用模块
@NgModule({
imports: [ BrowserModule ],declarations: [ AppComponent ],bootstrap: [ AppComponent ]
})
class AppModule { }
//启动应用
platformBrowserDynamic().bootstrapModule(AppModule);
创建webpack.config.js
touch webpack.config.js
@H_
301_0@向刚才创建的
webpack.config.js
里
添加如下
内容:
const {resolve} = require('path');
module.exports = {
entry: {
index: './ts/index.ts'
},output: {
path: resolve(__dirname,'dist'),filename: 'bundle.js',publicPath: 'dist/'
},module: {
exprContextCritical: false,rules: [
{
test: /\.ts$/,use: ['ts-loader']
}
]
},resolve: {
extensions: [
'.js','.ts'
]
}
};
创建tsconfig.json
touch tsconfig.json
@H_
301_0@向刚才创建的
tsconfig.json
里
添加如下
内容:
{
"compilerOptions": {
"module": "commonjs","target": "es5","moduleResolution": "node","noImplicitAny": true,"removeComments": true,"emitDecoratorMetadata": true,"experimentalDecorators": true,"sourceMap": true,"declaration": false
},"buildOnSave": false,"compileOnSave": false,"exclude": [
"node_modules"
]
}
运行
@H_
301_0@好了,到目前为止,我们第一个示例的开发/运行环境就基本搭好了,现在启动试试看:
npm start
@H_
301_0@你会看到:
@H_
301_0@
@H_
301_0@下回预告:
牛刀小试component