Angular 2 新手指南
Angular 2 的正式版刚发布没多久,自己也只用过ng1,但是由于很多大佬投奔Typescript而Angular 2又是用的TS,在学TS就顺带学ng 2了。
本文主要就参考官方教程。
因为是新手向所以应该把初始化配置也讲讲……
Init - 初始化
首先就要保证自己装好了NodeJS和npm。
然后建立一个项目文件夹~叫啥都行,看自己喜欢。
一个基础的Angular 2 项目文件夹中包含以下几个配置文件:
- package.json 定义了项目中npm包依赖
- tsconfig.json 定义了Typescript 编译器如何通过项目文件生成Javascript
- typings.json 提供额外的第三方TS库的定义文件
- systemjs.config.js 提供给模块加载器关于哪里寻找应用模块的信息,并且注册所有必要的包依赖。
然后我们来创建他们。
官网上是让我们手动抄下来……
我这里偷懒换个方法:
-
npm init
乱写即可 - 然后先搞定package.json
npm install @angular/common @angular/complier @angular/core @angular/forms @angular/http @angular/platform-browser @angular/platform-browser-dynamic @angular/router @angular/upgrade --save
npm install angular-in-memory-web-api bootstrap core-js rxjs reflect-metadata systemjs zone.js --save
npm install concurrently lite-server typescript typings --save-dev
angular2这个库居然还是beta……
这里来科普一下各个库……
@angular开头的就是各个angular组件。npm里由angular上传。
至于看起来正统的angular(即angular 1)和angular 2由npm上的angularcore上传,然而现在居然还只是beta版……
angular-in-memory-web-api是帮助你在ng2里虚拟api,无需写api后台,方便测试。参考
bootstrap就不用说了大家都知道,很出名。
core-js就是对ES5、ES6、Promises等特性的适配
rxjs直接看这个介绍吧。
如果看不懂,那我这里还有个简介:静态网页已经成为历史,如今的网页设计趋势三预测客户想法并提供更好的互动功能,例如自动填写表单、搜索Wikipedia等,而Rxjs可以很方便地为鼠标和键盘事件提供响应。
= =
reflect-metadata Typescript带的修饰元数据用,元数据反射。
systemjs可不是调用系统用的……简单来说就是一个通用的动态的模块加载器。
zone.js 是angular团队参照Nodejs的Domain,Dart的Zone,为angular2开发的核心组件。详细介绍
concurrently是用来同时跑多个命令的,就像 npm run watch-js
& npm run watch-less
但是能做到更好。
lite-server 如你所见就是一个开发用的小server
typescript 就不用介绍了吧……
typings Typescript的定义管理器。Typings是个管理与安装TS(类)定义的简单方法。它使用typings.json决定Typings Registry,GitHub,NPM,Bower,HTTP,以及本地文件。包可以使用类型定义从各种源与不同版本,知道对用户来说他们之间并不会冲突。
差不多介绍完了我们继续步骤……
然后typings.json
./node_modules/typings/dist/bin.js init
./node_modules/typings/dist/bin.js install dt~core-js dt~jasmine dt~node --save --global
然后tsconfig.json
./node_modules/typescript/bin/tsc --init
- systemjs.config.js我还真不知道怎么简化……