AngularJS 是一个由 Google 开发的前端 JavaScript 框架，用于构建单页应用（SPA）。它使用 MVC（Model-View-Controller）架构，允许开发者在客户端管理动态视图。虽然 AngularJS（1.x）已被 Angular（2+）替代，但它仍然在一些旧项目中使用。
1. 安装和设置
要开始使用 AngularJS，你只需引入 AngularJS 的脚本文件，可以通过 CDN 或下载文件来引用。
引入 AngularJS（通过 CDN）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AngularJS Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
<h1>{{ message }}</h1>
</div>
</body>
</html>引入 AngularJS（下载文件）
- 从 AngularJS官网 下载 AngularJS 文件。
- 在 HTML 文件中引用下载的
angular.min.js文件。
2. 基本概念
2.1 ng-app
ng-app 是 AngularJS 应用的启动点，它会启动一个 AngularJS 应用程序并初始化。通常它被放置在 <html> 或 <body> 标签中。
<body ng-app="myApp">2.2 ng-controller
ng-controller 是指向 AngularJS 控制器的指令。控制器用于将数据与视图（HTML）进行绑定。
<div ng-controller="myController">
<h1>{{ message }}</h1>
</div>2.3 双向数据绑定
AngularJS 使用双向数据绑定将模型（数据）与视图（UI）同步。任何模型的变化都会立即反映到视图中，反之亦然。
<input type="text" ng-model="name">
<h2>Hello, {{ name }}</h2>在这个例子中，输入框中的文本会与 name 模型进行绑定。当你改变输入框的内容时，页面中的 {{ name }} 会立即更新。
3. 控制器
控制器是 AngularJS 的核心组件，用来在模型和视图之间传递数据。你可以在 AngularJS 模块中定义控制器。
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.message = 'Hello, AngularJS!';
});angular.module('myApp', [])：定义一个名为myApp的 AngularJS 模块。.controller('myController', function($scope) {...})：定义一个控制器，并将数据（message）绑定到$scope对象上。
4. 指令
AngularJS 的指令用于扩展 HTML 的功能。常见的指令包括：
- ng-model：用于绑定数据到 HTML 元素。
- ng-repeat：用于循环显示数据。
- ng-if：用于根据条件显示/隐藏 HTML 元素。
4.1 ng-repeat
<ul>
<li ng-repeat="item in items">{{ item }}</li>
</ul>在控制器中，你可以定义 items 数组：
$scope.items = ['Apple', 'Banana', 'Orange'];4.2 ng-if
<div ng-if="isVisible">
<h2>This is conditionally visible!</h2>
</div>在控制器中，你可以控制 isVisible 变量：
$scope.isVisible = true;5. 服务
AngularJS 提供了多种内置服务（如 $http、$location）来帮助开发者与后端进行交互，处理路由，等等。你也可以定义自己的服务来共享数据或功能。
5.1 $http 服务
用于发起 AJAX 请求，从服务器获取数据。
$scope.getData = function() {
$http.get('https://api.example.com/data')
.then(function(response) {
$scope.data = response.data;
});
};5.2 自定义服务
你可以创建一个服务来共享数据或功能：
angular.module('myApp')
.service('myService', function() {
this.getData = function() {
return 'Data from service';
};
});然后在控制器中使用这个服务：
$scope.data = myService.getData();6. 过滤器
AngularJS 提供了一些内置过滤器，用于格式化数据，如 currency、date、uppercase 等。
<h1>{{ amount | currency }}</h1>
<h2>{{ today | date:'fullDate' }}</h2>自定义过滤器
你可以创建自定义过滤器来处理数据：
angular.module('myApp')
.filter('reverse', function() {
return function(input) {
return input.split('').reverse().join('');
};
});然后在视图中使用它：
<p>{{ 'hello' | reverse }}</p> <!-- 输出 'olleh' -->7. 路由（ngRoute）
AngularJS 的 ngRoute 模块允许你在单页应用中定义不同的视图和路由。你需要通过 ngRoute 模块来设置路由。
7.1 安装 ngRoute
首先，加载 ngRoute 模块：
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.min.js"></script>7.2 配置路由
angular.module('myApp', ['ngRoute'])
.config(function($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'homeController'
})
.when('/about', {
templateUrl: 'about.html',
controller: 'aboutController'
})
.otherwise({
redirectTo: '/home'
});
});总结
AngularJS 是一个功能强大的前端框架，能够帮助开发者构建现代的动态网页。通过使用模块、控制器、指令、服务等概念，你可以轻松构建和维护单页应用。在学习过程中，理解双向数据绑定、指令的使用、以及如何组织代码和服务是非常重要的。