AngularJS - 快速指南

AngularJS - 概述

什么是 AngularJS？

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

AngularJS官方文档的定义如下：

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

特征

AngularJS 是一个强大的基于 JavaScript 的开发框架，用于创建丰富的互联网应用程序（RIA）。
AngularJS 为开发人员提供了以干净的 MVC（模型视图控制器）方式编写客户端应用程序（使用 JavaScript）的选项。
用 AngularJS 编写的应用程序是跨浏览器兼容的。AngularJS 自动处理适合每个浏览器的 JavaScript 代码。
AngularJS 是开源的、完全免费的，被世界各地成千上万的开发者使用。它根据 Apache 许可证 2.0 版获得许可。

总的来说，AngularJS 是一个构建大规模、高性能 Web 应用程序的框架，同时保持它们易于维护。

核心特点

以下是 AngularJS 最重要的核心功能 -

数据绑定- 它是模型和视图组件之间数据的自动同步。
范围- 这些是引用模型的对象。它们充当控制器和视图之间的粘合剂。
控制器- 这些是绑定到特定范围的 JavaScript 函数。
服务- AngularJS 带有几个内置服务，例如 $https: 来创建 XMLHttpRequests。这些是单例对象，仅在应用程序中实例化一次。
过滤器- 从数组中选择项目的子集并返回一个新数组。
指令- 指令是 DOM 元素（例如元素、属性、CSS 等）上的标记。这些可用于创建用作新的自定义小部件的自定义 HTML 标记。AngularJS 有内置指令（ngBind、ngModel...）
模板- 这些是带有来自控制器和模型的信息的渲染视图。这些可以是单个文件（如index.html），也可以是使用“partials”的一个页面中的多个视图。
路由- 这是切换视图的概念。
模型视图任意- 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 应用程序数据的值绑定到 HTML 输入控件。
ng-bind - 该指令将 AngularJS 应用程序数据绑定到 HTML 标签。

AngularJS - 环境设置

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

当您打开链接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 库编写一个简单的示例。让我们创建一个 HTML 文件myfirstexample.html如下 -

现场演示

<!doctype html>
<html>
   
   <head>
      <script src = "https://ajax.googleapis.com/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

我们已将 AngularJS JavaScript 文件包含在 HTML 页面中，以便我们可以使用 AngularJS -

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

如果您想更新到最新版本的 Angular JS，请使用以下脚本源，或者在其官方网站上检查最新版本的 AngularJS。

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

指向 AngularJS 应用程序

接下来我们将讲述 HTML 的哪一部分包含 AngularJS 应用程序。这是通过将ng-app属性添加到 AngularJS 应用程序的根 HTML 元素来完成的。您可以将其添加到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 的“模型”值写入 HTML 中的此位置。

控制器

控制器部分是 -

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

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

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

执行

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

Welcome AngularJS to the world of Tutorialspoint!

当页面加载到浏览器中时，会发生以下情况 -

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

AngularJS - MVC 架构

模型视图控制器（通常称为 MVC）是一种用于开发 Web 应用程序的软件设计模式。模型视图控制器模式由以下三个部分组成 -

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

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

该模型

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

风景

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

控制器

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

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

AngularJS - 第一个应用程序

在我们开始使用 AngularJS 创建实际的 HelloWorld 应用程序之前，让我们看看 AngularJS 应用程序的实际部分是什么。AngularJS 应用程序由以下三个重要部分组成 -

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

创建 AngularJS 应用程序的步骤

第1步：加载框架

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

<script src = "https://ajax.googleapis.com/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.com/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 就会使用名称模型显示在 html span 标记中。
结束</div>标签表示AngularJS应用程序的结束。

AngularJS - 指令

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

ng-app - 该指令启动一个 AngularJS 应用程序。
ng-init - 该指令初始化应用程序数据。
ng-model - 该指令将 AngularJS 应用程序数据的值绑定到 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-模型指令

该指令将 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.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      
   </body>
</html>

输出

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

AngularJS - 表达式

表达式用于将应用程序数据绑定到 html。表达式写在双大括号内，如 {{ expression}}。表达式的Behave方式与 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.com/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 定义为一个 JavaScript 对象，并以 $scope 作为参数。
$scope 指的是要使用studentController 对象的应用程序。
$scope.student 是studentController 对象的属性。
firstName 和 lastName 是 $scope.student 对象的两个属性。我们已将默认值传递给它们。
fullName 是 $scope.student 对象的函数，其任务是返回组合名称。
在 fullName 函数中，我们获取学生对象，然后返回组合名称。
需要注意的是，我们还可以在单独的 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.com/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	大写将文本转换为大写文本。
2	小写将文本转换为小写文本。
3	货币将文本格式化为货币格式。
4	筛选根据提供的条件将数组过滤为其子集。
5	订单比根据提供的标准对数组进行排序。

大写过滤器

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

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}}

小写过滤器

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

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}}

货币过滤器

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

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

过滤器过滤器

为了仅显示必需的主题，我们使用 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 分数。

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.com/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.com/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-禁用禁用给定的控件。
2	ng-show 显示给定的控件。
3	ng-隐藏隐藏给定的控件。
4	NG-点击代表 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-隐藏指令

将 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.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      
   </body>
</html>

输出

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

AngularJS - 模块

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

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

应用模块

mainApp.js

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

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

控制器模块

学生控制器.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.com/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", []);

学生控制器.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-点击
ng-dbl-单击
ng-mousedown
ng-mouseup
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-鼠标悬停
ng-keydown
ng-keyup
ng-按键
ng-改变

NG-点击

使用按钮的单击指令重置表单的数据。

<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.com/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.com/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>

主要.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>

科目.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 和 subject.htm 部署到 Web 服务器。在 Web 浏览器中使用服务器的 url 打开 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模型可用于在 HTML 中绘制表格。

例子

数据.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.com/ajax/libs/angularjs/1.2.15/angular.min.js">
      </script>
      
   </body>
</html>

输出

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

AngularJS - 视图

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

ng视图

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

用法

在主模块中使用 ng-view 定义一个 div。

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

</div>

ng-模板

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

用法

在主模块中定义类型为 ng-template 的脚本块。

<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，并附加一个控制器。

用法

使用主模块定义脚本块并设置路由配置。

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 模块配置下的一个函数，使用 key 作为“$routeProvider”。
$routeProvider.when 定义了一个 url“/addStudent”，然后将其映射到“addStudent.htm”。addStudent.htm 应与主 html 页面位于同一路径中。如果未定义 htm 页面，则 ng-template 与 id="addStudent.htm" 一起使用。我们使用了 ng-template。
“otherwise”用于设置默认视图。
“controller”用于设置视图对应的控制器。

例子

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

testAngularJS.htm

现场演示

<html>
   <head>
      <title>Angular JS Views</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      <sc

先生。	名称和描述
1	大写将文本转换为大写文本。
2	小写将文本转换为小写文本。
3	货币将文本格式化为货币格式。
4	筛选根据提供的条件将数组过滤为其子集。
5	订单比根据提供的标准对数组进行排序。

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-模型指令

ng-repeat 指令

例子

testAngularJS.htm

输出

AngularJS - 表达式

使用数字

使用字符串

使用对象

使用数组

例子

testAngularJS.htm

输出

AngularJS - 控制器

例子

testAngularJS.htm

输出

AngularJS - 过滤器

大写过滤器

小写过滤器

货币过滤器

过滤器 过滤器

按过滤器排序

例子

testAngularJS.htm

输出

AngularJS - 表格

例子

testAngularJS.htm

输出

AngularJS - HTML DOM

ng-disabled 指令

ng-show 指令

ng-隐藏指令

ng-click 指令

例子

testAngularJS.htm

输出

AngularJS - 模块

应用模块

mainApp.js

控制器模块

学生控制器.js

使用模块

例子

testAngularJS.htm

mainApp.js

学生控制器.js

过滤器过滤器