本帖最后由 悟箜 于 2016-7-30 14:31 编辑
最近开始学习Angular2的开发，经过一段时间的摸索，发现Angular2还是有很多让人眼前一亮的特性的。 尤其是Angular2官网有了中文版（看来天朝程序员才是Angular2的真正用户，哈哈哈哈），还有就是有一个号称五分钟的quick start。虽然写的挺好，不过感觉东西还是有点多，SO，精简再精简，我们一起来写个比官网更简洁的Angular2 quick start。（此版本仅限于开发环境）
开始之前请确认你的电脑安装了NodeJS跟NPM，然后选择一款适合自己的开发工具。准备好之后我们就可以开始啦~~~~~
首先我们来看看项目的目录结构，依赖配置文件：package.json，入口文件：index.html， SystemJS配置文件：systemjs.config.js， Angualr2入口文件：main.ts， 主页面文件：app.component.ts。就只需要这５个文件？？是的，就是这么简单～
屏幕快照 2016-07-14 下午8.20.26.png
(33.16 KB, 下载次数: 3)
- 我们需要先创建package.json 文件，里面只需要包含我们需要的必备依赖：(下面文件里的注释只是为了方便理解，如果复制代码请把注释去掉，否则会出错！！)
- {
- "name": "angular2-quick-start",
- "version": "0.0.1",
- "description": "This is one sample for Angular2 quick start",
- "scripts": {
- "test": "echo "Error: no test specified" && exit 1",
- "start": "live-server --port=22222" /**设置live-server启动信息，端口号：22222**/
- },
- "author": "Wu Kong",
- "dependencies": {
- "@angular/common": "2.0.0-rc.4",
- "@angular/compiler": "2.0.0-rc.4",
- "@angular/core": "2.0.0-rc.4",
- "@angular/platform-browser": "2.0.0-rc.4",
- "@angular/platform-browser-dynamic": "2.0.0-rc.4",
-
- "reflect-metadata": "^0.1.3",
- "rxjs": "5.0.0-beta.6",
- "systemjs": "^0.19.31",
- "zone.js": "^0.6.12",
- "es6-shim": "0.35.1" /**为了让IE支持ES6的语法**/
- },
- "devDependencies": {
- "live-server": "^0.8.2", /**使用live-server做为我们的小型服务器**/
- "typescript": "^1.8.10"
- }
- }
- 创建入口文件index.html， 引入我们需要的依赖， <wk-app>就是我们要写的app.component， 页面的最后我们是通过systemJS来引入入口文件main.ts，那么为什么是System.import('app')而不是System.import('main')呢？？？答案就在下面！
<!DOCTYPE html>
<html>
<head> <title>Angular2 Quick Start</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <base href="/"> <!-- 确保ＩＥ支持ＥＳ６语法 --> <script src="/node_modules/es6-shim/es6-shim.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script>
<!-- 引入ｔｙｐｅｓｃｒｉｐｔ编译器，将会在浏览器端编译Ｔｙｐｅｓｃｒｉｐｔ脚本 -->
<script src="node_modules/typescript/lib/typescript.js"></script> <script src="node_modules/reflect-metadata/Reflect.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> </head> <body> <wk-app>Loading...</wk-app> <script> System.import('app').catch(function(err) { console.error(err); }); </script> </body> </html>
- 创建加载配置文件systemjs.config.js
- System.config({
- transpiler: 'typescript', /** 编译typescript*/
- typescriptOptions: {
- emitDecoratorMetadata: true
- },
- map: {
- 'app': 'app', /** 指定代码所在路径*/
- 'rxjs': 'node_modules/rxjs',
- '@angular': 'node_modules/@angular'/** 指定Angular2所在路径*/
- },
- packages: {/** 指定入口文件！！*/
- 'app': {
- main: 'main.ts',
- defaultExtension: 'ts'
- },
- 'rxjs': {
- main: 'index.js'
- },
- '@angular/core': {
- main: 'index.js'
- },
- '@angular/common': {
- main: 'index.js'
- },
- '@angular/compiler': {
- main: 'index.js'
- },
- '@angular/platform-browser': {
- main: 'index.js'
- },
- '@angular/platform-browser-dynamic': {
- main: 'index.js'
- }
- }
- });
- 入口文件main.ts，只需要简单粗暴的引入了主页面文件app.component.ts
- import {bootstrap} from '@angular/platform-browser-dynamic';
- import AppComponent from "./common/components/app.component";
- bootstrap(AppComponent, []).catch(err => console.error(err));
- import {Component} from '@angular/core';
- @Component({
- selector: 'wk-app',
- template : '<h1>Hello Angular2 !</h1>'
- })
- export default class AppComponent {}
- 打开ｄｏｓ窗口，ＣＤ到你刚才新建的项目目录下，运行ｎｐｍ ｉｎｓｔａｌｌ开始下载我们的依赖包
install.PNG
(24.48 KB, 下载次数: 2)
- 安装好所有的依赖以后直接运行ｎｐｍ ｓｔａｒｔ，如果你的浏览器正常打开并且显示Hello Angular2 !，恭喜你，你已经迈进Ａｎｇｕｌａｒ２的大门了～～
IE.PNG
(11.21 KB, 下载次数: 3)
如果你没有成功，请不要灰心也不要丧气，留下你的错误信息，我会尽量帮你解决的～
如果你有任何疑问也可以留言，我们大家一起讨论解决～
|
发表于 2016-7-14 16:19:08
收藏
楼主
