Angular 入门

Angular （通常称为Angular 2+或Angular 2）是一个基于 TypeScript 的开源前端 Web 框架，由 Google 的 Angular 团队以及个人和公司社区领导，以解决所有问题。构建复杂 Web 应用程序时开发人员工作流程的一部分。Angular 是来自构建 AngularJS的同一团队的完全重写。 ¹

该框架由几个库组成，其中一些是核心的（ 例如 @ angular / core ）和一些可选的（ @ angular / animations ）。

你可以通过使用 Angularized 标记编写 HTML 模板 ，编写组件类来管理这些模板，在服务中添加应用程序逻辑以及在模块中装箱组件和服务来编写 Angular 应用程序。

然后，通过启动应用程序自举的根模块。Angular 接管，在浏览器中显示你的应用程序内容，并根据你提供的说明响应用户交互。

可以说，开发 Angular 应用程序的最基本部分是组件。组件是 HTML 模板和控制屏幕一部分的组件类的组合。以下是显示简单字符串的组件示例：

SRC /应用程序/ app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent {
    name = 'Angular';
}

每个组件都以 @Component 装饰器函数开始，该函数接受元数据对象。元数据对象描述了 HTML 模板和组件类如何协同工作。

selector 属性告诉 Angular 在 index.html 文件中的自定义 <my-app> 标记内显示该组件。

index.html（在 body 标签内）

<my-app>Loading AppComponent content here ...</my-app>

template 属性在 <h1> 标头内定义了一条消息。消息以 Hello 开头，以 {{name}} 结束，{{name}} 是一个 Angular 插值绑定表达式。在运行时，Angular 将 {{name}} 替换为组件的 name 属性的值。插值绑定是你将在本文档中发现的众多 Angular 功能之一。在示例中，将组件类的 name 属性从'Angular'更改为'World'，看看会发生什么。

这个例子是用 TypeScript 编写的，它是 JavaScript 的超集。Angular 使用 TypeScript，因为它的类型可以通过工具轻松支持开发人员的工作效率。此外，几乎所有支持都适用于 TypeScript ，因此使用纯 JavaScript 编写应用程序将很困难。但是，在 JavaScript 中编写 Angular 代码是可能的; 本指南解释了如何。

有关 Angular 体系结构的更多信息，请访问 此处