如何创建一个angular8的应用

2019-07-11  本文已影响0人  elef

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

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

为什么要使用 Angular

Angular CLI 是什么?

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

安装前提

最新的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/ ,一个非常简单站点诞生了。

上一篇下一篇

猜你喜欢

热点阅读