AngularJS：构建更智能的Web应用框架

原创

qife122

发布于 2025-10-16 19:39:41

11400

代码可运行

文章被收录于专栏：网络安全技术点滴分享网络安全技术点滴分享

运行总次数：0

代码可运行

AngularJS

AngularJS 是一个开源的JavaScript框架，用于构建动态Web应用程序。它通过扩展HTML的语法，让开发者能够以声明式的方式构建用户界面，并通过双向数据绑定自动同步视图与数据模型。

功能特性

扩展HTML语法：通过指令系统增强HTML，使其能够表达丰富的应用组件
双向数据绑定：自动在视图和JavaScript对象之间同步数据
MVC架构：清晰分离模型、视图和控制器，提高代码可维护性
依赖注入：内置依赖注入系统，使组件更容易测试和重用
指令系统：可创建自定义HTML标签和属性，封装复杂UI行为
路由功能：支持单页面应用的路由和深度链接
表单验证：内置表单验证和错误处理机制
过滤器：提供数据格式化和转换功能
国际化：支持多语言和本地化功能
动画支持：通过ngAnimate模块提供丰富的动画效果
测试支持：设计时考虑了可测试性，便于单元测试和端到端测试

安装指南

通过npm安装

npm install angular

通过Yarn安装

yarn add angular

通过Bower安装

bower install angular

直接引用CDN

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

系统要求

Node.js 8.x 或更高版本
现代浏览器支持（IE9+）

使用说明

基本示例

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <script src="angular.js"></script>
</head>
<body>
  <div ng-controller="MyController">
    <input ng-model="name" placeholder="请输入姓名">
    <h1>Hello {{name}}!</h1>
  </div>

  <script>
    angular.module('myApp', [])
      .controller('MyController', function($scope) {
        $scope.name = 'World';
      });
  </script>
</body>
</html>

创建模块和控制器

// 定义模块
var app = angular.module('myApp', []);

// 创建控制器
app.controller('MyController', function($scope) {
  $scope.users = [
    { name: 'Alice', email: 'alice@example.com' },
    { name: 'Bob', email: 'bob@example.com' }
  ];
  
  $scope.addUser = function(user) {
    $scope.users.push(user);
    $scope.newUser = {};
  };
});

使用指令

<div ng-controller="MyController">
  <input type="text" ng-model="newUser.name" placeholder="姓名">
  <input type="email" ng-model="newUser.email" placeholder="邮箱">
  <button ng-click="addUser(newUser)">添加用户</button>
  
  <ul>
    <li ng-repeat="user in users">
      {{user.name}} - {{user.email}}
    </li>
  </ul>
</div>

服务使用示例

app.factory('UserService', function($http) {
  return {
    getUsers: function() {
      return $http.get('/api/users');
    },
    createUser: function(user) {
      return $http.post('/api/users', user);
    }
  };
});

app.controller('UserController', function($scope, UserService) {
  UserService.getUsers().then(function(response) {
    $scope.users = response.data;
  });
});

核心代码

1. 依赖注入系统

// 自动依赖注入
angular.module('app', [])
  .controller('MyCtrl', ['$scope', '$http', function($scope, $http) {
    // 控制器逻辑
    $http.get('/api/data').then(function(response) {
      $scope.data = response.data;
    });
  }]);

// 自定义服务
angular.module('app')
  .service('DataService', function($http) {
    this.fetchData = function() {
      return $http.get('/api/data');
    };
  });

2. 指令系统实现

// 自定义指令
angular.module('app')
  .directive('myDirective', function() {
    return {
      restrict: 'EA',
      scope: {
        data: '=',
        onAction: '&'
      },
      templateUrl: 'my-directive.html',
      link: function(scope, element, attrs) {
        scope.handleClick = function() {
          scope.onAction({value: scope.data});
        };
      }
    };
  });

// 使用自定义指令
<my-directive data="user" on-action="handleAction(value)"></my-directive>

3. 双向数据绑定核心

// 简化的$watch实现
Scope.prototype.$watch = function(watchFn, listenerFn) {
  var watcher = {
    watchFn: watchFn,
    listenerFn: listenerFn || function() {},
    last: initWatchVal
  };
  this.$$watchers.push(watcher);
};

// 简化的$digest循环
Scope.prototype.$digest = function() {
  var dirty;
  var ttl = 10;
  do {
    dirty = false;
    for (var i = 0; i < this.$$watchers.length; i++) {
      var watcher = this.$$watchers[i];
      var newValue = watcher.watchFn(this);
      var oldValue = watcher.last;
      if (!this.$$areEqual(newValue, oldValue, watcher.valueEq)) {
        watcher.last = (watcher.valueEq ? copy(newValue) : newValue);
        watcher.listenerFn(newValue, 
          (oldValue === initWatchVal ? newValue : oldValue), 
          this);
        dirty = true;
      }
    }
  } while (dirty && ttl--);
};

4. 过滤器实现

// 自定义过滤器
angular.module('app')
  .filter('capitalize', function() {
    return function(input) {
      if (input) {
        return input.charAt(0).toUpperCase() + input.slice(1);
      }
      return input;
    };
  });

// 内置过滤器使用
{{ name | uppercase }}
{{ price | currency }}
{{ date | date:'medium' }}

5. 路由配置

// 路由配置
angular.module('app', ['ngRoute'])
  .config(function($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/home.html',
        controller: 'HomeController'
      })
      .when('/users', {
        templateUrl: 'views/users.html',
        controller: 'UsersController'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

AngularJS通过其独特的特性和强大的功能，为构建复杂的单页面应用程序提供了完整的解决方案。虽然官方支持已经结束，但其设计理念和实现方式仍然对现代前端开发有着深远的影响。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

前端框架