angular2开发手册.docx
《angular2开发手册.docx》由会员分享，可在线阅读，更多相关《angular2开发手册.docx（16页珍藏版）》请在冰豆网上搜索。
angular2开发手册
1AngularJs开发
1.1开发环境搭建
1.1.1开发工具
1.1.1.1Webstorm
1.1.1.2VisualStudioCode
1.1.1.2.1下载地址
1.1.1.2.2版本包
1.1.1.2.3安装教程
教程地址：
1.1.1.2.4使用教程
教程地址：
1.1.2NodeJs
1.1.2.1下载地址
https:
//nodejs.org/en/
1.1.2.2版本包
1.1.2.3安装教程
1.1.2.3.1地址
【一】：
【二】：
1.1.2.3.2本地实践
解压下载后的.zip文件至指定目录，然后配置环境变量，我选择的解压路径为E:
\01tool\node-v8.11.2-win-x64
1.1.2.3.3配置环境变量
由于NodeJs非安装文件，故需要配置环境变量，把当前解压的所在路径在path中配置一下，如下截图所示：
1.1.2.3.4验证nodejs
安装之后运行cmd,执行node-v和npm-v命令
如执行结果为上图所示出现版本号，说明安装成功，若出现不是内部命令的错误，则进入Node.js安装目录，执行此命令
1.1.2.4npm配置
配置npm的全局模块的存放路径以及cache的路径，我选择的路径使Node.js的安装路径，在此路径下建两个文件夹node_global和node_cache，现在的文件目录如下
1.1.2.4.1执行npm配置命令
说明：
注意profix对应的是nodejs的node_global目录
Cache对应的是nodejs的node_cache目录
1.1.2.4.2验证配置
使用命npmconfiggetprefix查看设置
1.1.2.5安装模块bower
1.1.2.5.1执行安装
执行命令npminstallbower-gglobal地址
1.1.2.5.2验证安装
执行bower-v，发现如下错误：
解决办法：
在系统变量path中修改路径为“E:
\01tool\node-v8.11.2-win-x64\node_global”
另外，再增加系统变量：
再次执行bower–v命令时，出现如下问题：
解决办法：
此时需将node.exe移到path设置的地址中，node_modules里的npm移到NODE_PATH设置的地址中，再执行bower-v，即可成功显示bower版本信息
步骤
把“E:
\01tool\node-v8.11.2-win-x64”目录中的“node.exe、CHANGELOG.md、LICENSE、npm、npm.cmd、npx、npx.cmd、README.md”文件剪切至“E:
\01tool\node-v8.11.2-win-x64\node_global”目录中；
再把“E:
\01tool\node-v8.11.2-win-x64\node_modules”目录中的“npm”文件夹剪切至“E:
\01tool\node-v8.11.2-win-x64\node_global\node_modules”目录
再次执行“node-v”、“npm-v”、“bower-v”命令，如下截图所示：
到此，配置完成。
1.1.2.6安装cnpm
1.1.2.6.1执行安装
在cmd命令窗口执行“npminstall-gcnpm--registry=https:
//registry.npm.taobao.org”命令，可以使用我们定制的cnpm（gzip压缩支持）命令行工具代替默认的npm，具体如下截图所示：
可以去“https:
//npm.taobao.org/”看看详细说明。
1.1.2.6.2验证安装
输入cnpm-v输入是否正常：
上面的截图为正常时出现的信息。
1.1.2.7CLI安装
1.1.2.7.1CLI全称
全局安装AngularCLI脚手架工具（只需要安装一次）
1.1.2.7.2执行安装
在cmd命令窗口执行命令“cnpminstall-g@angular/cli”，具体如下截图所示：
1.1.2.7.3验证安装
在完成上述操作后，在cmd命令窗口输入“node”命令，并回车进入编辑模式，输入以下代码测试是否能正常加载模块：
require（'express'）
假设成功，可以看到有上面截图中的输出。
假设出错，检查NODE_PATH的路径或上面的操作步骤是否都正确。
1.2VSCode使用
打开“VisualStudioCode”开发工具，在窗体中选择“查看集成终端”，如下图所示：
执行上述操作，将出现如下小窗体：
在此窗口中，可以执行命令来操作项目。
2项目实践
2.1新建项目
2.1.1命令
其中“my-app”为项目名称
2.1.2实践
2.2安装依赖
2.2.1命令
执行“cd./my_app”命令进入项目中，再执行“cnpminstall”命令安装依赖。
2.2.2实践
安装的依赖都放在工程目录下的“node_modules”文件夹中，如下截图所示：
2.3项目结构详解
2.3.1截图说明
2.3.2结构说明
文件
用途
e2e/
在e2e/下是端到端（End-to-End）测试。
它们不在src/下，是
因为端到端测试实际上和应用是相互独立的，它只适用于测试你的
应用而已。
这也就是为什么它会拥有自己的tsconfig.json。
Src
我们的项目的所有文件得放在src里面，所有的Angular组件、模板、样式、图片以及你的应用所需的任何东西都在那里。
node_modules/
Node.js创建了这个文件夹，并且把package.json中列举的所有第三方模块都放在其中。
.angular-cli.json
AngularCLI的配置文件。
在这个文件中，我们可以设置一系列默认值，还可以配置项目编译时要包含的那些文件。
要了解更多，请参阅它的官方文档。
.editorconfig
给你的编辑器看的一个简单配置文件，它用来确保参与你项目的每
个人都具有基本的编辑器配置。
大多数的编辑器都支持.editorconfig文件，详情参见http:
//editorconfig.org。
.gitignore
一个Git的配置文件，用来确保某些自动生成的文件不会被提交到源码控制系统中。
karma.conf.js
给Karma的单元测试配置，当运行ngtest时会用到它。
package.json
npm配置文件，其中列出了项目使用到的第三方依赖包。
你还可以在这里添加自己的自定义脚本。
protractor.conf.js
给Protractor使用的端到端测试配置文件，当运行nge2e的时候会用到它。
README.md
项目的基础文档，预先写入了CLI命令的信息。
别忘了用项目文
档改进它，以便每个查看此仓库的人都能据此构建出你的应用。
tsconfig.json
TypeScript编译器的配置，你的IDE会借助它来给你提供更好的帮助。
tslint.json
给TSLint和Codelyzer用的配置信息，当运行nglint时会用到。
Lint功能可以帮你保持代码风格的统一。
2.4项目启动
ngserve–open//默认端口是4200
ngserve–port4201–open//“4201”为指定启动端口号
cnpmstart//
升级会员 