angular2开发手册.docx
- 文档编号:10995360
- 上传时间:2023-02-24
- 格式:DOCX
- 页数:16
- 大小:842.02KB
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//
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- angular2 开发 手册