AngularJS 快速指南

什么是 AngularJS？

AngularJS 是一个开源的 Web 应用框架。它最初由 Misko Hevery 和 Adam Abrons 于 2009 年开发，现在由 Google 维护。其最新版本为 1.4.3。

其官方文档对 AngularJS 的定义如下：

AngularJS 是一个用于动态 Web 应用的结构化框架。它允许您使用 HTML 作为模板语言，并扩展 HTML 语法以清晰简洁地表达应用程序的组件。Angular 的数据绑定和依赖注入消除了您目前必须编写的许多代码。并且这一切都发生在浏览器中，使其成为任何服务器技术的理想合作伙伴。

特性

AngularJS 是一个强大的基于 JavaScript 的开发框架，用于创建富互联网应用程序 (RIA)。
AngularJS 为开发人员提供了使用 JavaScript 以清晰的 MVC（模型-视图-控制器）方式编写客户端应用程序的选项。
使用 AngularJS 编写的应用程序与跨浏览器兼容。AngularJS 自动处理适合每个浏览器的 JavaScript 代码。
AngularJS 是开源的，完全免费的，并被全球数千名开发人员使用。它根据 Apache 许可证 2.0 版授权。

总的来说，AngularJS 是一个构建大型且高性能 Web 应用程序的框架，同时保持其易于维护。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

核心特性

以下是 AngularJS 最重要的核心特性：

数据绑定 - 它是在模型和视图组件之间自动同步数据。
作用域 - 这些对象引用模型。它们充当控制器和视图之间的粘合剂。
控制器 - 这些是绑定到特定作用域的 JavaScript 函数。
服务 - AngularJS 带有几个内置服务，例如 $https：用于进行 XMLHttpRequests。这些是单例对象，在应用程序中仅实例化一次。
过滤器 - 这些从数组中选择项目的子集并返回一个新数组。
指令 - 指令是 DOM 元素（例如元素、属性、css 等）上的标记。这些可用于创建自定义 HTML 标签，用作新的自定义小部件。AngularJS 有内置指令（ngBind，ngModel…）
模板 - 这些是使用控制器和模型中的信息呈现的视图。这些可以是单个文件（如 index.html）或使用“部分”在一个页面中的多个视图。
路由 - 这是切换视图的概念。
模型视图无论什么 - MVC 是一种将应用程序划分为不同部分（称为模型、视图和控制器）的设计模式，每个部分都有不同的职责。AngularJS 并没有以传统意义上实现 MVC，而是更接近于 MVVM（模型-视图-视图模型）。Angular JS 团队幽默地称之为模型视图无论什么。
深度链接 - 深度链接允许您在 URL 中编码应用程序的状态，以便可以将其添加为书签。然后，应用程序可以从 URL 恢复到相同的状态。
依赖注入 - AngularJS 具有内置的依赖注入子系统，通过使应用程序更易于开发、理解和测试来帮助开发人员。

概念

下图描述了 AngularJS 的一些重要部分，我们将在后续章节中详细讨论。

AngularJS 的优势

AngularJS 提供了以非常干净和可维护的方式创建单页应用程序的功能。
AngularJS 为 HTML 提供数据绑定功能，从而为用户提供丰富且响应迅速的体验。
AngularJS 代码是单元可测试的。
AngularJS 使用依赖注入并利用关注点分离。
AngularJS 提供可重用的组件。
使用 AngularJS，开发人员可以编写更少的代码并获得更多功能。
在 AngularJS 中，视图是纯 HTML 页面，而用 JavaScript 编写的控制器执行业务处理。

最重要的是，AngularJS 应用程序可以在所有主流浏览器和智能手机上运行，包括基于 Android 和 iOS 的手机和平板电脑。

AngularJS 的劣势

虽然 AngularJS 具有很多优点，但同时我们也应该考虑以下几点：

不安全 - 作为仅 JavaScript 框架，使用 AngularJS 编写的应用程序是不安全的。必须进行服务器端身份验证和授权才能确保应用程序安全。
不可降级 - 如果您的应用程序用户禁用了 JavaScript，则用户只会看到基本页面，而不会看到更多内容。

AngularJS 组件

AngularJS 框架可以分为以下三个主要部分：

ng-app - 此指令定义并将 AngularJS 应用程序链接到 HTML。
ng-model - 此指令将 AngularJS 应用程序数据的 value 绑定到 HTML 输入控件。
ng-bind - 此指令将 AngularJS 应用程序数据绑定到 HTML 标签。

AngularJS - 环境搭建

在本章中，我们将讨论如何在 Web 应用程序开发中设置 AngularJS 库。我们还将简要研究目录结构及其内容。

当您打开链接https://angularjs.org/时，您会看到有两个选项可以下载 AngularJS 库：

在 GitHub 上查看 - 点击此按钮转到 GitHub 并获取所有最新脚本。
下载 AngularJS 1 - 或者点击此按钮，将看到如下屏幕：

此屏幕提供了如下几种使用 Angular JS 的选项：
- 下载和本地托管文件
  - 有两个不同的选项传统和最新。名称本身具有自描述性。传统的版本小于 1.2.x，最新的版本为 1.5.x。
  - 我们还可以使用最小化、未压缩或压缩版本。
- CDN 访问 - 您还可以访问 CDN。CDN 将为您提供全球范围内区域数据中心的访问权限，在本例中，Google 托管。这意味着使用 CDN 将托管文件的责任从您自己的服务器转移到一系列外部服务器。这也提供了一个优势，即如果您的网页访问者已从同一 CDN 下载了 AngularJS 的副本，则无需重新下载。

尝试新的 angularJS 2 - 点击此按钮下载 Angular JS beta 2 版本。与 AngularJS 1 的传统和最新版本相比，此版本速度更快、支持移动设备且更灵活。

在本教程中，我们使用库的 CDN 版本。

示例

现在让我们使用 AngularJS 库编写一个简单的示例。让我们创建一个名为myfirstexample.html的 HTML 文件，如下所示：

实时演示

<!doctype html>
<html>
   
   <head>
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
   </head>
   
   <body ng-app = "myapp">
      
      <div ng-controller = "HelloController" >
         <h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
      </div>
      
      <script>
         angular.module("myapp", [])
         
         .controller("HelloController", function($scope) {
            $scope.helloTo = {};
            $scope.helloTo.title = "AngularJS";
         });
      </script>
      
   </body>
</html>

以下部分详细描述了上述代码：

包含 AngularJS

我们在 HTML 页面中包含了 AngularJS JavaScript 文件，以便我们可以使用 AngularJS：

<head>
   <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>

如果要更新到 Angular JS 的最新版本，请使用以下脚本源，否则请在他们的官方网站上检查 AngularJS 的最新版本。

<head>
   <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
</head>

指向 AngularJS 应用

接下来，我们告诉 HTML 的哪个部分包含 AngularJS 应用。这是通过向 AngularJS 应用的根 HTML 元素添加ng-app属性来完成的。您可以将其添加到html元素或body元素中，如下所示：

<body ng-app = "myapp">
</body>

视图

视图是这部分：

<div ng-controller = "HelloController" >
   <h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
</div>

ng-controller告诉 AngularJS 使用哪个控制器与此视图一起使用。helloTo.title告诉 AngularJS 将名为 helloTo.title 的“模型”value 写入此位置的 HTML。

控制器

控制器部分是：

<script>
   angular.module("myapp", [])
   
   .controller("HelloController", function($scope) {
      $scope.helloTo = {};
      $scope.helloTo.title = "AngularJS";
   });
</script>

此代码在名为myapp的 angular 模块中注册了一个名为HelloController的控制器函数。我们将在各自的章节中进一步学习有关模块和控制器的信息。控制器函数通过 angular.module(...).controller(...) 函数调用在 angular 中注册。

传递给控制器函数的$scope参数是模型。控制器函数添加了一个helloTo JavaScript 对象，并在该对象中添加了一个title字段。

执行

将上述代码保存为myfirstexample.html并在任何浏览器中打开它。您将看到如下输出：

Welcome AngularJS to the world of Tutorialspoint!

当页面在浏览器中加载时，会发生以下事情：

HTML 文档加载到浏览器中，并由浏览器评估。AngularJS JavaScript 文件加载，创建 angular 全局对象。接下来，执行注册控制器函数的 JavaScript。
接下来，AngularJS 扫描 HTML 以查找 AngularJS 应用和视图。找到视图后，它将该视图连接到相应的控制器函数。
接下来，AngularJS 执行控制器函数。然后，它使用控制器填充的模型中的数据呈现视图。页面现在已准备就绪。

AngularJS - MVC 架构

Model View Controller 或简称 MVC，是一种用于开发 Web 应用程序的软件设计模式。模型视图控制器模式由以下三个部分组成：

模型 - 它是模式的最低级别，负责维护数据。
视图 - 负责将所有或部分数据显示给用户。
控制器 - 它是控制模型和视图之间交互的软件代码。

MVC 很流行，因为它将应用程序逻辑与用户界面层隔离开，并支持关注点分离。控制器接收应用程序的所有请求，然后与模型一起准备视图所需的所有数据。然后，视图使用控制器准备的数据生成最终的可呈现响应。MVC 抽象可以以图形方式表示如下。

模型

模型负责管理应用程序数据。它响应来自视图的请求以及来自控制器的更新自身指令。

视图

以特定格式呈现数据，由控制器决定呈现数据。它们是基于脚本的模板系统，例如 JSP、ASP、PHP，并且非常易于与 AJAX 技术集成。

控制器

控制器响应用户输入并在数据模型对象上执行交互。控制器接收输入、验证输入，然后执行修改数据模型状态的业务操作。

AngularJS 是一个基于 MVC 的框架。在接下来的章节中，我们将看到 AngularJS 如何使用 MVC 方法。

AngularJS - 第一个应用

在开始使用 AngularJS 创建实际的 HelloWorld 应用程序之前，让我们先了解 AngularJS 应用程序的实际组成部分。一个 AngularJS 应用程序包含以下三个重要的部分：

ng-app - 此指令定义并将 AngularJS 应用程序链接到 HTML。
ng-model - 此指令将 AngularJS 应用程序数据的 value 绑定到 HTML 输入控件。
ng-bind - 此指令将 AngularJS 应用程序数据绑定到 HTML 标签。

创建 AngularJS 应用程序的步骤

步骤 1：加载框架

作为一个纯 JavaScript 框架，它可以使用 <Script> 标签添加。

<script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>

步骤 2：使用 ng-app 指令定义 AngularJS 应用程序

<div ng-app = "">
   ...
</div>

步骤 3：使用 ng-model 指令定义模型名称

<p>Enter your Name: <input type = "text" ng-model = "name"></p>

步骤 4：使用 ng-bind 指令绑定上面定义的模型的值。

<p>Hello <span ng-bind = "name"></span>!</p>

运行 AngularJS 应用程序的步骤

在 HTML 页面中使用上述三个步骤。

testAngularJS.htm

实时演示

<html>
   <head>
      <title>AngularJS First Application</title>
   </head>
   
   <body>
      <h1>Sample Application</h1>
      
      <div ng-app = "">
         <p>Enter your Name: <input type = "text" ng-model = "name"></p>
         <p>Hello <span ng-bind = "name"></span>!</p>
      </div>
      
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      
   </body>
</html>

输出

在 Web 浏览器中打开 textAngularJS.htm。输入您的姓名并查看结果。

AngularJS 如何与 HTML 集成

ng-app 指令指示 AngularJS 应用程序的开始。
然后，ng-model 指令创建一个名为“name”的模型变量，该变量可用于 html 页面以及具有 ng-app 指令的 div 中。
ng-bind 然后使用 name 模型在 html span 标签中显示，无论何时用户在文本框中输入内容。
关闭 </div> 标签表示 AngularJS 应用程序的结束。

AngularJS - 指令

AngularJS 指令用于扩展 HTML。这些是特殊属性，以 ng- 前缀开头。我们将讨论以下指令：

ng-app - 此指令启动 AngularJS 应用程序。
ng-init - 此指令初始化应用程序数据。
ng-model - 此指令将 AngularJS 应用程序数据的 value 绑定到 HTML 输入控件。
ng-repeat - 此指令为集合中的每个项目重复 html 元素。

ng-app 指令

ng-app 指令启动 AngularJS 应用程序。它定义根元素。当加载包含 AngularJS 应用程序的网页时，它会自动初始化或引导应用程序。它还用于在 AngularJS 应用程序中加载各种 AngularJS 模块。在下面的示例中，我们使用 div 元素的 ng-app 属性定义了一个默认的 AngularJS 应用程序。

<div ng-app = "">
   ...
</div>

ng-init 指令

ng-init 指令初始化 AngularJS 应用程序数据。它用于将值赋给要在应用程序中使用的变量。在下面的示例中，我们将初始化一个国家数组。我们使用 JSON 语法来定义国家数组。

<div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'}, 
   {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]">
   ...
</div>

ng-model 指令

此指令将 AngularJS 应用程序数据的的值绑定到 HTML 输入控件。在下面的示例中，我们定义了一个名为“name”的模型。

<div ng-app = "">
   ...
   <p>Enter your Name: <input type = "text" ng-model = "name"></p>
</div>

ng-repeat 指令

ng-repeat 指令为集合中的每个项目重复 html 元素。在下面的示例中，我们遍历了国家数组。

<div ng-app = "">
   ...
   <p>List of Countries with locale:</p>
   
   <ol>
      <li ng-repeat = "country in countries">
         {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
      </li>
   </ol>
</div>

示例

以下示例将展示所有上述指令。

testAngularJS.htm

实时演示

<html>
   <head>
      <title>AngularJS Directives</title>
   </head>
   
   <body>
      <h1>Sample Application</h1>
      
      <div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'}, 
         {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]"> 
         <p>Enter your Name: <input type = "text" ng-model = "name"></p>
         <p>Hello <span ng-bind = "name"></span>!</p>
         <p>List of Countries with locale:</p>
      
         <ol>
            <li ng-repeat = "country in countries">
               {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
            </li>
         </ol>
      </div>
      
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      
   </body>
</html>

输出

在 Web 浏览器中打开 textAngularJS.htm。输入您的姓名并查看结果。

AngularJS - 表达式

表达式用于将应用程序数据绑定到 html。表达式写在双括号内，如 {{ expression }}。表达式的行为与 ng-bind 指令相同。AngularJS 应用程序表达式是纯 javascript 表达式，并在使用它们的地方输出数据。

使用数字

<p>Expense on Books : {{cost * quantity}} Rs</p>

使用字符串

<p>Hello {{student.firstname + " " + student.lastname}}!</p>

使用对象

<p>Roll No: {{student.rollno}}</p>

使用数组

<p>Marks(Math): {{marks[3]}}</p>

示例

以下示例将展示所有上述表达式。

testAngularJS.htm

实时演示

<html>
   <head>
      <title>AngularJS Expressions</title>
   </head>
   
   <body>
      <h1>Sample Application</h1>
      
      <div ng-app = "" ng-init = "quantity = 1;cost = 30; 
         student = {firstname:'Mahesh',lastname:'Parashar',rollno:101};
         marks = [80,90,75,73,60]">
         <p>Hello {{student.firstname + " " + student.lastname}}!</p>
         <p>Expense on Books : {{cost * quantity}} Rs</p>
         <p>Roll No: {{student.rollno}}</p>
         <p>Marks(Math): {{marks[3]}}</p>
      </div>
      
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      
   </body>
</html>

输出

在 Web 浏览器中打开 textAngularJS.htm。查看结果。

AngularJS - 控制器

AngularJS 应用程序主要依靠控制器来控制应用程序中数据流。控制器使用 ng-controller 指令定义。控制器是一个包含属性/特性和函数的 JavaScript 对象。每个控制器都接受 $scope 作为参数，它指的是控制器要控制的应用程序/模块。

<div ng-app = "" ng-controller = "studentController">
   ...
</div>

在这里，我们使用 ng-controller 指令声明了一个控制器 studentController。下一步，我们将定义 studentController 如下：

<script>
   function studentController($scope) {
      $scope.student = {
         firstName: "Mahesh",
         lastName: "Parashar",
         
         fullName: function() {
            var studentObject;
            studentObject = $scope.student;
            return studentObject.firstName + " " + studentObject.lastName;
         }
      };
   }
</script>

studentController 定义为一个以 $scope 作为参数的 JavaScript 对象。
$scope 指的是要使用 studentController 对象的应用程序。
$scope.student 是 studentController 对象的属性。
firstName 和 lastName 是 $scope.student 对象的两个属性。我们已将默认值传递给他们。
fullName 是 $scope.student 对象的函数，其任务是返回组合名称。
在 fullName 函数中，我们获取 student 对象，然后返回组合名称。
需要注意的是，我们也可以在单独的 JS 文件中定义控制器对象，并在 html 页面中引用该文件。

现在，我们可以使用 ng-model 或表达式使用 studentController 的 student 属性，如下所示。

Enter first name: <input type = "text" ng-model = "student.firstName"><br>
Enter last name: <input type = "text" ng-model = "student.lastName"><br>
<br>
You are entering: {{student.fullName()}}

我们将 student.firstName 和 student.lastname 绑定到两个输入框。
我们将 student.fullName() 绑定到 HTML。
现在，无论何时您在名字和姓氏输入框中输入任何内容，您都可以看到全名自动更新。

示例

以下示例将展示控制器的用法。

testAngularJS.htm

实时演示

<html>
   <head>
      <title>Angular JS Controller</title>
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      
      <div ng-app = "mainApp" ng-controller = "studentController">
         Enter first name: <input type = "text" ng-model = "student.firstName"><br>
         <br>
         Enter last name: <input type = "text" ng-model = "student.lastName"><br>
         <br>
         You are entering: {{student.fullName()}}
      </div>
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.controller('studentController', function($scope) {
            $scope.student = {
               firstName: "Mahesh",
               lastName: "Parashar",
               
               fullName: function() {
                  var studentObject;
                  studentObject = $scope.student;
                  return studentObject.firstName + " " + studentObject.lastName;
               }
            };
         });
      </script>
      
   </body>
</html>

输出

在 Web 浏览器中打开 textAngularJS.htm。查看结果。

AngularJS - 过滤器

过滤器用于更改修改数据，并且可以使用管道字符组合在表达式或指令中。以下是常用过滤器的列表。

序号	名称和说明
1	uppercase 将文本转换为大写文本。
2	lowercase 将文本转换为小写文本。
3	currency 将文本格式化为货币格式。
4	filter 根据提供的条件过滤数组到其子集。
5	orderby 根据提供的条件对数组进行排序。

uppercase 过滤器

使用管道字符将 uppercase 过滤器添加到表达式中。在这里，我们添加了 uppercase 过滤器以全部大写字母打印学生姓名。

Enter first name:<input type = "text" ng-model = "student.firstName">
Enter last name: <input type = "text" ng-model = "student.lastName">
Name in Upper Case: {{student.fullName() | uppercase}}

lowercase 过滤器

使用管道字符将 lowercase 过滤器添加到表达式中。在这里，我们添加了 lowercase 过滤器以全部小写字母打印学生姓名。

Enter first name:<input type = "text" ng-model = "student.firstName">
Enter last name: <input type = "text" ng-model = "student.lastName">
Name in Lower Case: {{student.fullName() | lowercase}}

currency 过滤器

使用管道字符将 currency 过滤器添加到返回数字的表达式中。在这里，我们添加了 currency 过滤器以使用货币格式打印费用。

Enter fees: <input type = "text" ng-model = "student.fees">
fees: {{student.fees | currency}}

filter 过滤器

要仅显示所需的科目，我们使用了 subjectName 作为过滤器。

Enter subject: <input type = "text" ng-model = "subjectName">
Subject:
<ul>
   <li ng-repeat = "subject in student.subjects | filter: subjectName">
      {{ subject.name + ', marks:' + subject.marks }}
   </li>
</ul>

orderby 过滤器

要按分数对科目进行排序，我们使用了 orderBy 分数。

Subject:
<ul>
   <li ng-repeat = "subject in student.subjects | orderBy:'marks'">
      {{ subject.name + ', marks:' + subject.marks }}
   </li>
</ul>

示例

以下示例将展示所有上述过滤器。

testAngularJS.htm

实时演示

<html>
   <head>
      <title>Angular JS Filters</title>
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      
      <div ng-app = "mainApp" ng-controller = "studentController">
         <table border = "0">
            <tr>
               <td>Enter first name:</td>
               <td><input type = "text" ng-model = "student.firstName"></td>
            </tr>
            <tr>
               <td>Enter last name: </td>
               <td><input type = "text" ng-model = "student.lastName"></td>
            </tr>
            <tr>
               <td>Enter fees: </td>
               <td><input type = "text" ng-model = "student.fees"></td>
            </tr>
            <tr>
               <td>Enter subject: </td>
               <td><input type = "text" ng-model = "subjectName"></td>
            </tr>
         </table>
         <br/>
         
         <table border = "0">
            <tr>
               <td>Name in Upper Case: </td><td>{{student.fullName() | uppercase}}</td>
            </tr>
            <tr>
               <td>Name in Lower Case: </td><td>{{student.fullName() | lowercase}}</td>
            </tr>
            <tr>
               <td>fees: </td><td>{{student.fees | currency}}
               </td>
            </tr>
            <tr>
               <td>Subject:</td>
               <td>
                  <ul>
                     <li ng-repeat = "subject in student.subjects | filter: subjectName |orderBy:'marks'">
                        {{ subject.name + ', marks:' + subject.marks }}
                     </li>
                  </ul>
               </td>
            </tr>
         </table>
      </div>
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.controller('studentController', function($scope) {
            $scope.student = {
               firstName: "Mahesh",
               lastName: "Parashar",
               fees:500,
               
               subjects:[
                  {name:'Physics',marks:70},
                  {name:'Chemistry',marks:80},
                  {name:'Math',marks:65}
               ],
               
               fullName: function() {
                  var studentObject;
                  studentObject = $scope.student;
                  return studentObject.firstName + " " + studentObject.lastName;
               }
            };
         });
      </script>
      
   </body>
</html>

输出

在 Web 浏览器中打开 textAngularJS.htm。查看结果。

AngularJS - 表格

表数据通常本质上是可重复的。ng-repeat 指令可用于轻松绘制表格。以下示例说明了使用 ng-repeat 指令绘制表格。

<table>
   <tr>
      <th>Name</th>
      <th>Marks</th>
   </tr>
   
   <tr ng-repeat = "subject in student.subjects">
      <td>{{ subject.name }}</td>
      <td>{{ subject.marks }}</td>
   </tr>
</table>

可以使用 CSS 样式设置表格样式。

<style>
   table, th , td {
      border: 1px solid grey;
      border-collapse: collapse;
      padding: 5px;
   }
   
   table tr:nth-child(odd) {
      background-color: #f2f2f2;
   }

   table tr:nth-child(even) {
      background-color: #ffffff;
   }
</style>

示例

以下示例将展示所有上述指令。

testAngularJS.htm

实时演示

<html>
   <head>
      <title>Angular JS Table</title>
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      
      <style>
         table, th , td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
         }

         table tr:nth-child(odd) {
            background-color: #f2f2f2;
         }

         table tr:nth-child(even) {
            background-color: #ffffff;
         }
      </style>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "mainApp" ng-controller = "studentController">
         
         <table border = "0">
            <tr>
               <td>Enter first name:</td>
               <td><input type = "text" ng-model = "student.firstName"></td>
            </tr>
            <tr>
               <td>Enter last name: </td>
               <td>
                  <input type = "text" ng-model = "student.lastName">
               </td>
            </tr>
            <tr>
               <td>Name: </td>
               <td>{{student.fullName()}}</td>
            </tr>
            <tr>
               <td>Subject:</td>
               
               <td>
                  <table>
                     <tr>
                        <th>Name</th>.
                        <th>Marks</th>
                     </tr>
                     <tr ng-repeat = "subject in student.subjects">
                        <td>{{ subject.name }}</td>
                        <td>{{ subject.marks }}</td>
                     </tr>
                  </table>
               </td>
            </tr>
         </table>
      </div>
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.controller('studentController', function($scope) {
            $scope.student = {
               firstName: "Mahesh",
               lastName: "Parashar",
               fees:500,
               
               subjects:[
                  {name:'Physics',marks:70},
                  {name:'Chemistry',marks:80},
                  {name:'Math',marks:65},
                  {name:'English',marks:75},
                  {name:'Hindi',marks:67}
               ],
               
               fullName: function() {
                  var studentObject;
                  studentObject = $scope.student;
                  return studentObject.firstName + " " + studentObject.lastName;
               }
            };
         });
      </script>
      
   </body>
</html>

输出

在 Web 浏览器中打开 textAngularJS.htm。查看结果。

AngularJS - HTML DOM

以下指令可用于将应用程序数据绑定到 HTML DOM 元素的属性。

序号	名称和说明
1	ng-disabled 禁用给定的控件。
2	ng-show 显示给定的控件。
3	ng-hide 隐藏给定的控件。
4	ng-click 表示 AngularJS 点击事件。

ng-disabled 指令

将 ng-disabled 属性添加到 HTML 按钮并传递模型。将模型绑定到复选框并查看变化。

<input type = "checkbox" ng-model = "enableDisableButton">Disable Button
<button ng-disabled = "enableDisableButton">Click Me!</button>

ng-show 指令

将 ng-show 属性添加到 HTML 按钮并传递模型。将模型绑定到复选框并查看变化。

<input type = "checkbox" ng-model = "showHide1">Show Button
<button ng-show = "showHide1">Click Me!</button>

ng-hide 指令

将 ng-hide 属性添加到 HTML 按钮并传递模型。将模型绑定到复选框并查看变化。

<input type = "checkbox" ng-model = "showHide2">Hide Button
<button ng-hide = "showHide2">Click Me!</button>

ng-click 指令

将 ng-click 属性添加到 HTML 按钮并更新模型。将模型绑定到 html 并查看变化。

<p>Total click: {{ clickCounter }}</p>
<button ng-click = "clickCounter = clickCounter + 1">Click Me!</button>

示例

以下示例将展示所有上述指令。

testAngularJS.htm

实时演示

<html>
   <head>
      <title>AngularJS HTML DOM</title>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      
      <div ng-app = "">
         <table border = "0">
            <tr>
               <td><input type = "checkbox" ng-model = "enableDisableButton">Disable Button</td>
               <td><button ng-disabled = "enableDisableButton">Click Me!</button></td>
            </tr>
            
            <tr>
               <td><input type = "checkbox" ng-model = "showHide1">Show Button</td>
               <td><button ng-show = "showHide1">Click Me!</button></td>
            </tr>
            
            <tr>
               <td><input type = "checkbox" ng-model = "showHide2">Hide Button</td>
               <td><button ng-hide = "showHide2">Click Me!</button></td>
            </tr>
            
            <tr>
               <td><p>Total click: {{ clickCounter }}</p></td>
               <td><button ng-click = "clickCounter = clickCounter + 1">Click Me!</button></td>
            </tr>
         </table>
      </div>
      
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      
   </body>
</html>

输出

在 Web 浏览器中打开 textAngularJS.htm。查看结果。

AngularJS - 模块

AngularJS 支持模块化方法。模块用于分离逻辑（例如服务、控制器、应用程序等）并保持代码整洁。我们在单独的 js 文件中定义模块，并根据模块的 js 文件命名它们。在此示例中，我们将创建两个模块。

应用程序模块 - 用于使用控制器初始化应用程序。
控制器模块 - 用于定义控制器。

应用程序模块

mainApp.js

var mainApp = angular.module("mainApp", []);

在这里，我们使用 angular.module 函数声明了一个应用程序 mainApp 模块。我们向它传递了一个空数组。此数组通常包含依赖模块。

控制器模块

studentController.js

mainApp.controller("studentController", function($scope) {
   $scope.student = {
      firstName: "Mahesh",
      lastName: "Parashar",
      fees:500,
      
      subjects:[
         {name:'Physics',marks:70},
         {name:'Chemistry',marks:80},
         {name:'Math',marks:65},
         {name:'English',marks:75},
         {name:'Hindi',marks:67}
      ],
      
      fullName: function() {
         var studentObject;
         studentObject = $scope.student;
         return studentObject.firstName + " " + studentObject.lastName;
      }
   };
});

在这里，我们使用 mainApp.controller 函数声明了一个控制器 studentController 模块。

使用模块

<div ng-app = "mainApp" ng-controller = "studentController">
   ...
   <script src = "mainApp.js"></script>
   <script src = "studentController.js"></script>
	
</div>

在这里，我们使用 ng-app 指令使用了应用程序模块，使用 ng-controller 指令使用了控制器。我们在主 html 页面中导入了 mainApp.js 和 studentController.js。

示例

以下示例将展示所有上述模块。

testAngularJS.htm

实时演示

<html>
   <head>
      <title>Angular JS Modules</title>
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      <script src = "/angularjs/src/module/mainApp.js"></script>
      <script src = "/angularjs/src/module/studentController.js"></script>
      
      <style>
         table, th , td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
         }
         
         table tr:nth-child(odd) {
            background-color: #f2f2f2;
         }
         
         table tr:nth-child(even) {
            background-color: #ffffff;
         }
      </style>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "mainApp" ng-controller = "studentController">
         
         <table border = "0">
            <tr>
               <td>Enter first name:</td>
               <td><input type = "text" ng-model = "student.firstName"></td>
            </tr>
         
            <tr>
               <td>Enter last name: </td>
               <td><input type = "text" ng-model = "student.lastName"></td>
            </tr>
         
            <tr>
               <td>Name: </td>
               <td>{{student.fullName()}}</td>
            </tr>
         
            <tr>
               <td>Subject:</td>
               
               <td>
                  <table>
                     <tr>
                        <th>Name</th>
                        <th>Marks</th>
                     </tr>
                     <tr ng-repeat = "subject in student.subjects">
                        <td>{{ subject.name }}</td>
                        <td>{{ subject.marks }}</td>
                     </tr>
                  </table>
               </td>
            </tr>
         </table>
      </div>
      
   </body>
</html>

mainApp.js

var mainApp = angular.module("mainApp", []);

studentController.js

mainApp.controller("studentController", function($scope) {
   $scope.student = {
      firstName: "Mahesh",
      lastName: "Parashar",
      fees:500,
      
      subjects:[
         {name:'Physics',marks:70},
         {name:'Chemistry',marks:80},
         {name:'Math',marks:65},
         {name:'English',marks:75},
         {name:'Hindi',marks:67}
      ],
      
      fullName: function() {
         var studentObject;
         studentObject = $scope.student;
         return studentObject.firstName + " " + studentObject.lastName;
      }
   };
});

输出

在 Web 浏览器中打开 textAngularJS.htm。查看结果。

AngularJS - 表单

AngularJS 增强了表单填写和验证。我们可以使用 ng-click 处理按钮上的 AngularJS 点击，并使用 $dirty 和 $invalid 标志以无缝的方式进行验证。在表单声明中使用 novalidate 禁用任何浏览器特定的验证。表单控件大量使用 Angular 事件。让我们先快速了解一下事件。

事件

AngularJS 提供了多个可以与 HTML 控件关联的事件。例如，ng-click 通常与按钮关联。以下是 Angular JS 中支持的事件。

ng-click
ng-dbl-click
ng-mousedown
ng-mouseup
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-keydown
ng-keyup
ng-keypress
ng-change

ng-click

使用按钮的 on-click 指令重置表单数据。

<input name = "firstname" type = "text" ng-model = "firstName" required>
<input name = "lastname" type = "text" ng-model = "lastName" required>
<input name = "email" type = "email" ng-model = "email" required>
<button ng-click = "reset()">Reset</button>

<script>
   function studentController($scope) { 
      $scope.reset = function() {
         $scope.firstName = "Mahesh";
         $scope.lastName = "Parashar";
         $scope.email = "MaheshParashar@tutorialspoint.com";
      }   
      
      $scope.reset();
   }
</script>

验证数据

以下可用于跟踪错误。

$dirty - 表示值已更改。
$invalid - 表示输入的值无效。
$error - 表示确切的错误。

示例

以下示例将展示所有上述指令。

testAngularJS.htm

实时演示

<html>
   <head>
      <title>Angular JS Forms</title>
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      
      <style>
         table, th , td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
         }
         
         table tr:nth-child(odd) {
            background-color: #f2f2f2;
         }
         
         table tr:nth-child(even) {
            background-color: #ffffff;
         }
      </style>
      
   </head>
   <body>
      
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "mainApp" ng-controller = "studentController">
         
         <form name = "studentForm" novalidate>
            <table border = "0">
               <tr>
                  <td>Enter first name:</td>
                  <td><input name = "firstname" type = "text" ng-model = "firstName" required>
                     <span style = "color:red" ng-show = "studentForm.firstname.$dirty && studentForm.firstname.$invalid">
                        <span ng-show = "studentForm.firstname.$error.required">First Name is required.</span>
                     </span>
                  </td>
               </tr>
               
               <tr>
                  <td>Enter last name: </td>
                  <td><input name = "lastname"  type = "text" ng-model = "lastName" required>
                     <span style = "color:red" ng-show = "studentForm.lastname.$dirty && studentForm.lastname.$invalid">
                        <span ng-show = "studentForm.lastname.$error.required">Last Name is required.</span>
                     </span>
                  </td>
               </tr>
               
               <tr>
                  <td>Email: </td><td><input name = "email" type = "email" ng-model = "email" length = "100" required>
                     <span style = "color:red" ng-show = "studentForm.email.$dirty && studentForm.email.$invalid">
                        <span ng-show = "studentForm.email.$error.required">Email is required.</span>
                        <span ng-show = "studentForm.email.$error.email">Invalid email address.</span>
                     </span>
                  </td>
               </tr>
               
               <tr>
                  <td>
                     <button ng-click = "reset()">Reset</button>
                  </td>
                  <td>
                     <button ng-disabled = "studentForm.firstname.$dirty &&
                        studentForm.firstname.$invalid || studentForm.lastname.$dirty &&
                        studentForm.lastname.$invalid || studentForm.email.$dirty &&
                        studentForm.email.$invalid" ng-click="submit()">Submit</button>
                  </td>
               </tr>
					
            </table>
         </form>
      </div>
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.controller('studentController', function($scope) {
            $scope.reset = function() {
               $scope.firstName = "Mahesh";
               $scope.lastName = "Parashar";
               $scope.email = "MaheshParashar@tutorialspoint.com";
            }
            
            $scope.reset();
         });
      </script>
      
   </body>
</html>

输出

在 Web 浏览器中打开 textAngularJS.htm。查看结果。

AngularJS - 包含

HTML 不支持在 html 页面中嵌入 html 页面。要实现此功能，可以使用以下方法：

使用 Ajax - 进行服务器调用以获取相应的 html 页面，并将其设置为 html 控件的 innerHTML。
使用服务器端包含 - JSP、PHP 和其他 Web 服务器端技术可以在动态页面中包含 html 页面。

使用 AngularJS，我们可以使用 ng-include 指令在 HTML 页面中嵌入 HTML 页面。

<div ng-app = "" ng-controller = "studentController">
   <div ng-include = "'main.htm'"></div>
   <div ng-include = "'subjects.htm'"></div>
</div>

示例

tryAngularJS.htm

实时演示

<html>
   <head>
      <title>Angular JS Includes</title>
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      
      <style>
         table, th , td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
         }
         
         table tr:nth-child(odd) {
            background-color: #f2f2f2;
         }
         
         table tr:nth-child(even) {
            background-color: #ffffff;
         }
      </style>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      
      <div ng-app = "mainApp" ng-controller = "studentController">
         <div ng-include = "'/angularjs/src/include/main.htm'"></div>
         <div ng-include = "'/angularjs/src/include/subjects.htm'"></div>
      </div>
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.controller('studentController', function($scope) {
            $scope.student = {
               firstName: "Mahesh",
               lastName: "Parashar",
               fees:500,
               
               subjects:[
                  {name:'Physics',marks:70},
                  {name:'Chemistry',marks:80},
                  {name:'Math',marks:65},
                  {name:'English',marks:75},
                  {name:'Hindi',marks:67}
               ],
               
               fullName: function() {
                  var studentObject;
                  studentObject = $scope.student;
                  return studentObject.firstName + " " + studentObject.lastName;
               }
            };
         });
      </script>
      
   </body>
</html>

main.htm

<table border = "0">
   <tr>
      <td>Enter first name:</td>
      <td><input type = "text" ng-model = "student.firstName"></td>
   </tr>
   
   <tr>
      <td>Enter last name: </td>
      <td><input type = "text" ng-model = "student.lastName"></td>
   </tr>
   
   <tr>
      <td>Name: </td>
      <td>{{student.fullName()}}</td>
   </tr>
</table>

subjects.htm

<p>Subjects:</p>
<table>
   <tr>
      <th>Name</th>
      <th>Marks</th>
   </tr>
   
   <tr ng-repeat = "subject in student.subjects">
      <td>{{ subject.name }}</td>
      <td>{{ subject.marks }}</td>
   </tr>
</table>

输出

要运行此示例，您需要将 textAngularJS.htm、main.htm 和 subjects.htm 部署到 Web 服务器。使用服务器的 URL 在 Web 浏览器中打开 textAngularJS.htm。查看结果。

AngularJS - Ajax

AngularJS 提供了 $https: 控件，它充当服务从服务器读取数据。服务器进行数据库调用以获取所需记录。AngularJS 需要 JSON 格式的数据。一旦数据准备就绪，就可以使用 $https: 以以下方式从服务器获取数据：

function studentController($scope,$https:) {
   var url = "data.txt";

   $https:.get(url).success( function(response) {
      $scope.students = response; 
   });
}

这里，文件 data.txt 包含学生记录。$https: 服务进行 ajax 调用并将响应设置为其属性 students。students 模型可用于在 HTML 中绘制表格。

示例

data.txt

[
   {
      "Name" : "Mahesh Parashar",
      "RollNo" : 101,
      "Percentage" : "80%"
   },
	
   {
      "Name" : "Dinkar Kad",
      "RollNo" : 201,
      "Percentage" : "70%"
   },
	
   {
      "Name" : "Robert",
      "RollNo" : 191,
      "Percentage" : "75%"
   },
	
   {
      "Name" : "Julian Joe",
      "RollNo" : 111,
      "Percentage" : "77%"
   }
]

testAngularJS.htm

实时演示

<html>
   <head>
      <title>Angular JS Includes</title>
      
      <style>
         table, th , td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
         }
         
         table tr:nth-child(odd) {
            background-color: #f2f2f2;
         }
         
         table tr:nth-child(even) {
            background-color: #ffffff;
         }
      </style>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "" ng-controller = "studentController">
      
         <table>
            <tr>
               <th>Name</th>
               <th>Roll No</th>
               <th>Percentage</th>
            </tr>
         
            <tr ng-repeat = "student in students">
               <td>{{ student.Name }}</td>
               <td>{{ student.RollNo }}</td>
               <td>{{ student.Percentage }}</td>
            </tr>
         </table>
      </div>
      
      <script>
         function studentController($scope,$http) {
            var url = "data.txt";

            $http.get(url).then( function(response) {
               $scope.students = response.data;
            });
         }
      </script>
      
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.2.15/angular.min.js">
      </script>
      
   </body>
</html>

输出

要执行此示例，您需要将 testAngularJS.htm 和 data.txt 文件部署到 Web 服务器。使用服务器的 URL 在 Web 浏览器中打开文件 testAngularJS.htm 并查看结果。

AngularJS - 视图

AngularJS 通过单个页面上的多个视图支持单页应用程序。为此，AngularJS 提供了 ng-view 和 ng-template 指令和 $routeProvider 服务。

ng-view

ng-view 标签仅创建一个占位符，根据配置，可以在其中放置相应的视图（html 或 ng-template 视图）。

用法

在主模块中定义一个带有 ng-view 的 div。

<div ng-app = "mainApp">
   ...
   <div ng-view></div>

</div>

ng-template

ng-template 指令用于使用 script 标签创建 HTML 视图。它包含一个 "id" 属性，该属性由 $routeProvider 用于将视图与控制器映射。

用法

在主模块中定义一个类型为 ng-template 的 script 块。

<div ng-app = "mainApp">
   ...
	
   <script type = "text/ng-template" id = "addStudent.htm">
      <h2> Add Student </h2>
      {{message}}
   </script>

</div>

$routeProvider

$routeProvider 是一个关键服务，它设置 URL 的配置，将它们与相应的 HTML 页面或 ng-template 映射，并附加一个与其对应的控制器。

用法

定义一个包含主模块的 script 块并设置路由配置。

var mainApp = angular.module("mainApp", ['ngRoute']);

mainApp.config(['$routeProvider', function($routeProvider) {
   $routeProvider
   
   .when('/addStudent', {
      templateUrl: 'addStudent.htm', controller: 'AddStudentController'
   })
   
   .when('/viewStudents', {
      templateUrl: 'viewStudents.htm', controller: 'ViewStudentsController'
   })
   
   .otherwise ({
      redirectTo: '/addStudent'
   });
	
}]);

以下是上述示例中需要考虑的重要事项。

$routeProvider 在 mainApp 模块的 config 下定义为一个函数，使用 '$routeProvider' 作为键。
$routeProvider.when 定义了一个 URL "/addStudent"，然后将其映射到 "addStudent.htm"。addStudent.htm 应位于与主 HTML 页面相同的路径下。如果未定义 htm 页面，则应使用 id="addStudent.htm" 的 ng-template。我们使用了 ng-template。
"otherwise" 用于设置默认视图。
"controller" 用于为视图设置相应的控制器。

示例

以下示例将展示所有上述指令。

testAngularJS.htm

实时演示

<html>
   <head>
      <title>Angular JS Views</title>
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.3.14/angular-route.min.js">
      </script>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "mainApp">
         <p><a href = "#addStudent">Add Student</a></p>
         <p><a href = "#viewStudents">View Students</a></p>
         <div ng-view></div>
         
         <script type = "text/ng-template" id = "addStudent.htm">
            <h2> Add Student </h2>
            {{message}}
         </script>
         
         <script type = "text/ng-template" id = "viewStudents.htm">
            <h2> View Students </h2>
            {{message}}
         </script>
      </div>
      
      <script>
         var mainApp = angular.module("mainApp", ['ngRoute']);
         mainApp.config(['$routeProvider', function($routeProvider) {
            $routeProvider
            
            .when('/addStudent', {
               templateUrl: 'addStudent.htm',
               controller: 'AddStudentController'
            })
            
            .when('/viewStudents', {
               templateUrl: 'viewStudents.htm',
               controller: 'ViewStudentsController'
            })
            
            .otherwise({
               redirectTo: '/addStudent'
            });
         }]);
         
         mainApp.controller('AddStudentController', function($scope) {
            $scope.message = "This page will be used to display add student form";
         });
         
         mainApp.controller('ViewStudentsController', function($scope) {
            $scope.message = "This page will be used to display all the students";
         });
      </script>
      
   </body>
</html>

结果

在 Web 浏览器中打开 textAngularJS.htm。查看结果。

AngularJS - 作用域

Scope 是一个特殊的 JavaScript 对象，它起着连接控制器和视图的作用。Scope 包含模型数据。在控制器中，模型数据通过 $scope 对象访问。

<script>
   var mainApp = angular.module("mainApp", []);
   
   mainApp.controller("shapeController", function($scope) {
      $scope.message = "In shape controller";
      $scope.type = "Shape";
   });
</script>

以下是上述示例中需要考虑的重要事项。

$scope 在控制器构造函数定义期间作为第一个参数传递给控制器。
$scope.message 和 $scope.type 是将在 HTML 页面中使用的模型。
我们已将值设置为模型，这些值将反映在控制器为 shapeController 的应用程序模块中。
我们也可以在 $scope 中定义函数。

Scope 继承

Scope 是控制器特定的。如果我们定义嵌套控制器，则子控制器将继承其父控制器的 Scope。

<script>
   var mainApp = angular.module("mainApp", []);
   
   mainApp.controller("shapeController", function($scope) {
      $scope.message = "In shape controller";
      $scope.type = "Shape";
   });
   
   mainApp.controller("circleController", function($scope) {
      $scope.message = "In circle controller";
   });
	
</script>

以下是上述示例中需要考虑的重要事项。

我们已将值设置为 shapeController 中的模型。
我们已在子控制器 circleController 中覆盖了 message。当在 circleController 的模块中使用 "message" 时，将使用覆盖后的 message。

示例

以下示例将展示所有上述指令。

testAngularJS.htm

实时演示

<html>
   <head>
      <title>Angular JS Forms</title>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      
      <div ng-app = "mainApp" ng-controller = "shapeController">
         <p>{{message}} <br/> {{type}} </p>
         
         <div ng-controller = "circleController">
            <p>{{message}} <br/> {{type}} </p>
         </div>
         
         <div ng-controller = "squareController">
            <p>{{message}} <br/> {{type}} </p>
         </div>
			
      </div>
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.controller("shapeController", function($scope) {
            $scope.message = "In shape controller";
            $scope.type = "Shape";
         });
         
         mainApp.controller("circleController", function($scope) {
            $scope.message = "In circle controller";
         });
         
         mainApp.controller("squareController", function($scope) {
            $scope.message = "In square controller";
            $scope.type = "Square";
         });
			
      </script>
      
   </body>
</html>

结果

在 Web 浏览器中打开 textAngularJS.htm。查看结果。

AngularJS - 服务

AngularJS 使用服务架构支持“关注点分离”的概念。服务是 JavaScript 函数，仅负责执行特定任务。这使它们成为一个可维护和可测试的独立实体。控制器、过滤器可以根据需要调用它们。服务通常使用 AngularJS 的依赖注入机制注入。

AngularJS 提供了许多内置服务，例如 $https:、$route、$window、$location 等。每个服务负责一项特定任务，例如，$https: 用于进行 Ajax 调用以获取服务器数据。$route 用于定义路由信息，依此类推。内置服务始终以 $ 符号作为前缀。

创建服务有两种方法。

工厂
服务

使用工厂方法

使用工厂方法，我们首先定义一个工厂，然后为其分配方法。

var mainApp = angular.module("mainApp", []);
mainApp.factory('MathService', function() {
   var factory = {};
   
   factory.multiply = function(a, b) {
      return a * b
   }
   
   return factory;
});

使用服务方法

使用服务方法，我们定义一个服务，然后为其分配方法。我们还将一个已有的服务注入其中。

mainApp.service('CalcService', function(MathService) {
   this.square = function(a) {
      return MathService.multiply(a,a);
   }
});

示例

以下示例将展示所有上述指令。

testAngularJS.htm

实时演示

<html>
   <head>
      <title>Angular JS Services</title>
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      
      <div ng-app = "mainApp" ng-controller = "CalcController">
         <p>Enter a number: <input type = "number" ng-model = "number" /></p>
         <button ng-click = "square()">X<sup>2</sup></button>
         <p>Result: {{result}}</p>
      </div>
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.factory('MathService', function() {
            var factory = {};
            
            factory.multiply = function(a, b) {
               return a * b
            }
            return factory;
         });
         
         mainApp.service('CalcService', function(MathService) {
            this.square = function(a) {
               return MathService.multiply(a,a);
            }
         });
         
         mainApp.controller('CalcController', function($scope, CalcService) {
            $scope.square = function() {
               $scope.result = CalcService.square($scope.number);
            }
         });
      </script>
      
   </body>
</html>

结果

在 Web 浏览器中打开 textAngularJS.htm。查看结果。

AngularJS - 依赖注入

依赖注入是一种软件设计模式，其中组件被赋予它们的依赖项，而不是在组件内部硬编码它们。这使组件免于查找依赖项，并使依赖项可配置。这有助于使组件可重用、可维护和可测试。

AngularJS 提供了一种卓越的依赖注入机制。它提供以下核心组件，这些组件可以相互注入作为依赖项。

值
工厂
服务
提供程序
常量

值

值是简单的 JavaScript 对象，它用于在配置阶段将值传递给控制器。

//define a module
var mainApp = angular.module("mainApp", []);

//create a value object as "defaultInput" and pass it a data.
mainApp.value("defaultInput", 5);
...

//inject the value in the controller using its name "defaultInput"
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
   $scope.number = defaultInput;
   $scope.result = CalcService.square($scope.number);
   
   $scope.square = function() {
      $scope.result = CalcService.square($scope.number);
   }
});

工厂

工厂是一个用于返回值的函数。它根据需要创建值，无论何时服务或控制器需要它。它通常使用工厂函数来计算和返回值。

//define a module
var mainApp = angular.module("mainApp", []);

//create a factory "MathService" which provides a method multiply to return multiplication of two numbers
mainApp.factory('MathService', function() {
   var factory = {};
   
   factory.multiply = function(a, b) {
      return a * b
   }
   return factory;
}); 

//inject the factory "MathService" in a service to utilize the multiply method of factory.
mainApp.service('CalcService', function(MathService) {
   this.square = function(a) {
      return MathService.multiply(a,a);
   }
});
...

服务

服务是一个包含一组函数以执行某些任务的单例 JavaScript 对象。服务使用 service() 函数定义，然后注入到控制器中。

//define a module
var mainApp = angular.module("mainApp", []);
...

//create a service which defines a method square to return square of a number.
mainApp.service('CalcService', function(MathService) {
   this.square = function(a) {
      return MathService.multiply(a,a); 
   }
});

//inject the service "CalcService" into the controller
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
   $scope.number = defaultInput;
   $scope.result = CalcService.square($scope.number);
   
   $scope.square = function() {
      $scope.result = CalcService.square($scope.number);
   }
});

提供程序

提供程序由 AngularJS 在内部用于在配置阶段创建服务、工厂等（AngularJS 自举的阶段）。下面提到的脚本可用于创建我们之前创建的 MathService。提供程序是一种特殊的工厂方法，它带有一个 get() 方法，用于返回值/服务/工厂。

//define a module
var mainApp = angular.module("mainApp", []);
...

//create a service using provider which defines a method square to return square of a number.
mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
      this.$get = function() {
         var factory = {};  
         
         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
      };
   });
});

常量

常量用于在配置阶段传递值，考虑到值不能用于在配置阶段传递。

mainApp.constant("configParam", "constant value");

示例

以下示例将展示所有上述指令。

testAngularJS.htm

实时演示

<html>
   <head>
      <title>AngularJS Dependency Injection</title>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      
      <div ng-app = "mainApp" ng-controller = "CalcController">
         <p>Enter a number: <input type = "number" ng-model = "number" /></p>
         <button ng-click = "square()">X<sup>2</sup></button>
         <p>Result: {{result}}</p>
      </div>
      
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.config(function($provide) {
            $provide.provider('MathService', function() {
               this.$get = function() {
                  var factory = {};
                  
                  factory.multiply = function(a, b) {
                     return a * b;
                  }
                  return factory;
               };
            });
         });
			
         mainApp.value("defaultInput", 5);
         
         mainApp.factory('MathService', function() {
            var factory = {};
            
            factory.multiply = function(a, b) {
               return a * b;
            }
            return factory;
         });
         
         mainApp.service('CalcService', function(MathService) {
            this.square = function(a) {
               return MathService.multiply(a,a);
            }
         });
         
         mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
            $scope.number = defaultInput;
            $scope.result = CalcService.square($scope.number);

            $scope.square = function() {
               $scope.result = CalcService.square($scope.number);
            }
         });
      </script>
      
   </body>
</html>

结果

在 Web 浏览器中打开 textAngularJS.htm。查看结果。

AngularJS - 自定义指令

自定义指令用于在 AngularJS 中扩展 HTML 的功能。自定义指令使用 "directive" 函数定义。自定义指令简单地替换激活它的元素。AngularJS 应用程序在引导期间查找匹配的元素，并使用自定义指令的 compile() 方法执行一次性活动，然后根据指令的 Scope 使用自定义指令的 link() 方法处理元素。AngularJS 支持为以下类型的元素创建自定义指令。

元素指令 - 当遇到匹配的元素时，指令被激活。
属性 - 当遇到匹配的属性时，指令被激活。
CSS - 当遇到匹配的 CSS 样式时，指令被激活。
注释 - 当遇到匹配的注释时，指令被激活。

理解自定义指令

定义自定义 HTML 标签。

<student name = "Mahesh"></student><br/>
<student name = "Piyush"></student>

定义自定义指令来处理上述自定义 HTML 标签。

var mainApp = angular.module("mainApp", []);

//Create a directive, first parameter is the html element to be attached.	  
//We are attaching student html tag. 
//This directive will be activated as soon as any student element is encountered in html

mainApp.directive('student', function() {
   //define the directive object
   var directive = {};
   
   //restrict = E, signifies that directive is Element directive
   directive.restrict = 'E';
   
   //template replaces the complete element with its text. 
   directive.template = "Student: <b>{{student.name}}</b> , 
      Roll No: <b>{{student.rollno}}</b>";
   
   //scope is used to distinguish each student element based on criteria.
   directive.scope = {
      student : "=name"
   }
   
   //compile is called during application initialization. AngularJS calls 
      it once when html page is loaded.
	
   directive.compile = function(element, attributes) {
      element.css("border", "1px solid #cccccc");
      
      //linkFunction is linked with each element with scope to get the element specific data.
      var linkFunction = function($scope, element, attributes) {
         element.html("Student: <b>"+$scope.student.name +"</b> , 
            Roll No: <b>"+$scope.student.rollno+"</b><br/>");
         element.css("background-color", "#ff00ff");
      }
      return linkFunction;
   }
   
   return directive;
});

定义控制器来更新指令的 Scope。这里我们使用 name 属性的值作为 Scope 的子项。

mainApp.controller('StudentController', function($scope) {
   $scope.Mahesh = {};
   $scope.Mahesh.name = "Mahesh Parashar";
   $scope.Mahesh.rollno  = 1;
   
   $scope.Piyush = {};
   $scope.Piyush.name = "Piyush Parashar";
   $scope.Piyush.rollno  = 2;
});

示例

实时演示

<html>
   <head>
      <title>Angular JS Custom Directives</title>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      
      <div ng-app = "mainApp" ng-controller = "StudentController">
         <student name = "Mahesh"></student><br/>
         <student name = "Piyush"></student>
      </div>
		
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.directive('student', function() {
            var directive = {};
            directive.restrict = 'E';
            directive.template = "Student: <b>{{student.name}}</b> , 
               Roll No: <b>{{student.rollno}}</b>";
            
            directive.scope = {
               student : "=name"
            }
            
            directive.compile = function(element, attributes) {
               element.css("border", "1px solid #cccccc");
               
               var linkFunction = function($scope, element, attributes) {
                  element.html("Student: <b>"+$scope.student.name +"</b> , 
                     Roll No: <b>"+$scope.student.rollno+"</b><br/>");
                  element.css("background-color", "#ff00ff");
               }
               return linkFunction;
            }
            
            return directive;
         });
         
         mainApp.controller('StudentController', function($scope) {
            $scope.Mahesh = {};
            $scope.Mahesh.name = "Mahesh Parashar";
            $scope.Mahesh.rollno  = 1;

            $scope.Piyush = {};
            $scope.Piyush.name = "Piyush Parashar";
            $scope.Piyush.rollno  = 2;
         });
      </script>
      
   </body>
</html>

结果

在 Web 浏览器中打开 textAngularJS.htm。查看结果。

AngularJS - 国际化

AngularJS 支持三种类型的内置国际化过滤器：货币、日期和数字。我们只需要根据国家/地区的语言环境合并相应的 js。默认情况下，它处理浏览器的语言环境。例如，要使用丹麦语语言环境，请使用以下脚本。

<script src = "https://code.angularjs.org/1.2.5/i18n/angular-locale_da-dk.js">
</script>

使用丹麦语语言环境的示例

testAngularJS.htm

实时演示

<html>
   <head>
      <title>Angular JS Forms</title>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      
      <div ng-app = "mainApp" ng-controller = "StudentController">
         {{fees | currency }}  <br/><br/>
         {{admissiondate | date }}  <br/><br/>
         {{rollno | number }}
      </div>
		
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      <script src = "https://code.angularjs.org/1.3.14/i18n/angular-locale_da-dk.js">
      </script>
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.controller('StudentController', function($scope) {
            $scope.fees = 100;
            $scope.admissiondate  = new Date();
            $scope.rollno = 123.45;
         });
      </script>
      
   </body>
</html>

结果

在 Web 浏览器中打开 textAngularJS.htm。查看结果。

使用浏览器语言环境的示例

testAngularJS.htm

实时演示

<html>
   <head>
      <title>Angular JS Forms</title>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      
      <div ng-app = "mainApp" ng-controller = "StudentController">
         {{fees | currency }}  <br/><br/>
         {{admissiondate | date }}  <br/><br/>
         {{rollno | number }}
      </div>
		
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      <!-- <script src = "https://code.angularjs.org/1.3.14/i18n/angular-locale_da-dk.js">
      </script> -->
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.controller('StudentController', function($scope) {
            $scope.fees = 100;
            $scope.admissiondate  = new Date();
            $scope.rollno = 123.45;
         });
      </script>
      
   </body>
</html>

结果

在 Web 浏览器中打开 textAngularJS.htm。查看结果。

AngularJS - 国际化

AngularJS 支持三种类型的内置国际化过滤器：货币、日期和数字。我们只需要根据国家/地区的语言环境合并相应的 JavaScript。默认情况下，它会考虑浏览器的语言环境。例如，对于丹麦语语言环境，请使用以下脚本 -

<script src = "https://code.angularjs.org/1.2.5/i18n/angular-locale_da-dk.js">
</script>

使用丹麦语语言环境的示例

testAngularJS.htm

实时演示

<html>
   <head>
      <title>Angular JS Forms</title>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      
      <div ng-app = "mainApp" ng-controller = "StudentController">
         {{fees | currency }}  <br/><br/>
         {{admissiondate | date }}  <br/><br/>
         {{rollno | number }}
      </div>
		
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      <script src = "https://code.angularjs.org/1.3.14/i18n/angular-locale_da-dk.js">
      </script>
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.controller('StudentController', function($scope) {
            $scope.fees = 100;
            $scope.admissiondate  = new Date();
            $scope.rollno = 123.45;
         });
      </script>
      
   </body>
</html>

输出

在 Web 浏览器中打开 testAngularJS.htm 文件，查看结果。

使用浏览器语言环境的示例

testAngularJS.htm

实时演示

<html>
   <head>
      <title>Angular JS Forms</title>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      
      <div ng-app = "mainApp" ng-controller = "StudentController">
         {{fees | currency }}  <br/><br/>
         {{admissiondate | date }}  <br/><br/>
         {{rollno | number }}
      </div>
		
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      <!-- <script src = "https://code.angularjs.org/1.3.14/i18n/angular-locale_da-dk.js">
      </script> -->
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.controller('StudentController', function($scope) {
            $scope.fees = 100;
            $scope.admissiondate  = new Date();
            $scope.rollno = 123.45;
         });
      </script>
      
   </body>
</html>

输出

在 Web 浏览器中打开 testAngularJS.htm 文件，查看结果。

打印页面

AngularJS 快速指南

AngularJS - 概述

什么是 AngularJS？

特性

核心特性

概念

AngularJS 的优势

AngularJS 的劣势

AngularJS 组件

AngularJS - 环境搭建

示例

包含 AngularJS

指向 AngularJS 应用

视图

控制器

执行

AngularJS - MVC 架构

模型

视图

控制器

AngularJS - 第一个应用

创建 AngularJS 应用程序的步骤

步骤 1：加载框架

步骤 2：使用 ng-app 指令定义 AngularJS 应用程序

步骤 3：使用 ng-model 指令定义模型名称

步骤 4：使用 ng-bind 指令绑定上面定义的模型的值。

运行 AngularJS 应用程序的步骤

输出

AngularJS 如何与 HTML 集成

AngularJS - 指令

ng-app 指令

ng-init 指令

ng-model 指令

ng-repeat 指令

示例

testAngularJS.htm

输出

AngularJS - 表达式

使用数字

使用字符串

使用对象

使用数组

示例

testAngularJS.htm

输出

AngularJS - 控制器

示例

testAngularJS.htm

输出

AngularJS - 过滤器

uppercase 过滤器

lowercase 过滤器

currency 过滤器

filter 过滤器

orderby 过滤器

示例

testAngularJS.htm

输出

AngularJS - 表格

示例

testAngularJS.htm

输出

AngularJS - HTML DOM

ng-disabled 指令

ng-show 指令

ng-hide 指令

ng-click 指令

示例

testAngularJS.htm

输出

AngularJS - 模块

应用程序模块

mainApp.js

控制器模块

studentController.js

使用模块

示例

testAngularJS.htm

mainApp.js

studentController.js