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

柔光的暖阳◎ 2024-03-17 20:21 154阅读 0赞

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 加载对应的模板并渲染。

示例代码如下：

### 6. 总结 ###

本文详细介绍了 AngularJS 的 API 接口，包括模块 API、指令 API、服务 API、过滤器 API、路由 API 等。通过学习和掌握这些 API，开发者可以更加灵活地使用 AngularJS 构建各类前端应用。希望本文对您了解和使用 AngularJS API 有所帮助。