1、angular2开发手册1 AngularJs开发1.1 开发环境搭建1.1.1 开发工具1.1.1.1 Webstorm1.1.1.2 Visual Studio Code1.1.1.2.1 下载地址1.1.1.2.2 版本包1.1.1.2.3 安装教程教程地址：1.1.1.2.4 使用教程教程地址：1.1.2 NodeJs1.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:01toolno
2、de-v8.11.2-win-x641.1.2.3.3 配置环境变量由于NodeJs非安装文件，故需要配置环境变量，把当前解压的所在路径在path中配置一下，如下截图所示：1.1.2.3.4 验证nodejs安装之后运行cmd,执行node -v 和 npm -v命令如执行结果为上图所示出现版本号，说明安装成功，若出现不是内部命令的错误，则进入Node.js安装目录，执行此命令1.1.2.4 npm配置配置npm的全局模块的存放路径以及cache的路径，我选择的路径使Node.js的安装路径，在此路径下建两个文件夹node_global 和 node_cache，现在的文件目录如下1.1.2.
3、4.1 执行npm配置命令说明：注意profix对应的是nodejs的node_global目录Cache对应的是nodejs的node_cache目录1.1.2.4.2 验证配置使用命npm config get prefix查看设置1.1.2.5 安装模块bower1.1.2.5.1 执行安装执行命令npm install bower-g global地址1.1.2.5.2 验证安装执行bower -v，发现如下错误：解决办法：在系统变量path中修改路径为“E:01toolnode-v8.11.2-win-x64node_global”另外，再增加系统变量：再次执行bower v命令时，
4、出现如下问题：解决办法：此时需将node.exe移到path设置的地址中，node_modules里的npm移到NODE_PATH设置的地址中，再执行bower -v，即可成功显示bower版本信息步骤把“E:01toolnode-v8.11.2-win-x64”目录中的“node.exe、CHANGELOG.md、LICENSE、npm、npm.cmd、npx、npx.cmd、README.md”文件剪切至“E:01toolnode-v8.11.2-win-x64node_global”目录中；再把“E:01toolnode-v8.11.2-win-x64node_modules”目录中的“
5、npm”文件夹剪切至“E:01toolnode-v8.11.2-win-x64node_globalnode_modules”目录再次执行 “node -v”、“npm -v”、“bower -v”命令，如下截图所示：到此，配置完成。1.1.2.6 安装cnpm1.1.2.6.1 执行安装在cmd命令窗口执行“npm install -g cnpm -registry=https:/registry.npm.taobao.org”命令，可以使用我们定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm ，具体如下截图所示：可以去“https:/npm.taobao.org/”看
6、看详细说明。1.1.2.6.2 验证安装输入cnpm -v输入是否正常：上面的截图为正常时出现的信息。1.1.2.7 CLI安装1.1.2.7.1 CLI全称全局安装Angular CLI 脚手架工具（只需要安装一次）1.1.2.7.2 执行安装在cmd命令窗口执行命令“cnpm install -g angular/cli”，具体如下截图所示：1.1.2.7.3 验证安装在完成上述操作后，在cmd命令窗口输入“node”命令，并回车进入编辑模式，输入以下代码测试是否能正常加载模块：require(express)假设成功，可以看到有上面截图中的输出。假设出错，检查NODE_PATH的路径或上
7、面的操作步骤是否都正确。1.2 VSCode使用打开“Visual Studio Code”开发工具，在窗体中选择“查看集成终端”，如下图所示：执行上述操作，将出现如下小窗体：在此窗口中，可以执行命令来操作项目。2 项目实践2.1 新建项目2.1.1 命令其中“my-app”为项目名称2.1.2 实践2.2 安装依赖2.2.1 命令执行“cd ./my_app”命令进入项目中，再执行“cnpm install”命令安装依赖。2.2.2 实践安装的依赖都放在工程目录下的“node_modules”文件夹中，如下截图所示：2.3 项目结构详解2.3.1 截图说明2.3.2 结构说明 文件 用途e2
8、e/在 e2e/下是端到端（End-to-End）测试。 它们不在 src/下，是因为端到端测试实际上和应用是相互独立的，它只适用于测试你的应用而已。 这也就是为什么它会拥有自己的 tsconfig.json。Src我们的项目的所有文件得放在 src 里面， 所有的 Angular 组件、模板、样式、图片以及你的应用所需的任何东西都在那里。node_modules/Node.js 创建了这个文件夹，并且把 package.json 中列举的所有第三方模块都放在其中。.angular-cli.jsonAngular CLI 的配置文件。 在这个文件中，我们可以设置一系列默认值，还可以配置项目编译
9、时要包含的那些文件。 要了解更多，请参阅它的官方文档。.editorconfig给你的编辑器看的一个简单配置文件，它用来确保参与你项目的每个人都具有基本的编辑器配置。 大多数的编辑器都支持.editorconfig 文件，详情参见 http:/editorconfig.org 。.gitignore一个 Git 的配置文件，用来确保某些自动生成的文件不会被提交到源码控制系统中。karma.conf.js给 Karma 的单元测试配置，当运行 ng test 时会用到它。package.jsonnpm 配置文件，其中列出了项目使用到的第三方依赖包。 你还可以在这里添加自己的自定义脚本。protr
10、actor.conf.js给 Protractor 使用的端到端测试配置文件，当运行 ng e2e 的时候会用到它。README.md项目的基础文档，预先写入了 CLI 命令的信息。 别忘了用项目文档改进它，以便每个查看此仓库的人都能据此构建出你的应用。tsconfig.jsonTypeScript 编译器的配置，你的 IDE 会借助它来给你提供更好的帮助。tslint.json给 TSLint 和 Codelyzer 用的配置信息，当运行 ng lint 时会用到。Lint 功能可以帮你保持代码风格的统一。2.4 项目启动ng serve open /默认端口是4200ng serve port 4201 open /“4201”为指定启动端口号cnpm start/
