AngularJS 教程

ka520

贡献于2015-11-20

字数:0 关键词: Web框架

1. AngularJS 教程 AngularJS 是什么? AngularJS 是一个非常强大的 JavaScript 库,用于在单页应用程序(SPA)项 目。它扩展了 HTML DOM 的附加属性,使之更适应用户操作。 AngularJS 是开 源的,完全免费的,并且由数千名世界各地的开发。它是根据 Apache 许可证 2.0 版许可。 AngularJS 是一个开源 Web 应用程序框架。它最初是由 Misko Hevery 和 Adam Abrons 开发于 2009 年。现在是由谷歌维护。 AngularJS 的定义,它的官方文档介绍如下: AngularJS 是动态的 Web 应用程序结构框架。它可以让你使用 HTML 作为模板语言,扩 展 HTML 的语法清晰,简洁地表达应用程序的组件。Angular 分明的数据绑定和依赖注入 必须编写代码。而这一切都在浏览器内发生,这使得它与任何服务器技术的理想合作伙 伴。 特点  AngularJS 是一个功能强大的基于 JavaScript 开发框架来创建富互联网应 用(RIA)。  AngulajJS 为开发者提供选项来编写客户端应用程序(使用 JavaScript)在 一个干净的 MVC(模型 - 视图 - 控制器)的方式。  AngularJS 应用是跨浏览器兼容的。自动 AngularJS 处理适用于每个浏览 器的 javascript 代码。  AngularJS 是开源的,完全免费的,并且由数千名世界各地的开发。它是 根据 Apache 许可证 2.0 版许可。 总体而言,AngularJS 是一个框架可以用来构建大规模,高性能的网络应用,同时 也易于维护。 核心功能 以下是 AngularJS 的最重要的核心的功能:  数据绑定:它是模型和视图组件之间的数据的自动同步。  适用范围:这些是指模型对象。充当控制器和视图之间的胶水。  控制器:这些是绑定到特定范围的 Javascript 函数。  服务:AngularJS 配有多个内置的服务,例如$http 提供 XMLHttpRequest。这些是在应用程序实例化一次的单一对象。  过滤器:这些从数组项目中选择一个子集,并返回一个新的数组。  指令:指令是关于 DOM 元素标记(如元素,属性,CSS 等等)。这些可 以被用来创建作为新的自定义窗口小部件自定义的 HTML 标签。 AngularJS 有内置的指令(ngBind,ngModel...)  模板:这些都与控制器和模型信息呈现的视图。这些可以使用“谐音”的 单个文件(如 index.html),或在一个页面上的多个视图。  路由:它是切换视图的概念。  模型 - 视图 :MVC 是一个设计模式将应用划分为不同的部分(称为模 型,视图和控制器),每一个具有不同的责任。 AngularJS 没有传统意义 上的 MVC 实现,而是更接近于 MVVM(模型 - 视图 - 视图模型)。 AngularJS 团队让它作为模型视图而不管。  深层链接:深层链接能够使其可书签应用程序的状态进行编码的 URL。应 用程序可以从该 URL 为相同的状态恢复。  依赖注入: AngularJS 有一个内置的依赖注入子系统,通过使应用程序帮 助开发人员更易于开发,理解和测试。 概念 下图描绘了 AngularJS,我们将详细在随后的章节讨论的一些重要部分。 AngularJS 的优点  AngularJS 提供在一个非常干净和维护方式来创建单页的应用。  AngularJS 提供了数据绑定功能为 HTML 从而给用户提供丰富而敏感的体 验  AngularJS 代码可单元测试。  AngularJS 使用依赖注入和运用关注点分离。  AngularJS 提供了可重用的组件。  AngularJS 能为开发人员编写更少的代码,并获得更多的功能。  在 AngularJS,视图都是纯 HTML 页面,并用 JavaScript 编写控制器完成 业务处理。 AngularJS 应用程序可以在所有主要浏览器和智能手机,包括 Android 和 iOS 系 统的手机/平板电脑上运行。 AngulaJS 的缺点 虽然 AngularJS 带有许多加分,但是我们应该考虑以下几点:  不安全:JavaScript 只有框架编写的应用程序在 AngularJS 是不安全的。 服务器端的认证和授权是必须的,以保持应用程序的安全。  不可降解:如果应用程序的用户禁用 JavaScript 的话用户将只能看到基本 的页面,仅此而已。 AngularJS 组件 AngularJS 框架可分为以下三个主要部分组成:  ng-app : 该指令规定,并链接一个 AngularJS 应用程序的 HTML。  ng-model : 该指令结合 AngularJS 应用数据的值到 HTML 的输入控件。  ng-bind : 该指令子带 AngularJS 应用数据的 HTML 标签。 2. AngularJS 环境设置 在本章中,我们将讨论如何设置 AngularJS 库在 Web 应用程序开发中使用。我们 还将简要地研究了目录结构和它的内容。 当打开链接 https://angularjs.org/,会看到有两个选项下载 AngularJS 库:  GitHub 下载 - 单击此按钮去到 GitHub,并获得所有最新的脚本。  下载 - 或点击此按钮,屏幕下方会看到: 此屏幕给出了使用角 JS 如下的各种选项: o 下载和本地主机文件 . 有两种不同的选择:旧版和最新。名字本身是自我说明。旧版版本 已经低于 1.2.x 版本和最新为 1.3.x 版。 . 我们也可以使用缩小,无压缩或压缩版本。 o CDN 访问:也可以使用 CDN。在 CDN 会给世界各地的访问,在这种情况 下,谷歌的主机区域性数据中心。这意味着使用 CDN 的移动主机的文件从 自己的服务器到一系列外部因素的责任。这也提供了一个优点,即如果访 问者你的网页已经下载来自相同的 CDN AngularJS 副本,它不必被重新下 载。 在本教程中使用 CDN 版本库。 例子 现在让我们使用 AngularJS 库编写一个简单的例子。创建一个 HTML 文件 myfirstexample.html 如下:

Welcome {{helloTo.title}} to the world of Yiibai!

下面的章节详细描述了上面的代码: 包括 AngularJS 我们已经包含了 AngularJS 的 JavaScript 文件中的 HTML 页面,所以我们可以使 用 AngularJS: 检查 AngularJS 的最新版本在其官方网站。 指向 AngularJS 应用 接下来,我们告诉一下 HTML 的一部分包含 AngularJS 应用。这可以通过将 ng- app 属性到 AngularJS 应用程序的根目录下的 HTML 元素。可以将它添加到 HTML 元素或 body 元素,如下所示: 视图 这部分的视图:

Welcome {{helloTo.title}} to the world of Yiibai!

ng-controller 告诉 AngularJS 什么是控制器和视图。 helloTo.title 告诉 AngularJS 编写名为 helloTo.title 的 HTML 在这个位置的“model”的值。 控制器 控制器的部分是: 此代码先注册名为 HelloController 中的名为 MyApp 角模块控制器的功能。我们 将学习更多有关在各自的章节模块和控制器。控制器功能被登记在经由 angular.module(...)的角。controller(...)函数调用。 传递给控制器函数的$scope 参数模型。控制器功能增加了 helloTo 的 JavaScript 对象,该对象中加上一个标题字段。 执行 将以上代码保存为 myfirstexample.htmll 在任何浏览器中打开它。会看到如下的 输出: 当页面在浏览器中加载时,下面的事件发生:  HTML 文档被加载到浏览器中,并且由浏览器进行计算。 AngularJS JavaScript 文件被加载,角全局对象被创建。接下来,JavaScript 的一个 注册控制器功能被执行。  AngularJS 通过 HTML 扫描,以寻找 AngularJS 应用程序和视图。一旦视 图的找到,它连接了视图到对应的控制器函数。  接下来 AngularJS 执行控制函数。然后,它呈现与填充控制器模型数据视 图。页面现在已准备就绪。 3. AngularJS MVC 体系结构 模型 - 视图 - 控制器或 MVC,MVC 是普遍的叫法,是一种软件设计模式,用于 开发 Web 应用程序。模型- 视图 - 控制器模式是由以下三部分组成:  模型/Model - 一个负责维护数据模式的最低水平。  视图/View - 负责显示所有或数据到用户的部分。  控制器/Controller - 软件代码控制 Model 和 View 之间的相互作用。 MVC 是受欢迎的,因为它隔离了应用逻辑从用户界面层和支持的关注点分离。这 里的控制器接收用于该应用程序的所有请求,制备视图所需要的任何数据。视图, 使用制备的控制器,产生一个最终像样的响应的数据。 MVC 抽象可以用图形表示 如下。 模型 - model 模型是负责管理应用程序的数据。它响应来自视图的请求,同时也响应指令从控制 器进行自我更新。 视图 - view 在一个特定的格式的演示数据,由控制器决定触发显示数据。它们是基于脚本的模 板系统,如 JSP,ASP,PHP,非常容易使用 AJAX 技术的集成。 控制器 - controller 控制器负责响应于用户输入并执行交互数据模型对象。控制器接收到输入,它验证 输入,然后执行修改数据模型的状态的业务操作。 AngularJS 是一个 MVC 框架。在接下来的章节中,让我们看到了 AngularJS 如何 使用 MVC 方法。 4.AngularJS 第一个应用程序 按以下步骤来创建 AngularJS 应用 第 1 步:加载框架 作为一个纯粹的 JavaScript 框架,它可以使用 第 2 步:使用 ng-app 指令定义 AngularJS 应用
...
第 3 步:用 ng-model 指令定义的模式名称

Enter your Name:

第 4 步:用 ng-bind 指令将上述模型中的值绑定定义

Hello !

按以下步骤来运行 AngularJS 应用 使用上面提到的三个步骤在 HTML 页中。 testAngularJS.html AngularJS First Application

Sample Application

我的名字:

Hello, !

 studentController 定义 $scope 作为 JavaScript 对象参数。  $scope 表示应用程序,使用 studentController 对象。  $scope.student 是 studentController 对象的属性。  firstName 和 lastName 是$scope.student 对象的两个属性。我们已经通 过了默认值给他们。  fullName 是$scope.student 对象的函数,它的任务是返回合并的名称。  在 fullName 函数中,我们现在要学生对象返回组合的名字。  作为一个说明,还可以定义控制器对象在单独的 JS 文件,并把有关文件中 的 HTML 页面。 现在可以使用 ng-model 或使用表达式如下使用 studentController 学生的属 性。 Enter first name:
Enter last name:

You are entering: {{student.fullName()}}  现在有 student.firstName 和 student.lastname 两个输入框。  现在有 student.fullName()方法添加到 HTML。  现在,只要输入 first name 和 lastname 输入框中输入什么,可以看到两 个名称自动更新。 例子 下面的例子将展示使用控制器。 testAngularJS.html 文件内容如下: Angular JS Controller

AngularJS Sample Application

Enter first name:

Enter last name:

You are entering: {{student.fullName()}}
输出 在 Web 浏览器打开 textAngularJS.html,看到以下结果: 10. AngularJS HTML DOM 以下指令可用于应用程序数据绑定到 HTML DOM 元素的属性。 S.No. 名称 描述 1 ng-disabled 禁用一个给定的控制 2 ng-show 显示一个给定的控制 3 ng-hide 隐藏在给定的控制 4 ng-click 表示 AngularJS click 事件 ng-disabled 指令 添加 ng-disabled 属性到一个 HTML 按钮,通过它的模型。该模型绑定到复选 框,看看以下变化。 Disable Button ng-show 指令 添加 ng-show 属性到一个 HTML 按钮,并把它传递模型。绑定模型到复选框,看 看以下变化。 Show Button ng-hide 指令 添加 ng-hide 属性为 HTML 按钮,通过它的模型。绑定模型到复选框,看看以下 变化。 Hide Button ng-click 指令 添加 ng-click 属性为 HTML 按钮并更新模型。模型绑定 HTML 看看结合的变化。

Total click: {{ clickCounter }}

例子 下面的例子将展示上述所有指令。 testAngularJS.html AngularJS HTML DOM

AngularJS Sample Application

Disable Button
Show Button
Hide Button

Total click: {{ clickCounter }}

在这里,我们使用 ng-app 指令和控制器采用 ng-controller 指令应用模块。我 们已经在主要的 HTML 页面导入 mainApp.js 和 studentController.js。 示例 下面的例子将展示上述所有模块。 testAngularJS.htm Angular JS Modules

AngularJS Sample Application

Enter first name:
Enter last name:
Name: {{student.fullName()}}
Subject:
Name Marks
{{ subject.name }} {{ subject.marks }}
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。看到结果如下。 12. AngularJS 表单 AngularJS 提供丰富填写表单和验证。我们可以用 ng-click 来处理 AngularJS 点 击按钮事件,然后使用 $dirty 和 $invalid 标志做验证的方式。使用 novalidate 表单声明禁止任何浏览器特定的验证。表单控件使用了大量的角活动。让我们快速 浏览一下有关事件先。 事件 AngularJS 提供可与 HTML 控件相关联的多个事件。例如 ng-click 通常与按钮相 关联。以下是 AngularJS 支持的事件。  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 使用点击一个按钮的指令,表单重置数据。 验证数据 可使用下面跟踪误差。  $dirty - 规定值已被改变。  $invalid- 该值的状态是无效的。  $error- 指出确切的错误。 例子 下面的例子将展示上述所有指令。 testAngularJS.html Angular JS Forms

AngularJS Sample Application

Enter first name: First Name is required.< /span>
Enter last name: Last Name is required.
Email: Email is required. Invalid email address.
$routeProvider $routeProvider 是组网址的配置,将它们映射相应的 HTML 页面或 ng- template,并附加一个控制器使用相同键的服务。 使用 定义类型作为主模块中 ng-template 的脚本块。
...
使用 定义主模块的脚本块,并设置路由配置。 var mainApp = angular.module("mainApp", ['ngRoute']); mainApp.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/addStudent', { templateUrl: 'addStudent.html', controller: 'AddStudentController' }). when('/viewStudents', { templateUrl: 'viewStudents.html', controller: 'ViewStudentsController' }). otherwise({ redirectTo: '/addStudent' }); }]); 以下是在上面的例子中需要考虑的重要问题  $routeProvider 被定义为使用关键字作为'$routeProvider“下 mainApp 模块的配置功能;  $routeProvider 当定义了 URL“/addStudent”映射到 “addStudent.html”。 addStudent.html 应存在于相同的路径主要的 html 页面。如果 htm 页面没有定义,那么 ng-template 被 id= “addStudent.html”使用。我们已经使用了 ng-template;  “otherwise”是用来设置的默认视图;  “conlloer”是用来设置该视图对应的控制器; 例子 下面的例子将展示上述所有指令。 testAngularJS.html Angular JS Views

AngularJS Sample Application

Add Student

View Students

结果 在 Web 浏览器中打开 textAngularJS.html。看到结果如下: 16. AngularJS 作用域 范围扮演其视图连接控制器的角色一个特殊的 JavaScript 对象。范围包含了模型 数据。在控制器,模型数据通过$scope 对象访问。 以下是在上面的例子中需要考虑的重要问题。  $scope 被作为第一个参数在其构造器确定指标到控制器。  $scope.message 和 $scope.type 是它们在 HTML 页面中所用的模型。  我们已经设置模型的值将反映应用程序模块的控制器 shapeController 中。  我们可以在$scope 定义函数功能。 继承范围 范围是特定的控制器。如果我们定义嵌套的控制器,然后控制器子将继承其父控制 的范围。 以下是在上面的例子中需要考虑的重要问题。  我们在 shapeController 设定模型的值。  我们覆盖的子控制器 circleController 消息。当“消息”内的控制器 circleController 的模块使用时,将用于重写的消息。 例子 下面的例子将展示上述所有指令。 testAngularJS.html Angular JS Forms

AngularJS Sample Application

{{message}}
{{type}}

{{message}}
{{type}}

{{message}}
{{type}}

结果 在 Web 浏览器打开 textAngularJS.html。看到结果如下。 17. AngularJS 服务 AngularJS 支持使用服务的体系结构“关注点分离”的概念。服务是 JavaScript 函数,并负责只做一个特定的任务。这也使得他们即维护和测试的单独实体。控制 器,过滤器可以调用它们作为需求的基础。服务使用 AngularJS 的依赖注入机制 注入正常。 AngularJS 提供例如许多内在的服务,如:$http, $route, $window, $location 等。每个服务负责例如一个特定的任务,$http 是用来创建 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.html Angular JS Forms

AngularJS Sample Application

Enter a number:

Result: {{result}}

结果 在 Web 浏览器打开 textAngularJS.html。看到结果如下。 18. 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 multipli cation 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 fac tory. 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.html AngularJS Dependency Injection

AngularJS Sample Application

Enter a number:

Result: {{result}}

结果 在 Web 浏览器打开 textAngularJS.html。看到结果如下。 19. AngularJS 自定义指令 自定义指令中使用 AngularJS 扩展 HTML 的功能。自定义指令使用的“指令”的 功能定义。自定义指令只是替换了它被激活的元素。引导过程中 AngularJS 应用 程序找到了匹配的元素,并做好使用自定义指令 compile()方法一次活动再处理使 用基于指令的范围自定义指令 link()方法的元素。 AngularJS 提供支持,以下列元 素的类型来创建自定义指令。  Element directives - 指令遇到时激活一个匹配的元素。  Attribute - - 指令遇到时激活一个匹配的属性。  CSS - - 指令遇到时激活匹配 CSS 样式。  Comment - - 指令遇到时激活匹配的注释。 了解自定义指令 定义自定义的 HTML 标签。
定义自定义指令来处理上面的自定义 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 h tml 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: {{student.name}} , Roll No: {{student.ro llno}}"; //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 whe n 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: "+$scope.student.name +" , Roll No: "+$sco pe.student.rollno+"
"); element.css("background-color", "#ff00ff"); } return linkFunction; } return directive; }); 定义控制器以更新范围为指令。在这里,我们使用 name 属性值作为子的作用 域。 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; }); 例子 Angular JS Custom Directives

AngularJS Sample Application


结果 在 Web 浏览器中打开 textAngularJS.html。看到结果如下: 20. AngularJS 内部化 AngularJS 支持内置的国际化三种类型的过滤器货币,日期和数字。只需要根据国 家的区域纳入相应的 JS。默认情况下它处理浏览器的语言环境。例如,要使用丹 麦语的语言环境,使用下面的脚本 结果 在 Web 浏览器打开 textAngularJS.html。看到结果如下。 使用浏览器的语言环境示例 testAngularJS.html Angular JS Forms

AngularJS Sample Application

{{fees | currency }}

{{admissiondate | date }}

{{rollno | number }}
结果 在 Web 浏览器打开 textAngularJS.html。看到结果如下。

下载文档,方便阅读与编辑

文档的实际排版效果,会与网站的显示效果略有不同!!

需要 10 金币 [ 分享文档获得金币 ] 1 人已下载

下载文档

相关文档