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

前端开发离不开的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/product/open?code=oss)开通OSS服务。OSS开通免费，有一定的免费额度，超过额度之后按量付费。

2.创建Angular应用
• 创建前端应用。打开快速开始 https://workbench.aliyun.com/app，找到Angular点击创建「创建应用」按钮。

• 云资源访问授权。如果您之前没有使用过云开发平台，会出现云资源授权管理的选项，往下拉出现直至同意授权的字样，点击「同意授权」后出现授权成功，点击进入「下一步」。

• 绑定Github账号。授权完成后选择来源仓库为Github，按照提示点击去绑定，绑定GitHub帐号，登录后并点击Authorize Aliyunworkben允许云开发平台构建、发布你的GitHub代码为可访问的网站。

• 选择fork好的“Angular”代码仓库。选择第一步中的代码仓库，主干分支，并点击下一步。主干分支一般指的是代码的master或main等分支。

填写基本信息，完成创建。填写基本信息并点击「完成」。成功后进入到应用详情和部署界面。

3.在日常环境部署
• 一键进行应用部署。在应用详情页面点击日常环境的「部署」按钮进行一键部署，部署状态变成绿色已部署以后可以点击访问部署网站查看效果。

• 访问Angular网站。日常环境的测试域名也是可以访问的，点击访问已部署网站按钮会出现一个弹出，点击弹出上的立即访问就能够访问已经部署好的站点了。在部署完成后，可以继续本地编码，并将代码push到应用的“基本信息”中对应的代码仓库内。