像Angular一样思考，即使你来自jQuery：2025指南

从“做这个”到“让它发生”：如何停止写jQuery并开始像AngularJS一样思考

如果你是从jQuery进入AngularJS的世界，你很可能正在经历文化冲击。在jQuery中，你习惯于发号施令：“找到这个元素，修改它的类，往里面添加文本。”而在AngularJS中，一切都不同了。你说：“这是数据。让模板自己去跟踪它。”这不仅仅是更换库——这是范式的转变。

在2025年，AngularJS（1.x版本）仍然存在于遗留项目中，理解它的哲学是成功工作的关键。如果你试图像写jQuery一样写AngularJS，你注定会陷入痛苦和bug的泥潭。让我们来弄清楚如何切换思维方式。

问题一：你仍然在操作DOM

在jQuery中，你写的是：

// jQuery 风格$('#myButton').click(function() {  $('#myDiv').text('已点击！').addClass('active');});

在AngularJS中，不能这样做。DOM只是状态的反映。与其直接操作DOM，不如修改模型（数据），Angular会自动更新视图。

// AngularJS 风格angular.module('app', []).controller('MainCtrl', function($scope) {  $scope.buttonText = '点击我';  $scope.isActive = false;

  $scope.handleClick = function() {    $scope.buttonText = '已点击！';    $scope.isActive = true;  };});

而在HTML中：

<div ng-app="app" ng-controller="MainCtrl">  <button ng-click="handleClick()">{{ buttonText }}</button>  <div ng-class="{active: isActive}">{{ buttonText }}</div></div>

注意到了吗？没有选择器，没有直接操作DOM。一切都通过$scope和指令来管理。

问题二：你写的是工具函数而不是服务

在jQuery中，你经常创建一组全局函数：

// jQuery 风格（不好）function getUser(id) {  return $.get('/api/users/' + id);}

function showError(msg) {  $('#error').text(msg).show();}

在AngularJS中，你应该使用服务——单例对象，通过依赖注入注入到需要的地方。这带来了可测试性、可复用性和代码的整洁性。

// AngularJS 风格（好）angular.module('app').factory('UserService', function($http) {  return {    getUser: function(id) {      return $http.get('/api/users/' + id);    }  };}).controller('ProfileCtrl', function($scope, UserService) {  UserService.getUser(1).then(function(response) {    $scope.user = response.data;  });});

忘掉全局变量和函数吧。一切都应该存在于Angular的模块内部。

问题三：你还在使用$(document).ready()

在jQuery中，你等待DOM加载：

$(document).ready(function() {  // 你的代码});

在AngularJS中，这不需要。控制器和指令会在Angular“编译”DOM时自动初始化。用$scope.$on('$viewContentLoaded', ...)代替ready()，或者直接把初始化逻辑放在控制器的构造函数中。

angular.module('app').controller('StartupCtrl', function($scope) {  // 这段代码会在控制器创建时执行  $scope.init = function() {    console.log('控制器已就绪！');  };  $scope.init();});

问题四：你写的是带有回调的“意大利面条式代码”

jQuery鼓励回调链和嵌套调用。AngularJS提供了Promise（$q）和清晰的架构。

// jQuery 风格（回调地狱）$.get('/data', function(data) {  $.post('/save', data, function(result) {    $.get('/status', function(status) {      // ...    });  });});

// AngularJS 风格（Promise）UserService.getUser(1)  .then(function(user) {    return