AngularJS 最常用的八种功能(基础知识)

下面是详细讲解AngularJS最常用的八种功能的完整攻略：

1. 数据绑定（Data Binding）

AngularJS的核心特性之一就是数据绑定（Data binding），它允许你通过一个表达式链接一个属性和模型的值。数据绑定指的是把controller中的数据和view中的元素绑定在一起，使得view中的元素能够自动的反应出controller中数据的变化。示例代码如下：

<div ng-app="myApp" ng-controller="myCtrl">
  <input type="text" ng-model="name">
  <h1>Hello {{name}}</h1>
</div>

<script>
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {
    $scope.name = "John Doe";
  });
</script>

上面这段代码演示了如何用AngularJS实现双向绑定。当用户在input中输入值时，h1中的值也会相应地改变。这样的结果是，当数据发生变化时，DOM自动更新。

2. 过滤器（Filters）

过滤器（Filters）用于格式化显示数据的方式（比如说货币，日期，数字等）。AngularJS中内置了很多过滤器，也可以自己编写。示例代码如下：

<div ng-app="myApp" ng-controller="myCtrl">
  <p>My name is {{name | uppercase}}</p>
</div>

<script>
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {
    $scope.name = "John Doe";
  });
</script>

这个例子展示了将一个字符串使用内置的uppercase过滤器转为大写。AngularJS还有很多内置的过滤器，例如：currency，date，number等，也可以自己编写自定义的过滤器，以满足特殊的需求。

3. 控制器（Controllers）

控制器中心指示器（Controllers）是AngularJS中非常重要的一个概念。它允许您在视图和模型之间进行传递和处理数据。控制器必须通过模型（ Model）来操作表现视图（ View）。

    <div ng-app="myApp" ng-controller="myCtrl">
       <input type="text" ng-model="firstName">
       <input type="text" ng-model="lastName">
       <p>Hello {{fullName()}}</p>
     </div>
    <script>
      var app = angular.module('myApp', []);
      app.controller('myCtrl', function($scope) {
      $scope.firstName= "John";
      $scope.lastName= "Doe";
      $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
      };
    });
  </script>

这里定义了一个控制器myCtrl，并用模型$scope把firstName和lastName绑定在input元素上，用fullName()方法返回模型中firstName和lastName的值。当在文本框中输入不同的值时，页面中相应的值也会发生变化。

4. 服务（Services）

在AngularJS中，服务（Services）是一个可重用的功能单元，它可以用于从服务器上获取数据或执行其他具有重复性的任务。它们通常用来访问外部系统或以其他方式处理数据。下面的例子演示了如何通过内置的$http服务从服务器获取JSON数据。

    <div ng-app="myApp" ng-controller="myCtrl">
        <ul>
            <li ng-repeat="person in persons">
                {{person.name}} from {{person.city}}
            </li>
        </ul>
    </div>
    <script>
      var app = angular.module('myApp', []);
      app.controller('myCtrl', function($scope, $http) {
          $http.get("persons.json").then(function (response) {
              $scope.persons = response.data;
          });
      });
    </script>

这里定义了一个控制器myCtrl，包含了一个$http服务。在控制器的方法中，通过$get方法向服务器获取JSON数据。获取成功后，JSON数据里的人名字和所在地就会在HTML页面上展示出来。

5. 路由（Routing）

路由（Routing）是AngularJS中另一个重要概念。路由机制负责将URL和定义在应用程序中的控制器和视图进行匹配。一个完整的路由包括一个URL，一个控制器和一个视图。示例代码如下：

  <div ng-app="myApp">
      <div ng-controller="myCtrl">
          <div ng-view></div>
      </div>
  </div>
  <script>
      var app = angular.module("myApp", ["ngRoute"]);
      app.config(function($routeProvider) {
          $routeProvider
          .when("/", {
              templateUrl : "home.html"
          })
          .when("/about", {
              templateUrl : "about.html"
          });
      });
  </script>

这里定义了一个路由表，并定义了两个路由 - 一个"home"，一个"about"。它还定义了一个控制器以及一个ng-view指令。当你的URL指向“/”时，将以“home.html”作为模板引入，指定了routing规则后，就可以像传统的web网站那样，根据URL的不同，显示不同的内容。

6. 指令（Directives）

在AngularJS中，指令（Directives）用于为HTML元素添加额外的功能。指令是一个特殊的属性，会告诉AngularJS对元素进行特殊处理。示例代码如下：

    <div ng-app="myApp" ng-controller="myCtrl">
      <p>Welcome to my page!</p>
      <my-directive></my-directive>
    </div>

    <script>
      var app = angular.module('myApp', []);
      app.directive('myDirective', function() {
          return {
              template : "<h1>Hello World!</h1>"
          };
      });
    </script>

这里定义了一个myDirective的随意名称，实际上是一个ng-app的一个附属模块，通过指令来处理该模块所在的元素标签，展示模板内容，这里展示的模板内容是一个H1标题。

7. 依赖注入（Dependency Injection）

依赖注入（Dependency Injection）也是一个非常重要的AngularJS概念，它通过对依赖关系进行显式管理以把对象相关性解耦。依赖注入还允许您编写功能单元，这些功能单元可以独立于特定的环境进行开发，因为它们可以通过注入其他功能单元来消除对特定环境的依赖性。

下面是一个基本的例子：

    <div ng-app="myApp" ng-controller="myCtrl">
        <h1>{{message}}</h1>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.factory('myService', function(){
            return{
                getMsg: function(){
                    return "This is a message from myService";
                }
            };
        });
        app.controller('myCtrl', function($scope, myService){
            $scope.message = myService.getMsg();
        });
    </script>

这个例子演示了如何使用依赖注入从服务中获取消息并在视图中展示它。依赖注入中，将myService分离出来，便于实现代码复用，我的所有controller都将会依赖于myService，控制器通过引用myService的方式调用其中的方法。

8. 模块（Modules）

AngularJS模块是一个存放元素的容器，包括控制器、服务、过滤器和指令。简单来说，一个模块就是app，用于将一组不同的组件汇集到一个整体中。下面是一个简单的例子：

    <div ng-app="myApp" ng-controller="myCtrl">
        <h1>{{message}}</h1>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope){
            $scope.message = "Hello World";
        });
    </script>

这里定义了一个myApp模块，包含了一个控制器myCtrl。在控制器中，我们定义了模型中的message属性，用于在视图中动态展示信息。

以上就是AngularJS最常用的8个功能的详细讲解及示例。