1.集成开发环境
搭建开发环境是一件很麻烦的事情,请大家一定要根据我讲的这个方法来搭建这个环境。
方法一:Angular-cli(内核是webpack)
方法二:Webpack
Angular-CLI 是 Google Angular 核心团队提供的开发工具,集成了大量的 NodeJS 模块,例如:webpack,karma,asmine,typescript 编译器等。只要一条命令就能帮你自动创建项目的目录结构、自动帮你生成 Component 骨架代码并自动添加依赖、自动热加载代码、对 AngularMaterial2 组件库提供了内置支持等等,不用再一个一个去配了。
2.安装流程
安装node.js。在cmd中输入命令nod -v查看版本(注意有的模块要与之对应的版本才能兼容)
node.js有自己的包管理器npm。由于某种神奇的原因,都懂得。有些模块比如node-sass会被墙掉。没办法安装,那怎么办呢?
有个东西叫cnpm,是淘宝的人提供的一个npm的镜像。每10分钟就和官方版本同步一次。服务器是在国内的,不用担心速度和被墙的问题。
>通过这条命令安装cnpm:
npm install -g cnpm
-g是global装在全局空间,路径是C:\Users\ksqb0\AppData\Roaming\npm
3.安装angular/cli
输入cnpm install -g @angular/cli。如果要更新cli的版本,卸载npm uninstall -g @angular/cli,再重新安装。
输入ng查看是否安装成功,它会告诉你很多命令的用法。ng version查看版本。
通过CLI,你可以创建、开发、测试、构建项目,而不需要额外的依赖。它封装了实现细节,如果是新手,你完全不需要懂Webpack,也不需要自己写构建脚本。
4.启动项目
选择指定路径创建新项目ng new MyProject。创建完之后它会自动生成目录结构,根组件,package.json里的依赖的模块。
cd到项目目录,cnpm install。cnpm装的包它是会读到目录下的package.json,所以不用-g,所依赖的包装在项目目录node_modules的文件夹里。
输入ng serve启动。这样在4200端口就有一个轻量级开发状态的http serve。打开浏览器输入localhost:4200打开
5.常见问题
为什么用cnpm安装?
原生npm的安装需要你的机器有python的环境,然后可能依赖于Windows API。node-sass的包被墙。node-gyp编译错误等一些大堆的问题。
关于目录结构
命令行工具是按照一定的规则生成文件和目录,如果改变文件的位置或重命名文件,有可能导致其他的功能失效。除非你明确的知道你要干什么,否则就不要改这些文件。
6.扩展思考
项目目录每一层都生成了什么:
e2e:端到端的测试目录
karma.conf.js:单元测试执行器
src:代码目录
angular-cli.json:这是angular命令行工具的配置文件
package.json:npm的配置文件,列明了当前应用所使用到的第三方依赖包。
src目录:
app:包含项目的组件和模块
assets:存放静态资源,比如图片
environment:环境配置文件
index.html:根html
main.ts:脚本执行的入口点,通过这个文件启动项目
polyfills.ts:导入一些必要的库,用来兼容老版本浏览器
style.css:全局样式
app目录:一个angular程序需要一个模块和一个组件
app.component.ts:组件,整个应用的基础
app.module.ts:模块