前端开发离不开的 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 开明收费，有肯定的收费额度，超过额度之后按量付费。

2. 创立 Angular 利用
• 创立前端利用。关上疾速开始 https://workbench.aliyun.com/app，找到 Angular 点击创立「创立利用」按钮。

• 云资源拜访受权。如果您之前没有应用过云开发平台，会呈现云资源受权治理的选项，往下拉呈现直至批准受权的字样，点击「批准受权」后呈现受权胜利，点击进入「下一步」。

• 绑定 Github 账号。受权实现后抉择起源仓库为 Github，依照提醒点击去绑定，绑定 GitHub 帐号，登录后并点击 Authorize Aliyunworkben 容许云开发平台构建、公布你的 GitHub 代码为可拜访的网站。

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

填写根本信息，实现创立。填写根本信息并点击「实现」。胜利后进入到利用详情和部署界面。

3. 在日常环境部署
• 一键进行利用部署。在利用详情页面点击日常环境的「部署」按钮进行一键部署，部署状态变成绿色已部署当前能够点击拜访部署网站查看成果。

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