AngularJS API 概述

AngularJS 是一个由 Google 开发的开源 JavaScript 框架，用于构建动态网页应用程序。它简化了前端开发，提供了很多功能，使得开发者可以更高效地构建富交互的用户界面。AngularJS 的 API 包含多种服务、指令、过滤器和其他功能，使得开发 Web 应用变得更加灵活和易于管理。

以下是 AngularJS API 的一些关键部分：

1. 模块 (Modules)

在 AngularJS 中，模块是应用程序的基本结构，用于组织和管理不同的功能。

  • angular.module()：用于创建、配置或获取 AngularJS 模块。
var app = angular.module('myApp', []);
  • angular.module('myApp').controller()：为模块注册控制器。
app.controller('myController', function($scope) {
    $scope.message = "Hello, AngularJS!";
});

2. 控制器 (Controllers)

控制器是 AngularJS 的重要组成部分，用于处理应用程序的业务逻辑。它管理 $scope 对象，$scope 是用于在控制器和视图之间传递数据的桥梁。

  • $scope：控制器中的数据容器，将数据和功能绑定到视图。
app.controller('MyController', function($scope) {
    $scope.greeting = 'Hello, World!';
});
  • $scope.$watch()：用于监听数据模型的变化。
$scope.$watch('greeting', function(newValue, oldValue) {
    console.log('Greeting changed from ' + oldValue + ' to ' + newValue);
});

3. 指令 (Directives)

指令是 AngularJS 的核心，用于扩展 HTML 的功能。它们可以创建自定义 HTML 元素或属性，甚至改变 DOM 的行为。

  • 常见的指令：
    • ng-model：用于双向数据绑定。
    • ng-repeat：用于在视图中重复元素。
    • ng-show / ng-hide：用于根据条件显示或隐藏元素。
    • ng-if：根据条件渲染或删除 DOM 元素。
    • ng-click：用于绑定点击事件。
<div ng-app="myApp">
    <div ng-controller="myController">
        <button ng-click="showMessage()">Click Me</button>
        <p>{{ message }}</p>
    </div>
</div>


app.controller('myController', function($scope) {
    $scope.showMessage = function() {
        $scope.message = "You clicked the button!";
    };
});

4. 服务 (Services)

AngularJS 服务用于共享数据和功能。服务是 AngularJS 的重要组成部分，通常用于应用程序的不同部分之间共享逻辑。

  • $http：用于向服务器发送 HTTP 请求。
  • $location：用于操作浏览器的 URL。
  • $route：用于实现基于 URL 的视图切换。
  • $timeout：用于设置延迟执行的函数。
app.controller('myController', function($scope, $http) {
    $http.get('data.json').then(function(response) {
        $scope.data = response.data;
    });
});

5. 依赖注入 (Dependency Injection)

AngularJS 的依赖注入机制允许你在控制器、服务、工厂等组件中自动注入依赖对象。AngularJS 会自动实例化所需的服务，并传递给你。

app.controller('myController', function($scope, $http) {
    $http.get('data.json').then(function(response) {
        $scope.data = response.data;
    });
});

6. 过滤器 (Filters)

过滤器用于格式化数据，以便在视图中展示。常用的过滤器包括：

  • currency：格式化货币。
  • date：格式化日期。
  • filter：根据指定条件过滤数据。
  • uppercase / lowercase：将文本转换为大写或小写。
<p>{{ amount | currency }}</p>
<p>{{ currentDate | date:'yyyy-MM-dd' }}</p>

7. 路由 (Routing)

AngularJS 的路由模块允许开发者为不同的 URL 设置视图。它将 URL 路径与视图和控制器进行关联。

app.config(function($routeProvider) {
    $routeProvider
        .when('/home', {
            templateUrl: 'home.html',
            controller: 'homeController'
        })
        .when('/about', {
            templateUrl: 'about.html',
            controller: 'aboutController'
        })
        .otherwise({
            redirectTo: '/home'
        });
});

8. 表单和验证

AngularJS 提供了内置的表单验证功能，支持字段验证（如 required、email、minlength 等）以及自定义验证。

<form name="userForm" ng-submit="submitForm()">
    <input type="text" name="username" ng-model="user.username" required>
    <span ng-show="userForm.username.$touched && userForm.username.$invalid">Username is required</span>

    <button type="submit" ng-disabled="userForm.$invalid">Submit</button>
</form>

9. 动画 (Animations)

AngularJS 提供了一个动画模块，帮助你为应用添加动画效果。通过 ngAnimate 模块，开发者可以将动画应用到元素的进入、离开、隐藏等行为。

<div ng-repeat="item in items" ng-animate="'animate'">
    <div>{{ item.name }}</div>
</div>


angular.module('myApp', ['ngAnimate']);

10. 动态加载 (Lazy Loading)

AngularJS 支持动态加载模块和控制器。通过将模块拆分为多个部分并按需加载，可以提高应用的性能。

angular.module('myApp').config(function($routeProvider) {
    $routeProvider
        .when('/home', {
            templateUrl: 'home.html',
            controller: 'homeController'
        })
        .when('/about', {
            templateUrl: 'about.html',
            controller: function($scope) {
                require(['aboutController'], function(aboutController) {
                    aboutController($scope);
                });
            }
        });
});

11. 自定义服务 (Custom Services)

AngularJS 允许你创建自定义服务、工厂和提供者（Provider），以便在应用程序中重用逻辑。

  • 服务：用于封装函数和数据。
  • 工厂：与服务类似，但它是通过返回对象来定义的。
  • 提供者：为应用提供配置功能。
app.factory('myService', function() {
    return {
        getData: function() {
            return "Some data";
        }
    };
});

总结

AngularJS 的 API 涵盖了从基础的控制器、指令到复杂的服务、路由、动画等各种功能，能够帮助开发者快速构建动态的 Web 应用程序。通过模块化的结构，AngularJS 提供了强大的工具来管理和组织代码，提高开发效率和可维护性。