Angular2js写法与Angular1.x有何核心差异？

Angular2JS 写法详解

Angular 作为前端开发的主流框架之一，其 Angular2 版本（通常简称为 Angular）相较于 AngularJS（Angular 1.x）进行了全面的重构，无论是架构设计、开发模式还是性能优化，都带来了显著的改进，本文将从核心概念、组件开发、数据绑定、依赖载入、路由配置及服务封装六个方面，详细介绍 Angular2JS 的写法，帮助开发者快速掌握 Angular 的开发范式。

核心概念：模块与组件化开发

Angular 采用模块化（Module）和组件化（Component）的开发思想，这与 AngularJS 的指令（Directive）和模块（Module）有本质区别，在 Angular 中，一个应用由多个模块组成，每个模块负责特定的功能，而模块则由组件、服务、路由等构成。

模块定义：通过 @NgModule 装饰器定义模块，需声明 declarations（组件、指令、管道）、imports（依赖模块）、providers（服务）和 bootstrap（根组件）。

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

组件定义：组件是 Angular 的核心，通过 @Component 装饰器指定模板（template或templateUrl）、样式（styles或styleUrls）和选择器（selector）。

import { Component } from '@angular/core'; @Component({ selector: 'app-user', template: `<h1>{{ name }}</h1>`, styles: [`h1 { color: blue; }`] }) export class UserComponent { name = 'Angular Developer'; }

数据绑定：单向与双向绑定的实践

Angular 提供了三种数据绑定方式，相较于 AngularJS 的双向绑定（ng-model），Angular 更强调单向数据流，以提高应用的可预测性和性能。

1. 插值绑定（{{}}）：用于组件属性到模板的显示，{{ name }}。
2. 属性绑定（[]）：将组件数据绑定到 HTML 元素的属性，[src]="imageUrl"。
3. 事件绑定（()）：响应用户事件，(click)="onClick()"。
4. 双向绑定（[(ngModel)]）：需导入 FormsModule，<input [(ngModel)]="name">。

对比 AngularJS：AngularJS 的 ng-model 是双向绑定的核心，而 Angular 需要显式引入 FormsModule 并使用 [(ngModel)]，这有助于开发者更清晰地控制数据流向。

依赖载入：服务的优雅封装

依赖载入（DI）是 Angular 的核心特性之一，相较于 AngularJS 的 $inject 手动载入，Angular 通过构造函数载入，代码更简洁且类型安全。

服务定义：通过 @Injectable 装饰器标记服务，并在模块的 providers 中注册。

import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class DataService { getData() { return 'Data from Service'; } }

服务使用：在组件中通过构造函数载入服务：

export class AppComponent { constructor(private dataService: DataService) { } data = this.dataService.getData(); }

优势：Angular 的 DI 支持树摇（Tree-shaking），未使用的服务不会被打包到最终代码中，有效减少应用体积。

路由配置：单页应用的导航管理

Angular 的路由模块（RouterModule）功能强大，支持懒加载、路由守卫等高级特性，相较于 AngularJS 的 $routeProvider，配置更灵活。

基础路由配置：

import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './home/home.component'; import { AboutComponent } from './about/about.component'; const routes: Routes = [ { path: 'home', component: HomeComponent }, { path: 'about', component: AboutComponent }, { path: '', redirectTo: '/home', pathMatch: 'full' } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

懒加载路由：通过 loadChildren 实现按需加载，提升首屏性能：

{ path: 'lazy', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) }

表单处理：模板驱动与响应式表单

Angular 提供了两种表单开发模式：模板驱动（Template-driven）和响应式（Reactive），模板驱动类似于 AngularJS 的表单开发，而响应式表单则更灵活，适合复杂场景。

模板驱动表单：需导入 FormsModule，通过 ngModel 和 模板引用变量实现：

<form #f="ngForm" (ngSubmit)="onSubmit(f)"> <input name="name" ngModel required> <button type="submit">Submit</button> </form>

响应式表单：通过 FormGroup 和 FormControl 动态构建表单：

import { FormBuilder, FormGroup } from '@angular/forms'; export class ReactiveFormComponent { form: FormGroup; constructor(private fb: FormBuilder) { this.form = fb.group({ name: ['', Validators.required] }); } onSubmit() { console.log(this.form.value); } }

HTTP 请求：与后端的数据交互

Angular 的 HttpClient 模块（取代 AngularJS 的 $http）提供了更强大的 HTTP 请求能力，支持拦截器、响应式编程等特性。

配置 HttpClient：

import { HttpClientModule } from '@angular/common/http'; @NgModule({ imports: [HttpClientModule] }) export class AppModule { }

发送请求：

import { HttpClient } from '@angular/common/http'; @Injectable() export class ApiService { constructor(private http: HttpClient) { } getData() { return this.http.get('https://api.example.com/data'); } }

拦截器：通过 HttpInterceptor 统一处理请求/响应，例如添加 Token：

@Injectable() export class AuthInterceptor implements HttpInterceptor { intercept(req: HttpRequest<any>, next: HttpHandler) { const authReq = req.clone({ headers: req.headers.set('Authorization', 'Token') }); return next.handle(authReq); } }

Angular2JS 的写法相较于 AngularJS 更注重类型安全、模块化和性能优化，通过组件化开发、数据绑定、依赖载入、路由配置、表单处理和 HTTP 请求六大核心模块，开发者可以构建出结构清晰、可维护性强的单页应用，掌握 Angular 的开发范式，不仅能提升开发效率,还能为后续的功能扩展和性能优化奠定坚实基础。