Angular-CLI 官网：https://cli.angular.io/

目录

基于 Node.js 的开发工具

从上到下从左到右依次是：
browserify 比较老牌的一个模块化工具，现在用的不多了
express 一个 webframework Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架，它提供一系列强大的特性，帮助你创建各种 Web 和移动设备应用。
pm2 豆瓣介绍 是用来管理 node 进程的
grunt-cli 比较老牌的一个自动化构建工具 grunt 的命令行工具
npm nodejs 的包管理工具，所有的包都在这上面
karma 是用来做自动化测试的 详细的使用参考日志
bower 一个用来管理包的 包管理、升级都通过这个
cordova 使用HTML, CSS & JS进行移动App开发多平台共用一套代码 用来做混合开发的
coffee-script 这个是在 ES6 出来之前的一个所谓的代替 JS 写起来更加的简洁的基于大型应用的一个小巧语言
gulp 基于 grunt 之后又出来的一个基于流式处理的自动化构建工具
forever 是用来管理 nodejs 进程热启的一个包
statsd 用来处理网络请求监控的
grunt 比较老牌的一个自动化构建工具
less 是一款最早的人可以使 css 像 js 那样书写的一款工具
yo yeoman 的命令行 yeoman 是一款现代应用程序网站的搭建工具

Angular-CLI 具体介绍

Angular-CLI 集成开发环境

Angular-CLI 具体安装配置

• 开始在命令行中进行安装配置

参考：https://github.com/angular/angular-cli#installation

//全局安装 angular-cli
npm install -g @angular/cli
//查看当前 angular-cli 版本信息
ng --version
//查看所有的命令
ng help
//进入桌面
cd Desktop
//创建一个 demo 项目  过程需要等待几分钟
ng new testapp
//进入项目文件夹中
cd testapp
//编译项目代码
ng serve

• 编译成功之后在浏览器中直接访问 http://localhost:4200/ 端口即可

• 可以看到在加载的文件中看到有的文件特别的大

• 这样每次加载的时候会浪费很多的时间，这个时候使用下面的命令即可 ``` //编译为生产环境使用的代码，这个会将源代码都压缩一遍 ng serve —prod -aot

这个时候再刷新页面，加载时间明显比之前快了很多，静态资源文件都加了 MD5 的戳，`vendor` 这个开发环境需要用到的特别大的文件也没再加载了
> ![image.png](http://upload-images.jianshu.io/upload_images/9064013-fad9fdb4b50f3609.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 在 src -> index.html 代码中引用的 `<app-root>` 模块中间加一个文字 “loading......”
> ![image.png](http://upload-images.jianshu.io/upload_images/9064013-12b543fe55fc8db4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<br />
这样在首次加载这个 index.html 页面时这个文字也会被加载出来，之后刷新页面因为缓存的原因就不会加载出来了，但是新窗口重新打开也会出现
- 可以新打开一个命令行窗口，进入项目文件夹下，使用下面的命令可以自动创建一套页面所需的 html css ts 文件

ng g c User

> ![image.png](http://upload-images.jianshu.io/upload_images/9064013-0689ad608010cf06.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<br />
![image.png](http://upload-images.jianshu.io/upload_images/9064013-8e9812a9e64a84cf.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<br />
之后就可以在项目中实现组件  `<app-user>` 的相互引用了
- 上面是整个的简单的方法，整个项目写完之后只要使用下面的命令行就可以发布上线了

ng build —prod aot

> ![image.png](http://upload-images.jianshu.io/upload_images/9064013-acc058f5f2c46ca3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<br />
整个生成的是 `dist` 文件夹 里面的静态资源都已经是压缩打包之后可以上线的了
- 这里我在命令行中使用下面的命令起了个服务，进行了测试访问

//查看目录下的所有文件 ls //进入项目文件夹中 cd dist //起一个服务 http-server

`` 在浏览器至中访问端口http://192.168.8.16:8080` 显示如下已经成功了

Angular Material — Angular 辅助使用的一个 UI 界面库

官网：https://material.angularjs.org/latest/