如何创建一个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/ ,一个非常简单站点诞生了。