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/ ，一个非常简单站点诞生了。
网友评论