如何创建一个angular8的应用

Angular团队现在正式发布了最新的Angular版本8。Angular 8增加了很多新特性，缩短了应用在现代浏览器上的启动时间，支持更多 Web 标准。了解更多推荐阅读在 Angular 8 中，我们可以期待些什么。

AnguarJS发布于2010年，虽然到今天为止依然非常有用，但是已经不再被推荐，建议更新到 Angular。
Angular指的是版本 2+。当前已经是版本8，但是版本2到版本8是同一个框架，只是在一个框架思路下的变动，变得更好，更小和更快。

为什么要使用 Angular

更好的前端组织架构（组件，模块，服务）
相当高效并且功能齐全
一体化的解决方案（路由，HTTP,RxJS，等等）
创建强大的SPA应用
MVC - 模型，视图，控制器的设计模式
TypeScript
非常棒的CLI

Angular CLI 是什么？

创建angular应用前，需要首先学习下 cli 的使用方法。
Angular CLI 是一个命令行接口(Command Line Interface)，用于实现自动化开发工作流程。它允许你做以下这些事情：

创建一个新的 Angular 应用程序
运行带有 LiveReload 支持的开发服务器，以便在开发过程中预览应用程序
添加功能到现有的 Angular 应用程序
运行应用程序的单元测试
运行应用程序的端到端 (E2E) 测试
构建应用程序

安装前提

最新的Angular CLI 要求node版本高于 12 ,npm版本高于 5.5.1。
若你本机已经安装 Node.js 和 npm，你可以通过运行以下命令，确认一下当前环境信息：

$ node - v # 显示当前Node.js的版本
$ npm -v # 显示当前npm的版本

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：(1) 允许用户从NPM服务器下载别人编写的第三方包到本地使用。(2) 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。(3) 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

安装 Angular CLI

npm install -g @angular/cli
如果运行npm太慢，建议先安装cnpm,然后运行 cnpm install -g @angular/cli
验证是否成功安装 Angular CLI，可在命令行运行：
ng version

升级 cli,如果之前您已经安装过 angular cli,但不是最新版本，需要先进行升级

用户可以访问 update.angular.io 以获取新版详细信息和升级指导，大多数开发者可以使用以下命令开始更新：
ng update @angular/cli @angular/core

CLI 常用命令

用户可以访问 cli.angular.io 以获取CLI的常用使用方法。
ng new
Angular CLI 创建一个应用，开箱即用。
ng generate
生成组件、路由、服务等。
ng serve
本地运行

创建第一个Angular8应用

暂且命名第一个应用名为ClientApp,运行命令
ng new ClientApp

dai@Inspiron:~/project2019/angular-demo$ ng new ClientApp
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

创建成功后，运行ng serve

dai@Inspiron:~/project2019/angular-demo/ClientApp/src/app$ ng serve
 10% building 3/3 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/                                                                                                                                  
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to //index.html
                                                                                                                                                                                                         
chunk {main} main.js, main.js.map (main) 11.5 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 251 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.09 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.3 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 4.07 MB [initial] [rendered]
Date: 2019-07-11T08:21:58.263Z - Hash: 5f058da26bf210b1aa4e - Time: 7046ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Compiled successfully.

站点开启成功，在浏览器中输入 http://localhost:4200/ ，一个非常简单站点诞生了。