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通过其独特的特性和强大的功能，为构建复杂的单页面应用程序提供了完整的解决方案。虽然官方支持已经结束，但其设计理念和实现方式仍然对现代前端开发有着深远的影响。
更多精彩内容 请关注我的个人公众号 公众号（办公AI智能小助手）
对网络安全、黑客技术感兴趣的朋友可以关注我的安全公众号（网络安全技术点滴分享）
公众号二维码
公众号二维码
