AngularJS初学者实战入门示例

本文还有配套的精品资源，点击获取

简介：AngularJS是一个由Google支持的前端框架，使用MVC架构和数据绑定来简化动态Web应用的开发。该框架提供了模型、视图、控制器等核心概念，以及指令、依赖注入、服务、路由、过滤器、模块和测试等特性。这个适合初学者的AngularJS demo项目包含了这些基础知识的实例，旨在通过实践帮助初学者理解和掌握AngularJS的开发流程。

1. AngularJS框架概述

AngularJS 是一个开源的前端JavaScript框架，由谷歌维护，并且拥有一个活跃的社区。它主要用于增强网页的动态内容，并且是构建单页应用（SPA）的首选框架之一。AngularJS 提供了诸如双向数据绑定、依赖注入、MVC和MVVM架构以及模块化等特性，使得开发流程更加高效和组织化。

在现代Web开发中，AngularJS已经被更新的Angular框架所取代（Angular版本2及之后的版本，被称为Angular），但了解AngularJS对理解整个Angular技术栈依然十分重要。本章节我们将对AngularJS的基本概念、主要特性以及与后端技术的交互进行概述，为后面深入学习各个章节打下坚实基础。

2. MVC架构和双向数据绑定

2.1 MVC架构原理

2.1.1 MVC概念简介

MVC（Model-View-Controller）是一种软件设计模式，用于将应用程序的逻辑分为三个核心组件：模型（Model）、视图（View）和控制器（Controller），以实现关注点分离。在MVC模式中，模型代表数据和业务逻辑，视图是用户界面的表示，控制器处理输入并调用模型和视图来完成特定的用户交互。

2.1.2 MVC与AngularJS的结合方式

AngularJS通过组件化的方式来实现MVC架构。在AngularJS中，控制器（Controller）负责逻辑的处理和数据模型的定义，视图（View）是HTML模板，模型（Model）由作用域（Scope）对象体现。在AngularJS中，控制器通过作用域与视图绑定，并通过依赖注入来获取模型中的数据。

AngularJS中的MVC结构：

• 模型（Model） ：负责应用程序的数据和业务逻辑。
• 视图（View） ：负责展示数据（模型）的用户界面。
• 控制器（Controller） ：作为模型和视图之间的桥梁，处理用户输入，触发业务逻辑。

// 示例代码：控制器与模型的结合方式
var myApp = angular.module('myApp', []);

myApp.controller('MyController', function($scope) {
  $scope.name = 'World';
});

在上述代码中， MyController 控制器负责定义 $scope 对象上的 name 属性，这个属性就是模型的一部分。视图中可以使用 {{ name }} 这样的绑定语法来显示模型中的数据。

2.2 双向数据绑定的实现

2.2.1 数据绑定机制解析

AngularJS的双向数据绑定是通过作用域（Scope）来实现的。当作用域中的数据发生变化时，视图会自动更新；同样，当视图中的数据发生变化时，作用域中相应的数据也会被更新。这种机制是基于脏检查（脏值检查）系统，也就是当AngularJS检测到DOM事件发生时，会检查作用域中的值是否被更改，并进行相应的视图更新。

// 示例代码：双向数据绑定
myApp.controller('MyController', function($scope) {
  $scope.message = "Hello, AngularJS!";
});

在HTML模板中，使用 ng-model 指令将输入框绑定到 $scope.message ：

<input type="text" ng-model="message" />
<p>Message: {{ message }}</p>

此时，如果在输入框中更改内容， $scope.message 的值会更新，视图中的 {{ message }} 也会随之更新，实现双向数据绑定。

2.2.2 双向数据绑定的应用场景

双向数据绑定非常适合于那些需要实时反映数据变化到UI上的场景，例如表单处理、实时聊天应用、复杂的仪表板等。这种绑定方式减少了开发者编写代码来同步视图和数据模型的负担，提高了开发效率。

例如，在一个简单的表单应用中，我们可能有一个用户模型，包含姓名、电子邮件和年龄等字段。通过双向绑定，用户在界面上的更改会即时反映在模型上，反之亦然。

<!-- 表单与模型的双向绑定 -->
<form name="userForm">
  <input type="text" name="name" ng-model="user.name" required>
  <span ng-show="userForm.name.$error.required">Name is required.</span>
</form>

当用户输入数据时， userForm.name 的值会实时更新，而如果有验证错误，相应的错误信息也会显示在界面上，无需额外的事件监听器或数据同步代码。

在实际项目中，双向数据绑定大大简化了数据流和状态管理，但也要注意处理性能问题，特别是在复杂或实时更新的数据集上。合理使用指令和过滤器，以及优化作用域和视图的交互，是保证AngularJS应用性能的关键。

3. 指令的使用和扩展HTML功能

3.1 指令的基本概念和作用

3.1.1 指令的定义和类型

指令（Directives）是AngularJS的核心特性之一，允许开发者扩展HTML的行为和外观。它们是由AngularJS编译器解析和执行的自定义HTML标记。AngularJS指令的目的是让浏览器执行一些操作，比如改变元素的行为，改变DOM的结构，甚至对DOM进行实时更新。

指令主要有四种类型：
- 元素指令（Element Directives）：绑定到HTML元素的指令。
- 属性指令（Attribute Directives）：绑定到HTML属性的指令。
- CSS类指令（Class Directives）：当特定CSS类存在于元素上时，指令就会被执行。
- 注释指令（Comment Directives）：绑定到HTML注释的指令。

示例代码如下：

angular.module('myApp', [])
.directive('myDirective', function() {
    return {
        restrict: 'E', // 元素指令
        template: '<div>A custom directive!</div>'
    };
});

3.1.2 指令与HTML元素的关系

指令和HTML元素之间的关系通过 restrict 属性定义。 restrict 属性告诉AngularJS指令如何使用。常见的值有：

• E ：表示元素， <my-directive></my-directive>
• A ：表示属性， <div my-directive></div>
• C ：表示类， <div class="my-directive"></div>
• M ：表示注释， <!-- directive: my-directive -->

指令可以通过设置不同的 restrict 值来创建灵活的使用方式。例如，你可以创建一个既可以作为元素也可以作为属性的指令，这样就可以提供更多的选择来满足不同的使用场景。

3.1.3 指令的生命周期钩子

AngularJS指令生命周期包括几个主要的钩子函数，开发者可以在这些钩子函数中执行代码：

• compile ：编译阶段，用于解析指令的模板并创建DOM。
• link ：链接阶段，用于将指令和模型绑定起来，并且可以在DOM中添加监听器等。
• controller ：控制器阶段，用于与其他指令共享信息或逻辑。

示例代码如下：

.directive('myDirective', function() {
    return {
        restrict: 'E',
        template: '<div>{{text}}</div>',
        controller: function($scope) {
            $scope.text = 'Hello from directive!';
        }
    };
});

通过这些生命周期钩子，开发者可以控制指令何时以及如何与页面内容互动。

3.2 自定义指令的创建和应用

3.2.1 自定义指令的步骤

创建一个自定义指令需要定义一个函数，返回一个配置对象。这个配置对象包含指令的各种属性，如模板、限制、控制器等。以下是一个创建自定义指令的基本示例：

angular.module('myApp', [])
.directive('myDirective', function() {
    return {
        restrict: 'E', // 作为元素指令使用
        template: '<div>A custom directive!</div>',
        link: function(scope, element, attrs) {
            // 链接函数，可以在这里操作DOM或绑定事件
        }
    };
});

自定义指令通常会涉及到以下关键步骤：

1. 定义模块 ：首先定义或引入一个AngularJS模块。
2. 注册指令 ：使用 .directive() 方法注册一个新的指令。
3. 指令名称 ：定义一个指令名称，它通常遵循驼峰命名法。
4. 配置指令 ：配置返回对象，可以包含 template , restrict , link , controller 等属性。

3.2.2 指令的作用域和优先级

当多个指令作用于同一DOM元素时，它们可能需要互相协作，那么作用域（scope）和优先级（priority）就显得尤为重要。

作用域

AngularJS默认给每个指令创建一个新的作用域。但是，我们也可以自定义作用域，并且可以决定作用域是隔离的、还是与父作用域共享。在指令定义中，可以使用 scope 属性来定制作用域：

• scope: true 创建一个隔离作用域，指令内部的属性不会影响父作用域。
• scope: false 使用父作用域。
• scope: {} 创建一个隔离作用域，并且允许通过属性绑定父作用域的值。

.directive('myDirective', function() {
    return {
        restrict: 'E',
        scope: {
            someAttr: '='
        },
        template: '<div>{{someAttr}}</div>'
    };
});

优先级

指令优先级通过 priority 属性定义。数值越高，优先级越高。优先级决定了指令在元素上的应用顺序。

.directive('myDirective', function() {
    return {
        restrict: 'E',
        priority: 1000,
        template: '<div>A custom directive!</div>'
    };
});

在处理多个指令冲突时，优先级高的指令会优先加载。

自定义指令扩展了HTML的功能，使得开发者能够根据需要创建复杂的、可复用的组件。通过合理使用这些指令，可以极大地提高开发效率并降低代码的复杂性。下一节，我们将探讨如何创建自定义指令以及如何处理它们的作用域和优先级。

4. 依赖注入机制

4.1 依赖注入的基本原理

4.1.1 依赖注入定义和意义

依赖注入（Dependency Injection，简称DI）是一种编程技术，旨在降低模块间的耦合度，并提高代码的可测试性和可重用性。它允许一个对象定义其依赖关系，而不用自己去创建它们。在依赖注入模式中，创建依赖对象的责任被转移到使用对象之外的某个实体（通常是容器或框架）。这样一来，被依赖的对象可以从使用它们的对象中解耦出来，从而促进了代码的模块化。

在AngularJS中，依赖注入是其核心概念之一。AngularJS通过控制反转（Inversion of Control，简称IoC）容器来管理依赖，其中IoC容器负责对象的创建、组装、以及在需要时提供对象。AngularJS使用依赖注入来管理应用中的服务、指令和过滤器等组件的依赖关系，使得组件之间解耦，更易于管理和维护。

4.1.2 依赖注入在AngularJS中的实现

AngularJS的依赖注入系统非常灵活，支持常量、工厂、服务等多种类型的依赖。依赖注入过程通常涉及以下步骤：

1. 定义依赖 ：在控制器、服务或指令中声明所需的依赖项。
2. 注入依赖 ：在AngularJS中，依赖项通过构造函数或方法参数注入到组件中。
3. 解析依赖 ：AngularJS的依赖注入器负责解析这些依赖，并在需要时创建依赖的实例。

例如，在创建一个控制器时，你可能会像这样注入一个服务：

angular.module('myApp', [])
  .controller('MyController', ['$scope', 'myService', function($scope, myService) {
    // 使用依赖
    myService.doSomething();
  }]);

在这个例子中， $scope 和 myService 是注入到 MyController 控制器中的依赖。 $scope 是AngularJS框架提供的内置依赖，而 myService 应该在其他地方定义。

依赖注入提供了模块之间的松耦合，增强了模块的可替换性和可测试性。通过依赖注入，你可以很容易地用测试替身（如mocks和stubs）替换实际依赖，从而在隔离环境中测试特定模块的功能。

4.2 服务和工厂的设计模式

4.2.1 服务与工厂的区别

在AngularJS中，服务（Service）和工厂（Factory）是用来封装业务逻辑和数据操作的两种主要方式。它们都是单例对象，意味着在AngularJS应用中只会创建一次，并且在需要时可以重用。

• 服务（Service） ：通常是使用 angular.service 方法创建，它们是JavaScript构造函数或对象字面量。通过服务，你可以使用new关键字实例化一个对象，也可以直接使用对象字面量。
• 工厂（Factory） ：工厂则是通过函数返回值的方式创建对象。通常使用 angular.factory 方法定义。工厂函数可以用来封装复杂的逻辑，包括调用构造函数、返回服务或返回对象字面量。

在AngularJS中，服务和工厂都可以通过依赖注入被注入到控制器、指令、过滤器或其它服务中。选择使用服务还是工厂主要取决于需要返回的是一个对象实例还是一个返回对象的函数。

4.2.2 服务和工厂的创建与使用

创建服务

angular.module('myApp', [])
  .service('MyService', function() {
    this.myMethod = function() {
      // 处理业务逻辑
    };
  });

创建工厂

angular.module('myApp', [])
  .factory('MyFactory', function() {
    var myMethod = function() {
      // 处理业务逻辑
    };

    return {
      myMethod: myMethod
    };
  });

在控制器中使用这些服务和工厂非常简单，只需将它们作为参数添加到控制器的函数中即可：

angular.module('myApp', [])
  .controller('MyController', ['$scope', 'MyService', 'MyFactory', function($scope, MyService, MyFactory) {
    // 使用 MyService 和 MyFactory
    MyService.myMethod();
    MyFactory.myMethod();
  }]);

以上代码段展示了如何定义和使用AngularJS中的服务和工厂。通过这种方式，我们可以在应用中实现高效且可维护的业务逻辑封装。

5. 可重用的服务代码块

5.1 服务的构建与封装

服务的作用域和生命周期

服务在AngularJS中提供了数据和方法，用于不同组件之间的共享。它们是单例模式的，意味着无论在应用中被注入多少次，AngularJS都只会创建一次服务的实例。服务的作用域是全局的，它从被创建那一刻起，直到应用结束时被销毁。服务的生命周期通常由AngularJS的依赖注入系统管理，开发者通常不需要直接操作服务的创建和销毁。

实现服务的代码封装

服务通常通过工厂函数或服务提供者来创建。工厂函数是最简单的服务创建方式，例如：

angular.module('myApp', [])
  .factory('myService', function() {
    return {
      // 方法和属性
    };
  });

上面的代码创建了一个名为 myService 的服务。这里使用了 factory 方法，它接受一个函数作为参数，该函数返回要被共享的对象。这是实现服务封装的最常用方式。

如果需要更复杂的初始化逻辑，可以使用服务提供者：

angular.module('myApp', [])
  .provider('myServiceProvider', function() {
    this.$get = function() {
      return {
        // 方法和属性
      };
    };
  })
  .config(function(myServiceProvider) {
    myServiceProvider.configParam = 'someValue';
  });

在服务提供者中，我们定义了一个 $get 函数，它返回服务实例。在 config 阶段，我们可以配置提供者，这允许我们在应用启动之前设置特定的参数。

5.2 服务在应用中的复用

服务与控制器的交互

服务在控制器之间可以轻松复用，因为它们通过依赖注入到控制器中。这种方式保证了控制器之间的解耦和更好的测试性。

例如，一个简单的待办事项应用可能包含一个服务和两个控制器：

// service.js
angular.module('myApp')
  .factory('todoService', function() {
    var todos = [];

    return {
      getTodos: function() { return todos; },
      addTodo: function(todo) { todos.push(todo); }
    };
  });

// controllerA.js
angular.module('myApp')
  .controller('ControllerA', function(todoService) {
    todoService.addTodo('Learn AngularJS');
  });

// controllerB.js
angular.module('myApp')
  .controller('ControllerB', function(todoService) {
    console.log(todoService.getTodos());
  });

上面的例子展示了如何通过依赖注入共享数据和服务方法。

解决服务重复实例化问题

由于服务是单例的，它们自然避免了重复实例化的问题。这是AngularJS框架的一项内置特性，确保服务只创建一次，无论在应用中需要多少次。

若要在不同模块间共享同一个服务实例，可以在服务创建时提供一个方法，以确保即使在不同的模块中请求同一个服务，也只会得到同一个实例：

angular.module('sharedServiceModule', [])
  .factory('sharedService', function() {
    var instance = {};
    instance.data = [];

    return instance;
  });

// 在另一个模块中使用同一个服务实例
angular.module('anotherModule', ['sharedServiceModule'])
  .controller('AnotherController', function(sharedService) {
    sharedService.data.push('Another item');
  });

在上面的代码中， sharedService 服务在两个不同的模块中被使用，但它们都引用同一个实例。

服务的封装和可复用性

服务的封装和可复用性是AngularJS架构的核心部分。通过服务，开发者可以轻松实现代码的模块化和组件间的解耦。良好的服务封装可以极大地提高代码的可维护性、可测试性和扩展性。

在实现服务时，开发者应当：

• 尽量保持服务的职责单一，提高复用性。
• 使用AngularJS依赖注入系统注入其他服务或组件，而不是直接创建。
• 避免在服务内部直接与DOM或$window、$document等进行交互，这样可以避免潜在的依赖和测试问题。
• 利用服务的生命周期特性，合理管理共享资源，例如，在服务中进行数据缓存。

通过这些实践，服务不仅成为了AngularJS应用中不可或缺的一部分，而且可以为现代Web开发提供强大的基础设施支持。

6. 单页应用的路由功能

6.1 路由的作用和配置

6.1.1 路由的概念和价值

路由是单页应用（Single Page Application, SPA）的核心机制，它使得用户在不重新加载整个页面的情况下，能够查看到与当前URL对应的视图内容。这种机制大大提高了用户界面的响应速度和用户体验。路由通过监听URL的变化，根据不同的路径映射到不同的视图组件或页面内容，而页面的其他部分则保持不变。

在AngularJS中，路由是由 ngRoute 模块或者更强大的 ui-router 模块来管理的。 ngRoute 模块是官方提供的一个简单的路由解决方案，适合基本的路由需求。 ui-router 则提供了更复杂的状态管理功能，它允许开发者构建嵌套路由和状态树。

路由的价值不仅体现在用户体验上，还在于它促进了应用的模块化。通过路由，开发者可以将应用拆分成多个部分，每个部分处理一个独立的功能或视图，这样可以提高代码的可维护性和可扩展性。

6.1.2 配置路由的方法和技巧

配置路由通常包括定义路径、关联视图模板以及绑定控制器。在AngularJS中，通过创建一个配置模块并使用 $routeProvider 或 $stateProvider 来定义路由规则。以下是一个使用 $routeProvider 定义路由的基本示例：

angular.module('myApp', ['ngRoute'])
  .config(function($routeProvider) {
    $routeProvider
      .when('/home', {
        templateUrl: 'views/home.html',
        controller: 'HomeController'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutController'
      })
      // 更多路由定义...
  });

在配置路由时，有一些技巧可以帮助我们更好地管理应用：

• 抽象顶层路由 ：创建一个抽象的顶层路由，所有子路由都继承自它，可以用来加载通用的导航栏或侧边栏。

• 路由懒加载 ：按需加载路由对应的模块，可以优化应用的加载时间。

• 路由权限控制 ：在路由配置中加入权限验证逻辑，确保用户在访问特定路由前拥有相应的权限。

• URL设计 ：URL设计应清晰、直观，有助于搜索引擎优化（SEO）。

• 状态管理 ：在使用 ui-router 时，可以采用状态管理，将应用的各个部分视为状态，利用状态之间的转换实现页面的跳转。

6.2 路由在SPA中的应用实例

6.2.1 实现页面间跳转

在单页应用中，页面间的跳转通常是通过更改浏览器的URL，并触发相应的路由处理逻辑来完成的。在AngularJS中，可以使用 $location 服务来更改当前的URL，这将触发路由配置中定义的对应路由逻辑。

以下是一个简单的页面跳转示例：

// 在控制器中
$scope.goToHome = function() {
  $location.path('/home');
};

用户在点击一个按钮或链接时， goToHome 方法会被调用， $location.path('/home') 会更改当前URL为 /home ，根据前面的路由配置， HomeController 会被实例化，并与 home 模板关联，从而显示相应的视图内容。

6.2.2 状态管理与URL同步

在使用 ui-router 进行路由配置时，可以将应用的状态映射到URL上，这样当状态变化时，URL也会相应地更新，反之亦然。这样做的好处是用户可以刷新页面或者通过复制粘贴URL的方式直接进入应用中的某个状态，大大提高了应用的可用性。

状态管理与URL同步的关键在于配置 $stateProvider ，并提供相应的URL、模板、控制器和状态名称，如下所示：

angular.module('myApp', ['ui.router'])
  .config(function($stateProvider) {
    $stateProvider
      .state('home', {
        url: '/home',
        templateUrl: 'views/home.html',
        controller: 'HomeController'
      })
      .state('about', {
        url: '/about',
        templateUrl: 'views/about.html',
        controller: 'AboutController'
      })
      // 更多状态配置...
  });

通过这种方式，当应用处于 home 状态时，URL会显示为 /#/home ，而当用户直接访问 /#/about 时，应用会自动进入 about 状态，并显示对应的视图内容。

通过这些示例，我们展示了如何在AngularJS中配置和使用路由来管理单页应用的导航和页面跳转。正确的路由配置不仅提升了用户体验，还增强了应用的可维护性和扩展性。

7. 数据格式化和转换的过滤器

过滤器是AngularJS中用于转换数据的指令，它允许开发者以声明式的方式处理数据的显示方式，无需改变数据的底层存储。过滤器可以在任何数据绑定表达式中使用，非常适合于格式化文本、数字、日期等显示在视图中的数据。

7.1 过滤器的概念和分类

7.1.1 过滤器的定义与用途

过滤器（Filter）是AngularJS中用于格式化数据的组件。它们可以被用于几乎任何需要输出数据的地方，包括插值表达式、 {{}} ，指令属性和数据绑定。过滤器的主要用途包括：

• 对数据进行格式化，如将数字格式化为货币值或百分比。
• 过滤数组和对象。
• 管理数据的大小写。
• 对数据进行排序。

7.1.2 内置过滤器的介绍和使用

AngularJS提供了多种内置过滤器，以下是一些常用的内置过滤器：

• currency ：将数字转换成货币格式。
• filter ：过滤数组集合。
• orderBy ：对数组集合进行排序。
• number ：格式化数字。
• uppercase 和 lowercase ：转换文本的大小写。

使用内置过滤器非常简单，只需在绑定表达式中通过管道符 | 调用即可，例如：

<!-- 格式化货币 -->
<p>Item Price: {{ item.price | currency }}</p>

<!-- 数字格式化 -->
<p>Number: {{ 12345 | number }}</p>

<!-- 排序数组 -->
<p>Filtered Items: {{ items | filter:searchText | orderBy: 'name' }}</p>

7.2 创建自定义过滤器

7.2.1 自定义过滤器的创建步骤

创建自定义过滤器是一个简单的过程，只需要以下几个步骤：

1. 在你的AngularJS模块中注册过滤器。
2. 创建一个JavaScript函数来实现过滤逻辑。
3. 在该函数中添加必要的过滤条件。
4. 返回过滤后的结果。

以下是创建自定义过滤器的示例代码：

angular.module('myApp').filter('myFilter', function() {
    return function(items, filterText) {
        if (!items) return [];
        var filtered = [];
        for (var i = 0; i < items.length; i++) {
            if (items[i].name.toLowerCase().indexOf(filterText.toLowerCase()) !== -1) {
                filtered.push(items[i]);
            }
        }
        return filtered;
    };
});

7.2.2 自定义过滤器的应用示例

在视图中使用自定义过滤器非常直接。首先需要在控制器中注入过滤器，然后在绑定表达式中引用它：

<div ng-controller="FilterController">
    <input type="text" ng-model="searchText">
    <ul>
        <li ng-repeat="item in items | myFilter:searchText">
            {{ item.name }}
        </li>
    </ul>
</div>

angular.module('myApp').controller('FilterController', ['$scope', function($scope) {
    $scope.items = [
        { name: 'Item A' },
        { name: 'Item B' },
        { name: 'Item C' }
    ];
    $scope.searchText = '';
}]);

在上述代码中， myFilter 是我们刚刚定义的过滤器，它根据输入的文本过滤列表中的项目。这种方式不仅保持了视图和业务逻辑的分离，而且使得数据展示更加灵活和模块化。

本文还有配套的精品资源，点击获取

简介：AngularJS是一个由Google支持的前端框架，使用MVC架构和数据绑定来简化动态Web应用的开发。该框架提供了模型、视图、控制器等核心概念，以及指令、依赖注入、服务、路由、过滤器、模块和测试等特性。这个适合初学者的AngularJS demo项目包含了这些基础知识的实例，旨在通过实践帮助初学者理解和掌握AngularJS的开发流程。

本文还有配套的精品资源，点击获取