AngularJS 是一款流行的前端 JavaScript 框架，提供了丰富的 API 接口，用于实现前端应用的各种功能。本文将详细介绍 AngularJS 的 API，包括模块 API、指令 API、服务 API、过滤器 API、路由 API 等内容，帮助开发者充分了解和熟练运用 AngularJS 的各项功能。
1. AngularJS 模块 API
AngularJS 使用模块（Module）作为组织代码的基本单位。通过模块，我们可以把相关的代码组织在一起，并实现模块之间的依赖管理。下面是一些常用的模块 API：
(1) angular.module
使用 angular.module 方法来创建一个模块。该方法接收两个参数，第一个参数是模块的名称，第二个参数是模块所依赖的其他模块的数组。
示例代码如下：
var app = angular.module('myApp', []);
(2) module.component
使用 module.component 方法来定义一个组件。组件是 AngularJS 中的一个重要概念，用于封装页面中可重用的部件。
示例代码如下：
app.component('myComponent', {
template: '<div>{
{ $ctrl.message }}</div>',
controller: function() {
this.message = 'Hello, AngularJS!';
}
});
(3) module.controller
使用 module.controller 方法来定义一个控制器。控制器负责处理视图层的逻辑，与模型数据进行交互。
示例代码如下：
app.controller('myController', function($scope) {
$scope.message = 'Hello, AngularJS!';
});
2. AngularJS 指令 API
AngularJS 的指令（Directive）是用于扩展 HTML 的自定义标签或属性。通过指令，我们可以实现自定义的行为和样式。
(1) directive
使用 directive 方法来定义一个指令。该方法接收两个参数，第一个参数是指令的名称，第二个参数是一个函数或对象，用于定义指令的行为。
示例代码如下：
app.directive('myDirective', function() {
return {
restrict: 'E',
template: '<div>{
{ message }}</div>',
scope: {},
link: function(scope) {
scope.message = 'Hello, AngularJS!';
}
};
});
(2) 内置指令
AngularJS 提供了许多内置指令，可以直接在 HTML 中使用，例如 ng-model、ng-repeat、ng-show 等。
示例代码如下：
<input type="text" ng-model="username">
<div ng-repeat="item in items">{
{ item }}</div>
<div ng-show="isVisible">Visible content</div>
3. AngularJS 服务 API
AngularJS 提供了一些内置的服务（Service），用于完成各种常见的任务，例如网络请求、数据处理、事件监听等。
(1) $http
$http 是 AngularJS 中用于进行网络请求的服务。它可以发起 GET、POST 等多种类型的请求，并返回 Promise 对象。
示例代码如下：
app.controller('myController', function($http) {
$http.get('/api/data')
.then(function(response) {
console.log(response.data);
});
});
(2) $rootScope
$rootScope 是 AngularJS 中的根作用域，用于实现全局事件广播和监听功能。
示例代码如下：
app.controller('myController', function($rootScope) {
$rootScope.$on('event', function(event, data) {
console.log(data);
});
$rootScope.$broadcast('event', 'Hello, AngularJS!');
});
4. AngularJS 过滤器 API
AngularJS 的过滤器（Filter）用于对数据进行格式化和转换。
(1) 内置过滤器
AngularJS 提供了一些内置的过滤器，用于处理常见的数据格式，例如日期、货币、百分比等。
示例代码如下：
<p>{
{ date | date:'yyyy-MM-dd' }}</p>
<p>{
{ price | currency }}</p>
<p>{
{ value | percent }}</p>
(2) 自定义过滤器
我们还可以自定义过滤器来满足特殊需求。自定义过滤器是一个函数，接收输入值并返回转换后的结果。
示例代码如下：
app.filter('myFilter', function() {
return function(input) {
// 进行转换操作
return transformedOutput;
};
});
5. AngularJS 路由 API
AngularJS 的路由（Routing）功能用于实现单页应用中的页面跳转和导航。
(1) $routeProvider
$routeProvider 是 AngularJS 中配置路由的服务。通过配置路由规则，我们可以指定不同 URL 对应的视图和控制器。
示例代码如下：
app.config(function($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'views/home.html',
controller: 'HomeController'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutController'
})
.otherwise({
redirectTo: '/home'
});
});
(2) ng-view
ng-view 是 AngularJS 中用于显示路由视图的指令。它将根据当前的 URL 加载对应的模板并渲染。
示例代码如下：
<div ng-view></div>
6. 总结
本文详细介绍了 AngularJS 的 API 接口，包括模块 API、指令 API、服务 API、过滤器 API、路由 API 等。通过学习和掌握这些 API，开发者可以更加灵活地使用 AngularJS 构建各类前端应用。希望本文对您了解和使用 AngularJS API 有所帮助。
