AngularJS笔记.doc

什么是 AngularJS？AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。AngularJS 把应用程序数据绑定到 HTML 元素。AngularJS 可以克隆和重复 HTML 元素。AngularJS 可以隐藏和显示 HTML 元素。AngularJS 可以在 HTML 元素背后添加代码。AngularJS 支持输入验证。引入文件：指令：AngularJS 通过ng-directives扩展了 HTML。指令描述ng-app定义应用程序的根元素。指令定义一个 AngularJS 应用程序的根元素。ng-bind绑定 HTML 元素到应用程序数据（HTML 视图）ng-bind-html绑定 HTML 元素的 innerHTML 到应用程序数据，并移除 HTML 字符串中危险字符ng-bind-template规定要使用模板替换的文本内容ng-blur规定 blur 事件的行为ng-change规定在内容改变时要执行的表达式ng-checked规定元素是否被选中ng-class指定 HTML 元素使用的 CSS 类ng-class-even类似 ng-class，但只在偶数行起作用ng-class-odd类似 ng-class，但只在奇数行起作用ng-click定义元素被点击时的行为ng-cloak在应用正要加载时防止其闪烁ng-controller定义应用的控制器对象ng-copy规定拷贝事件的行为ng-csp修改内容的安全策略ng-cut规定剪切事件的行为ng-dblclick规定双击事件的行为ng-disabled规定一个元素是否被禁用ng-focus规定聚焦事件的行为ng-form指定 HTML 表单继承控制器表单ng-hide隐藏或显示 HTML 元素ng-href为 the 元素指定链接ng-if如果条件为 false 移除 HTML 元素ng-include在应用中包含 HTML 文件ng-init定义应用的初始化值 指令初始化 AngularJS 应用程序变量。可以是表达式也可以是数组也可以是对象ng-jq定义应用必须使用到的库，如：jQueryng-keydown规定按下按键事件的行为ng-keypress规定按下按键事件的行为ng-keyup规定松开按键事件的行为ng-list将文本转换为列表 (数组)ng-model绑定 HTML 控制器的值到应用数据（指令把元素值（比如输入域的值）绑定到应用程序）。ng-model-options规定如何更新模型ng-mousedown规定按下鼠标按键时的行为ng-mouseenter规定鼠标指针穿过元素时的行为ng-mouseleave规定鼠标指针离开元素时的行为ng-mousemove规定鼠标指针在指定的元素中移动时的行为ng-mouseover规定鼠标指针位于元素上方时的行为ng-mouseup规定当在元素上松开鼠标按钮时的行为ng-non-bindable规定元素或子元素不能绑定数据ng-open指定元素的 open 属性ng-options在 列表中指定 ng-paste规定粘贴事件的行为ng-pluralize根据本地化规则显示信息ng-readonly指定元素的 readonly 属性ng-repeat定义集合中每项数据的模板ng-repeat指令对于集合中（数组中）的每个项会克隆一次 HTML 元素。ng-selected指定元素的 selected 属性ng-show显示或隐藏 HTML 元素ng-src指定 元素的 src 属性ng-srcset指定 元素的 srcset 属性ng-style指定元素的 style 属性ng-submit规定 onsubmit 事件发生时执行的表达式ng-switch规定显示或隐藏子元素的条件ng-transclude规定填充的目标位置ng-value规定 input 元素的值使用方法：名字 : Helloname在input中输入值后，下面 获取对应的值实例讲解： 当网页加载完毕，AngularJS 自动开启。ng-app指令告诉 AngularJS， 元素是 AngularJS应用程序的所有者。ng-model指令把输入域的值绑定到应用程序变量name。ng-bind指令把应用程序变量 name 绑定到某个段落的 innerHTML。注意：如果您移除了ng-app指令，HTML 将直接把表达式显示出来，不会去计算表达式的结果。AngularJS 实例HTML5 允许扩展的（自制的）属性，以data-开头。AngularJS 属性以ng-开头，但是您可以使用data-ng-来让网页对 HTML5 有效。姓名为 span中的显示结果为： John前面不加data 结果一样AngularJS 应用 .controller 名: 姓: 姓名: firstName + + lastName var app = angular.module(myApp, );/AngularJS 模块 app.controller(myCtrl, function($scope) $scope.firstName= John; $scope.lastName= Doe; ); / AngularJS 控制器控制应用$scope 相当于 js的var 定义$scope.firstName相当于 var firstName;运行结果：表单填什么，下面获取到什么。AngularJS 表达式AngularJS 表达式写在双大括号内： expression 。AngularJS 表达式很像JavaScript 表达式：它们可以包含文字、运算符和变量。实例 5 + 5 或 firstName + + lastName 数组、对象、数字、字符串总价： quantity * cost 总价： 用ng-bind 和 的效果是一样的总价： quantity * cost 姓为 第三个值为 ng-init 里面可以是表达式也可以是数组也可以是对象数据绑定在输入框中尝试输入：姓名： 你输入的为： firstName 实例中的 firstName 表达式是一个 AngularJS 数据绑定表达式。AngularJS 中的数据绑定，同步了AngularJS 表达式与AngularJS数据。 firstName 是通过ng-model=firstName进行同步价格计算器数量：价格： 总价： quantity * price 实例中，两个文本域是通过两个 ng-model 指令同步的重复 HTML 元素 (循环) 使用 ng-repeat 来循环数组 x ng-repeat指令会重复一个 HTML 元素循环对象： + , + x.country ng-repeat指令用在一个对象数组上ng-init指令为 AngularJS 应用程序定义了初始值创建自定义的指令 .directive以下是几种使用方法： 第1种 第2种 第3种 第4种var app = angular.module(myApp, );app.directive(runoobDirective, function() return template : 自定义指令! ;);除了 AngularJS 内置的指令外，我们还可以创建自定义指令。你可以使用.directive函数来添加自定义的指令。要调用自定义指令，HTMl 元素上需要添加自定义指令名。使用驼峰法来命名一个指令，runoobDirective, 但在使用它时需要以-分割,runoob-directive:你可以通过以下方式来调用指令：元素名属性类名注释注意：不能几种方法同时使用varapp = angular.module(myApp, );app.directive(runoobDirective,function() return restrict :A, template :自定义指令! ;);限制使用：你可以限制你的指令只能通过特定的方式来调用。通过添加restrict属性,并设置只值为A, 来设置指令只能通过属性的方式来调用:restrict值可以是以下几种:E只限元素名使用A只限属性使用C只限类名使用M只限注释使用restrict默认值为EA, 即可以通过元素名和属性名来调用指令。验证用户输入 Email: 不是一个合法的邮箱地址提示信息会在ng-show属性返回true的情况下显示。如果输入的邮箱不正确，就会显示ng-showspan的中的值 Email:状态myForm.myAddress.$valid (如果输入的值是合法的则为 true)myForm.myAddress.$dirty (如果值改变则为 true)myForm.myAddress.$touched (如果通过触屏点击则为 true)ng-model指令可以为应用数据提供状态值(invalid, dirty, touched, error):属性描述$dirty表单有填写记录$valid字段内容合法的$invalid字段内容是非法的$pristine表单没有填写记录API描述angular.lowercase()转换字符串为小写angular.uppercase()转换字符串为大写angular.isString()判断给定的对象是否为字符串，如果是返回 true。angular.isNumber()判断给定的对象是否为数字，如果是返回 true。CSS类input.ng-invalidbackground-color:red; 输入你的名字:ng-model指令基于它们的状态为 HTML 元素提供了 CSS 类编辑文本域，不同状态背景颜色会发送变化。文本域添加了 required 属性，该值是必须的，如果为空则是不合法的。ng-model指令根据表单域的状态添加/移除以下类：ng-empty ng-not-emptyng-touched ng-untouchedng-valid ng-invalidng-dirty ng-pendingng-pristineAngularJS$scope(作用域)carnamevarapp = angular.module(myApp, );app.controller(myCtrl,function($scope) $scope.carname =Volvo;);Scope 概述AngularJS 应用组成如下：View(视图), 即 HTML。Model(模型), 当前视图中可用的数据。Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。Scope(作用域)是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。Scope 是一个对象，有可用的方法和属性。Scope 可应用在视图和控制器上。当你在 AngularJS 创建控制器时，你可以将$scope对象当作一个参数传递:xvarapp = angular.module(myApp, );app.controller(myCtrl,function($scope) $s = Emil,Tobias,Linus;);Scope 作用范围了解你当前使用的 scope 是非常重要的。在以上两个实例中，只有一个作用域 scope，所以处理起来比较简单，但在大型项目中， HTML DOM 中有多个作用域，这时你就需要知道你使用的 scope 对应的作用域是哪一个。实例：当我们使用ng-repeat指令时，每个重复项都访问了当前的重复对象:每个元素可以访问当前的重复对象，这里对应的是一个字符串， 并使用变量x表示。AngularJS$rootScope(根作用域)lastname家族成员:xlastname varapp = angular.module(myApp, );app.controller(myCtrl,function($scope, $rootScope) $s = Emil,Tobias,Linus; $rootScope.lastname =Refsnes;);所有的应用都有一个$rootScope，它可以作用在ng-app指令包含的所有 HTML 元素中。$rootScope可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。注：等同于js中的全局变量AngularJS控制器名:姓:姓名:firstName + + lastName var app = angular.module(myApp, );app.controller(myCtrl, function($scope) $scope.firstName = John; $scope.lastName = Doe;);AngularJS 应用程序由ng-app定义。应用程序在 内运行。ng-controller=myCtrl属性是一个 AngularJS 指令。用于定义一个控制器。myCtrl函数是一个 JavaScript 函数。AngularJS 使用$scope对象来调用控制器。控制器方法（变量和函数）名:姓:姓名:fullName() var app = angular.module(myApp, );app.controller(personCtrl, function($scope) $scope.firstName = John; $scope.lastName = Doe; $scope.fullName = function() return $scope.firstName+ +$scope.lastName; );在 AngularJS 中， $scope 是一个应用象(属于应用变量和函数)。控制器的$scope（相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。控制器在作用域中创建了两个属性 (firstName和lastName)。ng-model指令绑定输入域到控制器的属性（firstName 和 lastName）。外部文件中的控制器First Name:Last Name:Full Name:firstName + + lastName在大型的应用程序中，通常是把控制器存储在外部文件中。只需要把 标签中的代码复制到名为personController.js的外部文件中即可：angular.module(myApp, ).controller(personCtrl, function($scope) $scope.firstName = John, $scope.lastName = Doe, $scope.fullName = function() return $scope.firstName + + $scope.lastName; ); /personController.js文件内容添加指令 varapp = angular.module(myApp, );app.directive(runoobDirective,function() return template :我在指令构造器中创建! ;);显示结果：我在指令构造器中创建!AngularJS 过滤器过滤器描述currency格式化数字为货币格式。filter从数组项中选择一个子集。lowercase格式化字符串为小写。orderBy根据某个表达式排列数组。uppercase格式化字符串为大写。AngularJS 过滤器可用于转换数据表达式中添加过滤器过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中.姓名为 lastName | uppercase 输出结果为 AHZNA姓名为 lastName | lowercase输出结果为 ahzna数量: 价格: 总价 = (quantity * price) | currency var app = angular.module(myApp, );app.controller(costCtrl, function($scope) $scope.quantity = 1; $scope.price = 9.99;);显示结果循环对象: + , + x.country 向指令添加过滤器orderBy过滤器根据表达式排列数组：显示结果 ( | uppercase) + , + x.country 过滤输入filter过滤器从数组中选择一个子集输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。 $index + 1 x.Name x.Country var app = angular.module(myApp, );app.controller(customersCtrl, function($scope, $http) $http.get(/try/angularjs/data/Customers_JSON.php).success(function (response) $s = response.records;););显示序号 ($index) x.Name x.Name x.Country x.Country 使用 $even 和 $odd表格判断奇偶数行AngularJS 服务(Service) $location服务 当前页面的url:myUrl该实例使用了内建的 $location 服务获取当前页面的 URL。var app = angular.module(myApp, );app.controller(myCtrl, function($scope, $location) $scope.myUrl = $location.absUrl(););什么是服务？在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。$location服务，它可以返回当前页面的 URL 地址。注意: $location服务是作为一个参数传递到 controller 中。如果要使用它，需要在 controller 中定义。 欢迎信息:myWelcome $http 服务向服务器请求信息，返回的值放入变量 myWelcome 中。var app = angular.module(myApp, );app.controller(myCtrl, function($scope, $http) $http.get(welcome.htm).then(function (response) $scope.myWelcome = response.data; ););$http 服务 是 AngularJS 应用中最常用的服务。 服务向服务器发送请求，应用响应服务器传送过来的数据。 两秒后显示信息:myHeader $timeout 访问在规定的毫秒数后执行指定函数。var app = angular.module(myApp, );app.controller(myCtrl, function($scope, $timeout) $scope.myHeader = Hello World!; $timeout(function () $scope.myHeader = How are you today?; , 2000););$timeout 服务AngularJS$timeout服务对应了 JSwindow.setTimeout函数。两秒后显示 How are you today? 现在时间是: theTime $interval 访问在指定的周期(以毫秒计)来调用函数或计算表达式。var app = angular.module(myApp, );app.controller(myCtrl, function($scope, $interval) $scope.theTime = new Date().toLocaleTimeString(); $interval(function () $scope.theTime = new Date().toLocaleTimeString(); , 1000););$interval 服务服务对应了 JSwindow.setInterval函数。可以用来设置动态时间创建名为hexafy的访问:var app = angular.module(myApp, );app.service(hexafy, function() this.myFunc = function (x) return x.toString(16); );app.controller(myCtrl, function($scope, hexafy) $scope.hex = hexafy.myFunc(255););创建自定义服务你可以创建自定义的访问，链接到你的模块中功能是返回数字的16进制是多少？x.toString(16);括号里面的数字代表进制 如果为8则代表8进制。在获取数组 255, 251, 200 值时使用过滤器: x | myFormat过滤器使用服务将10进制转换为16进制。var app = angular.module(myApp, );app.service(hexafy, function() this.myFunc = function (x) return x.toString(16); );app.filter(myFormat,hexafy, function(hexafy) return function(x) return hexafy.myFunc(x); ;);app.controller(myCtrl, function($scope) $scope.counts = 255, 251, 200;);从数组中使用自定义服务读取 JSON 文件 $http x.Name + , + x.Country var app = angular.module(myApp, );app.controller(customersCtrl, function($scope, $http)$http.get(json.json).success(function (response) $s = response.records;););获取json文件records:Name : Alfreds Futterkiste,City : Berlin,Country : GermanyAngularJS Select(选择框)varapp = angular.module(myApp, );app.controller(myCtrl,function($scope) $s = Google,Runoob,Taobao;);在 AngularJS 中我们可以使用ng-option指令来创建一个下拉列表，列表项通过对象和数组循环输出，如右实例:xng-options 与 ng-repeat我们也可以使用ng-repeat指令来创建下拉列表：x.site你选择的是:selectedSite你选择的是:selectedSite.site网址为:selectedSite.url你选择的是: selectedCar.brand模型: selectedCar.model颜色: selectedCar.color下拉列表中的选项也可以是对象的属性。 var app = angular.module(myApp, );app.controller(myCtrl, function($scope) $scope.cars = car01 : brand : Ford, model : Mustang, color : red,car02 : brand : Fiat, model : 500, color : white,car03 : brand : Volvo, model : XC90, color : black );使用对象作为数据源,x为键(key),