开发环境搭建
AngularJS2的开发需要node.js环境。在Windows下面安装node.js,最好使用NVM(Node Version Manager)。在这里可以找到NVM的详细信息:
https://github.com/creationix/nvm/
安装好NVM之后,用nvm install latest命令,会自动安装最新版本的node.js以及npm。另外还需要在系统的环境变量PATH里面添加node的路径,已方便使用。
实现
建立一个portal目录,并且添加package.json,tsconfig.json,type.json,systemjs.config.js。这些都是AngularJS2项目标准的配置文件,详细信息请参考AngularJS2的快速开始文档:
https://angular.io/docs/ts/latest/quickstart.html,只需要修改一下package.json里面的name就可以了。之后在cmd,或者git bash里面,进入portal目录,运行npm install,npm会自动安装AngularJS2所需要的所有依赖包。其它为文件和目录也按照这个快速开始文档建立,包括一个index.html,一个app目录。另外portal下面有app.component.html,app.module.ts,app.routing.ts,main.ts,这些都是每个AngularJS2项目都有的文件。TS文件使用了TypeScript语言,是Angular推荐的语言。其中app.routing.ts定义了网站的路由,具体路由的使用信息请参考:
https://angular.io/docs/ts/latest/tutorial/toh-pt5.html。代码里面有一个地方值得提一下,即app.component.html这个文件,实际上做了我们这个单页应用的主视图。所有其它routing里面的视图,都是嵌入到该文件的router-outlet标签的。该标签实际上是一个Angular2的指令,告诉router应该在那里显示视图。具体请参考:
https://angular.io/docs/ts/latest/guide/router.html。我们具体看一下AngularJS2调用上节中建立的user-service的代码。这些基本的代码不再一一列出,请参考github上面的代码: