Skip to main content

Angular 简介

什么是 Angular.js？​

Angular.js 是 Google 开发的一个前端框架，主要用于构建动态的单页应用（SPA），采用 MVC 设计模式，提供数据绑定和依赖注入功能。

info

Angular.js 适用于构建复杂的 Web 应用，能够提升开发效率和可维护性。

Angular.js 主要应用场景​

领域说明主要库/框架
单页应用（SPA）构建前端动态页面，优化用户体验Angular Router
组件化开发复用 UI 组件，提高开发效率Angular Material, NG-Zorro
服务器端渲染（SSR）提升 SEO 和首屏加载速度Angular Universal
移动端开发构建跨平台移动应用Ionic

Angular.js 代码示例​

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  </head>
  <body>
    <div ng-controller="myController">
      <h1>{{ message }}</h1>
    </div>

    <script>
      var app = angular.module("myApp", []);
      app.controller("myController", function ($scope) {
        $scope.message = "Hello, Angular.js!";
      });
    </script>
  </body>
</html>

Angular 组件示例​

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

@Component({
  selector: "app-button",
  template: '<button (click)="handleClick()">{{ label }}</button>',
})
export class ButtonComponent {
  label: string = "Click me";

  handleClick() {
    alert("Button clicked!");
  }
}

Angular 路由示例​

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { HomeComponent } from "./home.component";
import { AboutComponent } from "./about.component";

const routes: Routes = [
  { path: "", component: HomeComponent },
  { path: "about", component: AboutComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

状态管理示例（NgRx）​

import { createReducer, on, createAction, createSelector } from "@ngrx/store";

export const increment = createAction("[Counter] Increment");

export interface CounterState {
  count: number;
}

export const initialState: CounterState = {
  count: 0,
};

export const counterReducer = createReducer(
  initialState,
  on(increment, (state) => ({ count: state.count + 1 }))
);

服务器端渲染（SSR）示例（Angular Universal）​

使用 Angular Universal 进行 SSR
import { NgModule } from "@angular/core";
import { ServerModule } from "@angular/platform-server";
import { AppModule } from "./app.module";
import { AppComponent } from "./app.component";

@NgModule({
  imports: [AppModule, ServerModule],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

结论​

Angular.js 是一个功能强大的前端框架，适用于单页应用、企业级应用和服务器端渲染等多个场景。其组件化设计和丰富的生态系统使其成为开发者的首选。

更多 Angular 资源