本文将从头开始编写实际的代码来完成一个angular2的demo。
当然TS环境也是必须的,目前TS已经更新到了2.1.5+,笔者使用的就是2.1.5版本,且最好使用2.0以上版本的TS,否则会有一些尴尬的问题(包括类型定义以及编译错误)。
2.关于编辑器
笔者使用的是VSCode,使用其他热门的编辑器都可以自己喜欢就行,甚至可以用VisualStudio(但是在网上见过有人用VS2015来开发涉及到npm包的项目,即使是Mac顶配版也能卡爆炸)。
想象自己在写一个后台语言项目,我们所写的文件最终都要经过编译生成目标文件才运行,ng2也是这样,编写的是.ts文件,最终由我们配置好的编译器(webpack)进行编译生成目标代码并运行。
所以除了angular2依赖以外,必须配置好底层的webpack。所有的依赖包都通过前面安装的npm来安装。下面给出package.json:
"name": "angular2-demo-yitim" "version": "1.0.0" "description": "angular2 demo by yitim" "keywords" "angular2" "webpack" "typescript"
"author": "yitim <635928008@qq.com>" "license": "MIT" "scripts" "build:aot:prod": "npm run clean:dist && npm run clean:aot && webpack --config config/webpack.prod.js --progress --profile --bail" "build:aot": "npm run build:aot:prod" "build:dev": "npm run clean:dist && webpack --config config/webpack.dev.js --progress --profile" "build:docker": "npm run build:prod && docker build -t angular2-webpack-start:latest ." "build:prod": "npm run clean:dist && webpack --config config/webpack.prod.js --progress --profile --bail" "build": "npm run build:dev" "clean:dll": "npm run rimraf -- dll" "clean:aot": "npm run rimraf -- compiled" "clean:dist": "npm run rimraf -- dist" "clean:install": "npm set progress=false && npm install" "clean": "npm cache clean && npm run rimraf -- node_modules doc coverage dist compiled dll" "docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./src/" "lint": "npm run tslint \"src/**/*.ts\"" "server:dev:hmr": "npm run server:dev -- --inline --hot" "server:dev": "webpack-dev-server --config config/webpack.dev.js --open --progress --profile --watch --content-base src/" "server:prod": "http-server dist -c-1 --cors" "server": "npm run server:dev" "start": "npm run server:dev" "tslint": "tslint" "version": "npm run build" "watch:dev:hmr": "npm run watch:dev -- --hot" "watch:dev": "npm run build:dev -- --watch" "watch:prod": "npm run build:prod -- --watch" "watch": "npm run watch:dev" "webdriver-manager": "webdriver-manager" "webdriver:start": "npm run webdriver-manager start" "webdriver:update": "webdriver-manager update" "webpack-dev-server": "webpack-dev-server" "webpack": "webpack"
"dependencies" "@angular/common": "2.4.6" "@angular/compiler": "2.4.6" "@angular/core": "2.4.6" "@angular/forms": "2.4.6" "@angular/http": "2.4.6" "@angular/platform-browser": "2.4.6" "@angular/platform-browser-dynamic": "2.4.6" "@angular/platform-server": "2.4.6" "@angular/router": "3.4.6" "@angularclass/conventions-loader": "^1.0.2" "@angularclass/hmr": "~1.2.2" "@angularclass/hmr-loader": "~3.0.2" "core-js": "^2.4.1" "crypto-browserify": "^3.11.0" "crypto-js": "^3.1.9-1" "http-server": "^0.9.0" "ie-shim": "^0.1.0" "reflect-metadata": "^0.1.9" "rxjs": "5.0.2" "zone.js": "0.7.6"
"devDependencies" "@angular/compiler-cli": "2.4.6" "@types/hammerjs": "^2.0.33" "@types/node": "^7.0.0" "@types/selenium-webdriver": "~2.53.39" "@types/source-map": "^0.5.0" "@types/uglify-js": "^2.0.27" "@types/webpack": "^2.0.0" "add-asset-html-webpack-plugin": "^1.0.2" "angular2-template-loader": "^0.6.0" "assets-webpack-plugin": "^3.5.1" "awesome-typescript-loader": "~3.0.0-beta.18" "codelyzer": "~2.0.0-beta.4" "copy-webpack-plugin": "^4.0.0" "css-loader": "^0.26.0" "exports-loader": "^0.6.3" "expose-loader": "^0.7.1" "extract-text-webpack-plugin": "~2.0.0-rc.2" "file-loader": "^0.10.0" "find-root": "^1.0.0" "gh-pages": "^0.12.0" "html-webpack-plugin": "^2.28.0" "imports-loader": "^0.7.0" "istanbul-instrumenter-loader": "1.2.0" "json-loader": "^0.5.4" "ng-router-loader": "^2.1.0" "ngc-webpack": "1.1.0" "npm-run-all": "^4.0.1" "optimize-js-plugin": "0.0.4" "parse5": "^3.0.1" "protractor": "^4.0.14" "raw-loader": "0.5.1" "rimraf": "~2.5.4" "sass-loader": "^4.1.1" "script-ext-html-webpack-plugin": "^1.5.0" "source-map-loader": "^0.1.5" "string-replace-loader": "1.0.5" "style-loader": "^0.13.1" "to-string-loader": "^1.1.4" "ts-node": "^2.0.0" "tslib": "^1.5.0" "tslint": "~4.4.2" "tslint-loader": "^3.3.0" "typedoc": "^0.5.3" "typescript": "~2.1.5" "url-loader": "^0.5.7" "webpack": "2.2.0" "webpack-dev-middleware": "^1.10.0" "webpack-dev-server": "2.2.1" "webpack-dll-bundles-plugin": "^1.0.0-beta.5" "webpack-merge": "~2.6.1"
}