AngularJS 的 API：模块 API、指令 API、服务 API、过滤器 API、路由 API

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 有所帮助。