AngularJS
AngularJS 是一个由 Google 开发维护的 开源前端 JavaScript 框架,用于构建动态网页应用(SPA,Single Page Applications)。
✅ 一句话介绍:
AngularJS 是一个让你可以使用 HTML 做“程序开发”的框架。
🔧 AngularJS 的核心特点:
特性 | 说明 |
---|---|
MVVM 架构 | 支持数据双向绑定,让模型与视图自动同步。 |
双向数据绑定 | 视图(HTML)和模型(JS 对象)自动保持一致。 |
指令(Directives) | 扩展 HTML 语法(如 ng-model 、ng-repeat )用于绑定数据和行为。 |
依赖注入(DI) | 方便管理控制器、服务之间的依赖关系。 |
模块化开发 | 可以将代码拆分为模块,便于管理和复用。 |
内置服务($http, $route 等) | 提供对 HTTP 请求、路由等的封装支持。 |
📌 示例代码:
<!DOCTYPE html>
<html ng-app="myApp">
<head><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl"><h1>{{ title }}</h1><input ng-model="title" placeholder="修改标题" /><script>var app = angular.module('myApp', []);app.controller('MainCtrl', function($scope) {$scope.title = "Hello AngularJS!";});</script></body>
</html>
📆 发展与现状:
信息 | 内容 |
---|---|
发布 | 2010 年 Google 推出 AngularJS(1.x) |
取代者 | 后续推出 Angular(2+),完全重写,向现代 Web 发展 |
维护结束 | AngularJS 已在 2022 年底停止官方支持 |
替代选择 | 推荐使用现代框架如 Vue.js、React、Angular(2+) |
✅ 适合场景:
-
老项目维护
-
学习了解传统前端 MVC 架构
-
快速构建简单的数据驱动型页面
运行结果: