当前位置: 首页 > news >正文

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

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智能小助手)
对网络安全、黑客技术感兴趣的朋友可以关注我的安全公众号(网络安全技术点滴分享)

公众号二维码

公众号二维码

http://www.hskmm.com/?act=detail&tid=32522

相关文章:

  • 给档案装上“智慧大脑”:文档抽取技术的四大赋能场景
  • P11816QOJ1250 Pionki 轮廓线DP
  • linux系统scatter/gather I/O技术
  • PostgreSQL 为什么不选择 B+ 树索引? - Lafite
  • Joeys shell
  • Redis 集群从部署到可视化管理全流程(超详细实战指南)
  • 什么是BPM流程自动化?从“财务报销”入手,一文读懂企业效率引擎
  • 软件工程学习日志2025.10.16
  • P1072 [NOIP 2009 提高组] Hankson 的趣味题
  • 25w41a快照测评:鹦鹉螺成精了?长矛教你戳穿末影人!
  • Day15-C:\Users\Lenovo\Desktop\note\code\JavaSE\Basic\src\com\classlei
  • Day14
  • window电脑开启hyperV虚拟化功能后导致本地服务端口被占用问题处理方案
  • RAG检索质量差?这5种分块策略帮你解决70%的问题
  • 初识pytorch:网络骨架中的填充之各种层
  • Day5字符型
  • 本地链路地址
  • 体育
  • Meta推出Agent Learning via Early Experience,推动语言代理自主学习新范式
  • Fiddler And LINQ - 特洛伊
  • 计算机视觉在自动化质检中的应用
  • 动态加速中优化失败路径反馈的方法
  • 铜价冲击下,如何“锁住”母排利润?
  • 前端快速开发工具推荐与实战 让开发速度提升 3 倍的完整工具链
  • js代码、js文件混淆、加密
  • Salesforce推出AI版Setup,说句话就能搞定配置?
  • 10.16读书报告
  • 火山引擎Data Agent再拓新场景,重磅推出用户研究Agent
  • 元推理:哥德尔搞不完定理,翻来覆去的搞。。。。
  • Matlab选择常见颜色