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 的开发范式，不仅能提升开发效率,还能为后续的功能扩展和性能优化奠定坚实基础。