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

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

前端开发离不开的Angular

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

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

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

一、搭建本地开发环境

Node.jsAngular 需要 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）测试组成的文件集合。 在本教程中，你将创建一个新的工作区。

要想创建一个新的工作区和一个初始应用项目，需要：

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

ng new angular-tour-of-heroes

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

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

它还会创建下列工作区和初始项目的文件：

新的工作区，其根目录名叫 angular-tour-of-heroes。一个最初的骨架应用项目，位于 src/app 子目录下。相关的配置文件。

初始应用项目是一个简单的 "欢迎" 应用，随时可以运行它。

三、启动应用服务器

进入工作区目录，并启动这个应用。

cd angular-tour-of-heroesng serve --open

ng serve 命令会构建本应用、启动开发服务器、监听源文件，并且当那些文件发生变化时重新构建本应用。

--open 标志会打开浏览器，并访问 http://localhost:4200/。

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

参考文献：​​Angular官网​​

云平台一键部署Angular

作为Angular开发者的你，云开发平台为你提供了一站式，全云端的开发平台，让你可以打开浏览器就完成开发，调试，上线，同时云开发平台底层调用的是阿里云集团Serverless产品，可以实现低门槛开发，部署，调试，降低开发上手成本，让Angular应用可以一键快速部署！

1.创建环境

想要一键部署Angular，需要以下账号和服务：

2.创建Angular应用

3.在日常环境部署

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。