创建第一个Angular应用的正确姿势

继承薄雾
• 阅读 786

前端开发离不开的Angular

作为Google公司提供的一套开源的项目框架,Angular的模版功能强大且丰富,是一个比较完善的前端框架,包含服务,模版,数据双向绑定,模版化,路由,过滤器,自定义指令,依赖注入等所有功能,ng模块化比较大胆的引入了Java的一些东西(依赖注入),能够很容易的写出可复用的代码,对于敏捷开发的团队来说非常有帮助。

同时该工具的核心功能就是对现有HTML编码以指令方式进行扩展,并使扩展后的HTML编码可以通过使用元素声明的方式来构建动态内容。因此,这样的扩展具有划时代的意义,这也是Angular框架自诞生起就备受关注的重要原因。

在搭建Angular框架之前,让我们先来了解一下这个前端框架的特性和优势,首先Angular会把你的模版转换成代码,针对现代JavaScript虚拟机进行高度优化,轻松获得框架提供的高生产率,同时也可以借助新的组件路由器,Angular可以实现快速加载,自动代码拆分机制可以让用户仅仅加载那些用于渲染所请求页面的代码,提升速度与性能。

了解了特性和性能,马上来看看如何具体进行前端框架搭建吧!

一、搭建本地开发环境
• Node.js Angular 需要 Node.js 的活跃 LTS 版或维护期 LTS版。关于具体版本需求,参阅 package.json 文件中的 engines。要了解如何安装 Node.js,参阅 nodejs.org。 如果你不确定系统中正在运行的 Node.js 版本是什么,请在终端窗口中运行 node -v。

• npm 包管理器Angular、Angular CLI 以及 Angular 应用都要依赖 npm 包来实现很多特性和功能。要下载并安装 npm 包,你需要一个 npm 包管理器。本指南使用 npm 客户端命令行界面,该界面默认安装在 Node.js。要检查你是否安装了 npm 客户端,请在终端窗口中运行 npm -v 。

• 你可以使用 Angular CLI 来创建项目,生成应用和库代码,以及执行各种持续开发任务,比如测试、打包和部署。
要使用 npm 命令安装 CLI,请打开终端/控制台窗口,输入如下命令:

npm inatll -g @angula

二、创建新的工作区和一个初始应用
Angular 的工作区就是你开发应用所在的上下文环境。一个工作区包含一个或多个项目所需的文件。 每个项目都是一组由应用、库或端到端(e2e)测试组成的文件集合。 在本教程中,你将创建一个新的工作区。
要想创建一个新的工作区和一个初始应用项目,需要:

  1. 确保你现在没有位于 Angular 工作区的文件夹中。例如,如果你之前已经创建过 "快速上手" 工作区,请回到其父目录中。
  2. 运行 CLI 命令 ng new,空间名请使用 angular-tour-of-heroes,如下所示:

     ng new angular-tour-of-heroes
    
  3. ng new 命令会提示你输入要在初始应用项目中包含哪些特性,请按 Enter 或 Return 键接受其默认值。

Angular CLI 会安装必要的 Angular npm 包和其它依赖项。这可能需要几分钟。

它还会创建下列工作区和初始项目的文件:
• 新的工作区,其根目录名叫 angular-tour-of-heroes。
• 一个最初的骨架应用项目,位于 src/app 子目录下。
• 相关的配置文件。
初始应用项目是一个简单的 "欢迎" 应用,随时可以运行它。

三、启动应用服务器
进入工作区目录,并启动这个应用。

cd angular-tour-of-heroes
ng serve --open

ng serve 命令会构建本应用、启动开发服务器、监听源文件,并且当那些文件发生变化时重新构建本应用。
--open 标志会打开浏览器,并访问 http://localhost:4200/

你会发现本应用正运行在浏览器中。

参考文献:Angular官网

云平台一键部署Angular

1.创建环境
想要一键部署Angular,需要以下账号和服务:
• Github账号 (https://github.com/),
• 阿里云账号,并使用阿里云账号登录云开发平台 (https://workbench.aliyun.com/),为保证最好的使用体验,请使用Chrome浏览器。开通OSS服务。
• 未开通阿里云OSS的用户,点击链接 (https://workbench.aliyun.com/...)开通OSS服务。OSS开通免费,有一定的免费额度,超过额度之后按量付费。
创建第一个Angular应用的正确姿势
2.创建Angular应用
• 创建前端应用。打开快速开始 https://workbench.aliyun.com/app,找到Angular点击创建「创建应用」按钮。
创建第一个Angular应用的正确姿势
• 云资源访问授权。如果您之前没有使用过云开发平台,会出现云资源授权管理的选项,往下拉出现直至同意授权的字样,点击「同意授权」后出现授权成功,点击进入「下一步」。
创建第一个Angular应用的正确姿势
• 绑定Github账号。授权完成后选择来源仓库为Github,按照提示点击去绑定,绑定GitHub帐号,登录后并点击Authorize Aliyunworkben允许云开发平台构建、发布你的GitHub代码为可访问的网站。
创建第一个Angular应用的正确姿势
• 选择fork好的“Angular”代码仓库。选择第一步中的代码仓库,主干分支,并点击下一步。主干分支一般指的是代码的master或main等分支。
创建第一个Angular应用的正确姿势
填写基本信息,完成创建。填写基本信息并点击「完成」。成功后进入到应用详情和部署界面。
创建第一个Angular应用的正确姿势

3.在日常环境部署
• 一键进行应用部署。在应用详情页面点击日常环境的「部署」按钮进行一键部署,部署状态变成绿色已部署以后可以点击访问部署网站查看效果。
创建第一个Angular应用的正确姿势
• 访问Angular网站。日常环境的测试域名也是可以访问的,点击访问已部署网站按钮会出现一个弹出,点击弹出上的立即访问就能够访问已经部署好的站点了。在部署完成后,可以继续本地编码,并将代码push到应用的“基本信息”中对应的代码仓库内。
创建第一个Angular应用的正确姿势

点赞
收藏
评论区
推荐文章
blmius blmius
4年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Wesley13 Wesley13
4年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Easter79 Easter79
4年前
sql注入
反引号是个比较特别的字符,下面记录下怎么利用0x00SQL注入反引号可利用在分隔符及注释作用,不过使用范围只于表名、数据库名、字段名、起别名这些场景,下面具体说下1)表名payload:select\from\users\whereuser\_id1limit0,1;!(https://o
Peter20 Peter20
4年前
mysql中like用法
like的通配符有两种%(百分号):代表零个、一个或者多个字符。\(下划线):代表一个数字或者字符。1\.name以"李"开头wherenamelike'李%'2\.name中包含"云",“云”可以在任何位置wherenamelike'%云%'3\.第二个和第三个字符是0的值wheresalarylike'\00%'4\
Wesley13 Wesley13
4年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Wesley13 Wesley13
4年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
4年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Wesley13 Wesley13
4年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Python进阶者 Python进阶者
2年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这