Angular 2 中的 @angular 是什么

Google

# Angular 2 中的 @angular

Angular是一种流行的前端框架，用于构建现代、模块化的Web应用程序。在Angular 2及以上版本中，我们经常会看到以@angular开头的模块、装饰器和类。本文将深入探讨@angular在Angular 2中的作用，并通过案例代码来演示其使用。

## Angular框架简介

首先，让我们简要了解一下Angular框架。Angular是由Google开发的一款开源前端框架，用于构建单页应用（SPA）和动态Web应用。它采用了一种组件化的架构，通过模块化和声明式的方式，使得前端开发变得更加可维护和可扩展。

## @angular的角色

在Angular 2中，@angular不仅仅是一个简单的前缀，它实际上代表了Angular框架中的一系列核心模块和功能。这些模块包括但不限于@angular/core、@angular/common、@angular/router等。

@angular/core

@angular/core是Angular的核心模块，提供了Angular应用程序的基本构建块，如组件、指令、服务等。通过引入这个模块，我们可以使用Angular框架的核心功能。

typescript
// 导入Angular核心模块
import { Component, NgModule } from '@angular/core';
// 定义一个简单的组件
@Component({
  selector: 'app-root',
  template: '<h1>Hello, Angular!</h1>',
})
export class AppComponent {}
// 定义一个简单的模块
@NgModule({
  declarations: [AppComponent],
})
export class AppModule {}

在上面的代码中，我们通过import { Component, NgModule } from '@angular/core';语句导入了@angular/core模块，并使用了其中的Component和NgModule装饰器来定义一个简单的Angular组件和模块。

@angular/common

@angular/common模块提供了一些常用的工具和指令，用于处理浏览器中的常见任务，例如URL解析、编码、日期处理等。这个模块的功能对于构建跨浏览器、可访问性良好的应用程序非常重要。

@angular/router

@angular/router模块则是Angular中用于处理导航和路由的模块。通过它，我们可以实现应用程序内部的页面导航和路由管理，让单页应用变得更加灵活和用户友好。

## 实际应用示例

现在，让我们通过一个简单的实际应用示例来演示@angular的使用。

创建一个简单的Angular组件

首先，我们创建一个简单的Angular组件，用于显示一个问候语。

typescript
// 导入Angular核心模块
import { Component } from '@angular/core';
// 定义一个问候组件
@Component({
  selector: 'app-greeting',
  template: '<h2>{{ greeting }}</h2>',
})
export class GreetingComponent {
  greeting = 'Hello, Angular!';
}

在这个组件中，我们使用了@Component装饰器来定义组件的元数据，包括选择器（selector）和模板（template）。组件类中的greeting属性用于存储问候语，它在模板中被动态绑定。

集成组件到应用模块

接下来，我们将这个组件集成到一个应用模块中。

typescript
// 导入Angular核心模块
import { NgModule } from '@angular/core';
// 导入浏览器模块，用于启动应用程序
import { BrowserModule } from '@angular/platform-browser';
// 导入我们定义的问候组件
import { GreetingComponent } from './greeting.component';
// 定义应用模块
@NgModule({
  declarations: [GreetingComponent],
  imports: [BrowserModule],
  bootstrap: [GreetingComponent], // 指定启动组件
})
export class AppModule {}

在这个模块中，我们使用了@NgModule装饰器来定义模块的元数据。其中，declarations数组包含了我们的GreetingComponent，imports数组引入了BrowserModule，并且通过bootstrap指定了启动组件。

启动应用

最后，在应用的入口文件中启动我们的Angular应用。

typescript
// 导入Angular核心模块
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
// 导入我们定义的应用模块
import { AppModule } from './app.module';
// 启动Angular应用
platformBrowserDynamic().bootstrapModule(AppModule);

通过以上示例，我们展示了如何使用@angular中的核心模块来构建一个简单的Angular应用。从导入核心模块到定义组件和模块，再到启动应用，这一系列步骤演示了@angular在Angular 2中的关键作用。

##

总体而言，@angular是Angular 2及以上版本中的一个重要标识，代表了框架的核心模块和功能。通过使用这些模块，我们能够构建强大、灵活且可维护的现代Web应用程序。在实际应用中，充分理解和使用@angular是成为一名熟练的Angular开发者的关键一步。