首页
/ 正文

AngularJS 简介（建议收藏）

更新时间: 2025-04-01 05:45:21

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;

《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前，星球内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习，欢迎点击围观

前言：为什么需要 AngularJS？

在前端开发领域，AngularJS 是一个具有里程碑意义的框架。它由 Google 维护，自 2010 年发布以来，凭借其声明式语法和模块化设计，迅速成为构建单页应用（SPA）的首选工具。对于编程初学者和中级开发者而言，掌握 AngularJS 的核心概念，不仅能提升开发效率，还能深入理解现代前端架构的设计理念。

AngularJS 的核心价值在于它将“数据驱动视图”的思想推向了新高度。想象你正在搭建一座积木城堡：传统的前端开发需要手动操作 DOM，而 AngularJS 则像一套智能积木系统，它能根据数据自动调整视图，让开发者更专注于业务逻辑而非繁琐的 DOM 操作。这种“乐高式”的开发体验，正是 AngularJS 吸引开发者的重要原因。

核心概念：理解 AngularJS 的基石

1. 模型-视图-控制器（MVC）模式

AngularJS 采用 MVC 架构，但其实现方式与传统 MVC 有所不同。在这里：

Model：由 JavaScript 对象组成，代表应用的数据状态。
View：通过 HTML 模板展示数据，响应用户输入。
Controller：负责协调 Model 和 View 的交互。

比喻：可以把 Model 想象成餐厅的菜单（数据），View 是餐桌（展示菜品），而 Controller 就是服务员，根据顾客（用户）的需求在菜单和餐桌之间传递信息。

2. 数据绑定（Data Binding）

数据绑定是 AngularJS 的灵魂。它分为两种类型：

单向绑定：仅将数据从 Model 传递到 View（如 {{ expression }}）。
双向绑定：数据在 Model 和 View 之间同步更新（如 ng-model 指令）。

代码示例：

<!-- 单向绑定 -->
<div>当前计数：{{ count }}</div>

<!-- 双向绑定 -->
<input type="number" ng-model="count">

3. 指令（Directives）

指令是 AngularJS 的扩展机制，通过自定义 HTML 标签或属性来增强功能。内置指令如 ng-app、ng-controller 和 ng-repeat，开发者也可以创建自定义指令。

比喻：指令就像乐高积木的拼插接口，每个指令定义了一组规则，允许开发者像搭积木一样组合功能模块。

核心模块与基础配置

AngularJS 的模块（Module）是功能的组织单元。每个模块包含控制器、服务、指令等组件。创建模块的基本语法如下：

var app = angular.module('myApp', []);

模块的依赖管理

当多个模块需要协作时，可以通过依赖注入（Dependency Injection）关联模块：

var featureModule = angular.module('myFeature', []);
var mainApp = angular.module('myApp', ['myFeature']);

表格：常用模块与功能

模块名称	功能描述
`ng`	AngularJS 核心功能
`ngRoute`	路由系统（SPA 导航）
`ngResource`	简化 RESTful API 调用
`ngAnimate`	集成 CSS3 动画效果

数据绑定的深度解析

单向绑定：从数据到视图

单向绑定通过表达式 {{ }} 实现。当 Model 数据变化时，AngularJS 的脏检查（Digest Cycle）机制会自动更新视图：

// 控制器代码
app.controller('CounterCtrl', function($scope) {
  $scope.count = 0;
  $scope.increment = function() {
    $scope.count++;
  };
});

<!-- 视图代码 -->
<div>当前计数：{{ count }}</div>
<button ng-click="increment()">+1</button>

双向绑定：表单与数据的实时同步

ng-model 指令实现了双向绑定。例如，在表单输入框中，用户输入的内容会实时反映到 $scope 对象：

<input type="text" ng-model="user.name">
<p>用户名：{{ user.name }}</p>

指令系统：扩展 AngularJS 的魔法

内置指令的典型用法

1. `ng-repeat`：循环渲染列表

<ul>
  <li ng-repeat="item in items">
    {{ item.name }} - {{ item.price | currency }}
  </li>
</ul>

2. `ng-if`/`ng-show`：条件渲染

<!-- 根据条件完全移除或隐藏元素 -->
<div ng-if="isLoggedIn">欢迎回来！</div>
<div ng-show="isLoading">加载中...</div>

3. `ng-include`：模块化视图

<!-- 引入外部模板文件 -->
<div ng-include="'header.html'"></div>

自定义指令：扩展功能的终极武器

自定义指令的结构如下：

app.directive('customCounter', function() {
  return {
    restrict: 'E', // 指令类型：Element
    scope: {
      initialCount: '@' // 单向绑定参数
    },
    template: '<div>{{ count }}</div>',
    link: function(scope, element, attrs) {
      scope.count = parseInt(scope.initialCount, 10);
      setInterval(() => scope.count++, 1000);
    }
  };
});

使用时只需在 HTML 中添加：

<custom-counter initial-count="5"></custom-counter>

依赖注入（DI）：模块化的秘密武器

AngularJS 的依赖注入机制允许组件通过构造函数声明依赖项，避免了全局变量的污染。例如：

app.controller('UserServiceCtrl', function($http, $timeout) {
  // $http 和 $timeout 是 AngularJS 内置服务
  this.fetchData = function() {
    $http.get('/api/data').then(response => {
      this.data = response.data;
      $timeout(() => this.isLoading = false, 500);
    });
  };
});

依赖注入的三大优势：

解耦：组件无需直接创建依赖，而是通过注入获取。
可测试性：通过模拟（Mock）注入的服务，轻松编写单元测试。
模块化：依赖关系显式声明，便于团队协作。

服务与工厂：共享数据与逻辑

服务（Service）和工厂（Factory）是 AngularJS 中共享数据或功能的核心机制。它们的区别在于创建方式：

服务（Service）

app.service('DataService', function() {
  var data = [];

  this.addData = function(item) {
    data.push(item);
  };

  this.getItems = function() {
    return data;
  };
});

工厂（Factory）

app.factory('ApiFactory', function($http) {
  return {
    fetchUsers: function() {
      return $http.get('/api/users');
    },
    saveUser: function(user) {
      return $http.post('/api/users', user);
    }
  };
});

使用场景对比：

Service：适合需要方法和状态管理的场景。
Factory：适合返回对象或函数的场景，常用于 API 封装。

路由系统：构建单页应用（SPA）

AngularJS 的路由模块 ngRoute 允许通过 URL 参数控制视图。基本配置如下：

app.config(function($routeProvider) {
  $routeProvider
    .when('/home', {
      templateUrl: 'home.html',
      controller: 'HomeController'
    })
    .when('/user/:id', {
      templateUrl: 'user.html',
      controller: 'UserController'
    })
    .otherwise({ redirectTo: '/home' });
});

在视图中使用 <ng-view> 指令作为路由容器：

<div ng-view></div>

案例：用户详情页

当访问 /user/123 时，UserController 可以通过 $routeParams 获取用户 ID：

app.controller('UserController', function($scope, $routeParams) {
  $scope.userId = $routeParams.id;
  // 调用 API 获取用户数据
});

实战案例：构建一个待办事项应用

1. 项目结构

angular-todo/
├── index.html
├── app.js
├── controllers/
│   └── TodoCtrl.js
├── services/
│   └── TodoService.js
└── views/
    └── todo-list.html

2. 核心代码实现

app.js：模块与路由配置

var app = angular.module('TodoApp', ['ngRoute']);

app.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'views/todo-list.html',
      controller: 'TodoCtrl'
    })
    .otherwise({ redirectTo: '/' });
});

controllers/TodoCtrl.js：控制器逻辑

app.controller('TodoCtrl', function($scope, TodoService) {
  $scope.todos = TodoService.getTodos();

  $scope.addTodo = function() {
    if ($scope.newTodo) {
      TodoService.addTodo($scope.newTodo);
      $scope.newTodo = '';
    }
  };

  $scope.deleteTodo = function(index) {
    TodoService.deleteTodo(index);
  };
});

services/TodoService.js：数据服务

app.factory('TodoService', function() {
  var todos = [
    { text: '学习 AngularJS', completed: false },
    { text: '完成项目需求', completed: true }
  ];

  return {
    getTodos: function() { return todos; },
    addTodo: function(text) { todos.push({ text: text, completed: false }); },
    deleteTodo: function(index) { todos.splice(index, 1); }
  };
});

views/todo-list.html：视图模板

<div class="container">
  <h1>待办事项列表</h1>
  <input type="text" ng-model="newTodo" placeholder="添加新任务">
  <button ng-click="addTodo()">添加</button>

  <ul>
    <li ng-repeat="todo in todos">
      <input type="checkbox" ng-model="todo.completed">
      <span ng-class="{ completed: todo.completed }">{{ todo.text }}</span>
      <button ng-click="deleteTodo($index)">删除</button>
    </li>
  </ul>
</div>

结论：AngularJS 的未来与选择建议

尽管 AngularJS 已经演进到 Angular（2+）版本，但其核心思想（如数据绑定、依赖注入）仍被广泛沿用。对于以下场景，AngularJS 仍是理想选择：

小型项目或快速原型开发：轻量级框架适合快速迭代。
团队已有 AngularJS 经验：代码库兼容性高，学习曲线平缓。
需要兼容旧版浏览器：AngularJS 支持 IE9+，而 Angular 需要更高版本。

对于开发者而言，理解 AngularJS 的设计理念，不仅能掌握一种工具，更能培养模块化、声明式编程的思维模式。随着前端技术的快速发展，这种思维模式将成为应对复杂项目的宝贵财富。

关键词布局回顾：本文通过案例、代码和原理分析，自然融入了“AngularJS 简介”这一核心关键词，确保内容既专业又易于理解，同时兼顾搜索引擎优化需求。

AngularJS 简介（建议收藏）

前言：为什么需要 AngularJS？

核心概念：理解 AngularJS 的基石

1. 模型-视图-控制器（MVC）模式

2. 数据绑定（Data Binding）

3. 指令（Directives）

核心模块与基础配置

模块的依赖管理

数据绑定的深度解析

单向绑定：从数据到视图

双向绑定：表单与数据的实时同步

指令系统：扩展 AngularJS 的魔法

内置指令的典型用法

1. ng-repeat：循环渲染列表

2. ng-if/ng-show：条件渲染

3. ng-include：模块化视图

自定义指令：扩展功能的终极武器

依赖注入（DI）：模块化的秘密武器

服务与工厂：共享数据与逻辑

服务（Service）

工厂（Factory）

路由系统：构建单页应用（SPA）

实战案例：构建一个待办事项应用

1. 项目结构

2. 核心代码实现

app.js：模块与路由配置

controllers/TodoCtrl.js：控制器逻辑

services/TodoService.js：数据服务

views/todo-list.html：视图模板

结论：AngularJS 的未来与选择建议

最新发布

DataGrip 2025.1 最新激活码，破解版安装教程（至2099年~）

Webstorm 2025.1 最新激活码，破解版安装教程（至2099年~）

Pycharm 2025.1 最新激活码，破解版安装教程（至2099年~）

IDEA 2025.1 最新激活码，破解版安装教程（至2099年~）

Cursor @ 符号（千字长文）

POP3 协议（一文讲透）

IMAP 协议（保姆级教程）

RDP 协议（建议收藏）

SFTP 协议（保姆级教程）

UDP 协议（长文解析）

1. `ng-repeat`：循环渲染列表

2. `ng-if`/`ng-show`：条件渲染

3. `ng-include`：模块化视图