角 入门:初学者指南

什么是 ?为什么要在您的项目中使用它?它提供了哪些优势?以及如何开始使用 Angular?在本文中,您将找到所有答案和有用的提示,让您的旅程轻松有效。

什么是角?

它是一个基于 TypeScript 的平台,适用于开发从单一开发人员到企业级应用程序的不同复杂度的项目,包括:

  • 基于组件的框架
  • 一组集成良好且详尽的库,其中包含各种功能,例如路由、客户端-服务器通信、表单管理等。
  • 用于开发可扩展应用程序、测试和更新代码等的工具包。

根据 统计, 0.4% 的基于 JavaScript 设计的网站使用 Angular。谷歌、卫报、通用汽车、HBO、Netflix、ING、耐克、贝宝、索尼和其他组织和企业等重量级人物都在使用 Angular。

2010 年,谷歌推出了 AngularJS 作为一个用纯 JavaScript 编写的开源项目,让开发人员将基于 HTML 的文档转换为动态内容。 2014 年,创建者开始重写 AngularJS,以设计一个更强大的框架,提供新的功能和工具。

2016 年,全新版本 Angular 2 发布,并带来了许多变化:

  • 它是用 TypeScript 重写的;
  • 支持手机;
  • 架构风格切换到基于组件;
  • 它收到了一个新的内置编译器;
  • 语法已更改;
  • 应用程序大小已减小。

因此,AngularJS 和 Angular 是不同的框架。目前,有许多现代形式的 Angular 新版本,其中包括 2 到 9 版本,于 2020 年 2 月推出。 Angular 和所有其他版本(Angular 2+)比 AngularJS 有很多好处,比如更直观项目结构和编程范式、Angular CLI、更结构化的编码语言等。

角 Web 开发人员的基本技能

今天,仅仅了解编程语言是不够的。作为一个成功者 角 Web 开发人员 需要不同的技能。这是一个优秀的 Angular 开发人员构建健壮应用程序必须具备的基本硬技能列表。

  1. npm(节点包管理器) 不仅是 Node.js 开发的主要工具,也是其他开发工具。它用于安装数千个客户端 Web 开发包。
  2. 角 CLI(命令行界面) 是第一个与 npm 一起安装的软件包,它允许开发人员向新的和现有的应用程序添加新的组件、模块和服务,从而使为应用程序编写代码的过程变得更加容易和快捷。
  3. HTML 和 CSS.尽管可以使用 Angular 框架开发快速且实用的应用程序,但应用程序必须在浏览器中呈现。因此,开发人员要使用 HTML 和 CSS 构建用户界面。
  4. 角度框架.一个优秀的开发人员应该对框架有深入的了解,以便他/她可以有效地利用框架的工具和优势来简化和加快流程。
  5. 打字稿 是 JavaScript 的超集,用于编写客户端 Web 应用程序。 TypeScript 的主要特点是:
    • 增强自信地重构代码的能力,以便您可以随时随地更新和更改应用程序,而不必担心破坏任何现有功能;
    • 减少了错误,因为由于强类型化,开发团队使用了预期使用的变量和函数。
  6. RxJS 是一个为具有可观察流的反应式编程而创建的库。虽然它独立存在,但该库与 Angular 捆绑在一起。它通常用于对数据进行 HTTP 请求并为异步任务提供一致的 API。所以开发者最好熟悉这个库。
  7. Git 允许开发人员充满信心地试验新功能和编码技术。使用它,开发团队可以快速轻松地返回到之前的代码版本。这样 Git 可以帮助工程师安全地开发应用程序,而不必担心破坏现有功能。

角度元素概述

To 构建应用程序,至关重要的是将其分解为元素以了解它们如何交互,然后只做用户期望的事情。每个 Angular 应用程序都包含一组组件或模块。反过来,组件是一种特殊类型的指令,它规定了特定 UI 元素的行为。服务维护彼此的组件和后端资源的组件之间的引用。使用数据绑定,所有这些代码从模型到视图组件都实时显示。您将在下面找到代码每个部分的示例。

模块

这有点像容器和类之间的混合体。模块包含具有相同功能的类似管道、组件和指令。模块的亮点在于开发人员可以一次性导出和导入所有模块,从而使工程师能够在整个应用程序中重用模块。然而,请考虑这样一个事实,即每个组件只能是一个模块的一部分。

以下是模块的外观:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AssessmentsModule } from './assessments/assessments.module';
import { CoreModule } from './core/core.module';
import { SharedModule } from './shared/shared.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule, AssessmentsModule, CoreModule, SharedModule, FormsModule, BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

来源

成分

它是用于 Angular 应用程序的基本构建块。每个组件包括:

  • A TypeScript class with a @Component() decorator;
  • 一个 HTML 模板;
  • 样式。

所谓的视图是由特定组件控制的用户界面的一部分。当用户浏览应用程序时,组件会被创建、更新和销毁。此外,此类组件可以包含响应不同事件(例如鼠标悬停、点击等)的动态元素。

这是一个组件示例以及它的外观:

@Component({
  selector: 'app-child-one',
  templateUrl: './child-one.component.html',
  styleUrls: ['./child-one.component.scss']
})
export class ChildOneComponent{ }

来源

指令

任何 HTML 元素的行为都可以通过以下方式扩展 指令.有 2 主要类型 of directives:

  • 属性指令 allow the developers to extend the appearance or behavior of the elements inside the template. For example, NgStyle is a commonly used attribute directive that enables software engineers to change the style of several elements at once.
  • 结构指令 help developers work on the layout of the data like applying conditions or looping through it, and many more. An asterisk (*) is used before the directive name.

*ngFor and *ngIf 是常用的结构指令。

  • *ngIf 充当 if:
This element is based on the showElement condition

来源

  • *ngFor 充当循环遍历数组的 for 循环:
{{u.id}} {{u.name}} {{u.model}}

来源

服务

This is what connects components to their data source. Services are required for components to fetch data to display. Services use a dependency injection system to keep track of which classes (export class) depend on which data sources (providedIn).

下面是一个例子:

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class ExampleService {
  constructor() { }
}

来源

如何创建 Angular 应用程序

在使用 Angular 开发 Web 应用程序的第一步中,您需要安装框架和所有必需的工具。您将在下面找到有关的分步说明 如何创建一个 Angular 应用程序.

安装所有必要的工具

首先,需要 Angular CLI。它是一个必须安装的基本工具,以便您可以创建新项目、生成元素、打开文档、构建、服务、调试、部署等。但是,在安装 Angular CLI 之前,需要 Node.js 和 npm:

  1. 访问 Node.js 网站;
  2. 下载并安装包含 npm 的 Node.js。

运行以下命令以验证是否安装了 Node.js: 

node --version
npm --version

之后,运行以下命令来安装 Angular CLI:

npm install -g @angular/cli

通过运行以下命令,您将验证安装是否成功:

ng --version

使用 Angular CLI 构建应用程序

安装完成后,您可以通过运行以下命令直接生成一个新项目:

新的 

替换 `<应用程序名称>` 使用您的项目名称开始构建您的应用程序。

系统将提示您在项目中包含 Angular 路由和 CSS 格式。随意将这些作为参数传递给 `ng new` 命令。 

在本地运行 Angular 应用

点击 下载项目 在左侧菜单中下载您的文件 — StackBlitz 中的源代码。之后,您需要使用以下命令创建一个新的 Angular CLI 工作区 新的 命令,在哪里 我的项目名称 是您的项目名称:

新的 my-project-name

然后你需要更换 /源 文件夹与 /源 在新的 CLI 生成的应用程序中从 StackBlitz 下载文件夹。

使用以下 CLI 命令在本地运行应用程序:

ng serve

前往 http://本地主机:4200/ 在浏览器中查看应用程序。如果默认端口 4200 不可​​用,您可以指定另一个端口,例如:

ng serve --port 4201

您可以编辑代码并检查浏览器中自动更新的更改。按 Ctrl+c 停止 ng serve 命令。

部署你的 Angular 应用

最后一步是部署您的应用程序。有很多托管 Web 应用程序的方法以及如何做到这一点:AWS、Azure、GCP、Netlify、GitHub Pages、Firebase 托管等。此外,您可以启动 Apache 或 Nginx 服务器来托管文件。

但是,您需要将所有元素编译并打包到一个应用程序中。使用以下代码将所有需要的项目打包到一个 HTML 文件、一些 CSS 和 JavaScript 文件以及其他资产(视频、图像、GIF 等)中,并将所有这些内容上传到部署平台:

ng build --prod

之后,项目目录中的一些文件将被创建并添加到名为的文件夹中 `距离/`. 

还有一种更简单的选择方法。您可以使用使您能够使用命令的工具之一 `ng部署` 该服务将编译、构建、打包和部署您的 Angular 应用程序。这样就不需要手动上传必要的文件。

接下来要学什么 

所有这一切只是你的 Angular 之旅的开始。现在您已经熟悉了基本组件并对其工作原理有了一个大致的了解。转向更高级的概念,学习以下方面:

  • 用于改善 CRUD 应用程序用户体验的表单及其验证;
  • 用于构建单页应用程序 (SPA) 的路由支持;
  • 依赖注入自动化代码依赖注入,避免使用 main() 方法;
  • 使用 CRUD 和 API 操作。

角 入门:最后的想法

选择 Angular 来开发您的应用程序,您将获得以下优势:

  • 跨平台兼容性;
  • 应用性能高;
  • 高负载速度;
  • 干净而强大的代码;
  • 代码可重用性;
  • 轻松更新;
  • MVC架构(模型-视图-控制器);
  • 双向数据绑定;
  • 路由支持;
  • 依赖注入;
  • 表单验证等等。

然而,这不是最简单的方法。 Angular 有一个陡峭的学习曲线。因此,您应该准备好花一些时间学习该平台的功能、工具和其他选项。然而,它是一个开源平台,提供大量广泛的库。因此,这是值得的,因为 Angular 可以帮助您非常快速地构建高度可扩展且健壮的应用程序,这些应用程序可以轻松修改和更新以满足最终用户的需求。

欢迎您提出意见!

MediSign - 用于小型医疗实践的 EHR

小型医疗机构的 EHR

病历。约会。电子发票。

9 美元/月