angularJs
来源：互联网 发布：java 堆栈pop报错 编辑：程序博客网 时间：2024/05/16 23:41
AngularJS 简介 AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。 AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。 好的学习网址: http://www.runoob.com/angularjs/angularjs-tutorial.html什么是 AngularJS？ AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。 AngularJS 把应用程序数据绑定到 HTML 元素。 AngularJS 可以克隆和重复 HTML 元素。 AngularJS 可以隐藏和显示 HTML 元素。 AngularJS 可以在 HTML 元素"背后"添加代码。 AngularJS 支持输入验证。引入angular <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>简单示例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app=""> <p>名字 : <input type="text" ng-model="name"></p> <h1>Hello {{name}}</h1> </div> </body> </html> 当网页加载完毕，AngularJS 自动开启。 ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序 的"所有者"。 ng-model 指令把输入域的值绑定到应用程序变量 name。 ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。引导AngularJS应用(初始化) 可通过ngApp指令来自动引导AngularJS应用 AngularJS应用引导过程有3个重要点： 注入器(injector)将用于创建此应用程序的依赖注入(dependency injection)； 注入器将会创建根作用域作为我们应用模型的范围； AngularJS将会链接根作用域中的DOM，从用ngApp标记的HTML标签开始，逐步处理DOM中指令和绑定。 一旦AngularJS应用引导完毕，它将继续侦听浏览器的HTML触发事件，如鼠标点击事件、按键事件、HTTP传入响应等改变DOM模型的事件。 这类事件一旦发生，AngularJS将会自动检测变化，并作出相应的处理及更新。AngularJS 指令 说明 AngularJS 指令是以 ng 作为前缀的 HTML 属性 在html5页面中可以使用 data-ng- 常用指令 ng-app 标记了AngularJS脚本的作用域 可在任意标签中使用 一个网页可以有多个 ng-init 初始化 AngularJS 应用程序变量 写在ng-app所在标签 通常情况下使用一个控制器或模块来代替它 示例 <div ng-app="" ng-init="quantity=1;price=5"> <p><b>总价：</b> {{ quantity * price }}</p> </div> ng-model 绑定 HTML 元素 到应用程序数据,也可以进行数据校验 参见下面的数据绑定 ng-controller 指定使用的控制器 参见下面的控制器 ng-switch 判断 <div ng-app=""> <input ng-model='a'> <ul ng-switch on="a"> <li ng-switch-when="1">1</li> <li ng-switch-when="2">2</li> <li ng-switch-default>other</li> </ul> </div> ng-repeat 循环输出指定次数的 HTML 元素 示例 <div ng-app="" ng-init="names=['Jani','Hege','Kai']"> <ul> <li ng-repeat="x in names"> {{ x }} </li> </ul> </div> 或 <div ng-app="" ng-init="names={'name1':'Jani','name2':'Hege'}"> <table border="1"> <tr ng-repeat="(x, y) in names"> <td>{{x}}</td> <td>{{y}}</td> </tr> </table> </div> 特殊变量 $index 当前循环的索引 $first 是否为头元素 $middle 是否为非头非尾元素 $last 是否为尾元素 $even 当前循环的索引是否是偶数(0,2,4..) $odd 当前循环的索引是否是奇数(1,3,5..) ng-class-even,ng-class-odd 样式,和ng-repeat配合使用 <style> .oddClass { background:red;} .evenClass { background:yellow;} </style> ... <ul ng-app="" ng-init="l=[1,2,3,4]"> <li ng-class-odd="'oddClass'" ng-class-even="'evenClass'" ng-repeat="m in l">{{ m }}</li> </ul> ng-disabled 绑定应用程序数据到 HTML 的 disabled 属性 示例 <div ng-app="" ng-init="mySwitch=true"> <button ng-disabled="mySwitch">按钮</button> <input type="checkbox" ng-model="mySwitch">复选框 </div> 当mySwitch的值为true时,即复选框选中时,按钮将不可点 ng-show,ng-hide 绑定应用程序数据, 控制html元素的隐藏和显示 ng-src,ng-href 用于替代img的src或超链接的href属性 因为页面会先于js加载 ng-style,ng-class 样式 <div ng-app=""> <input ng-model='width'> <div ng-style="{width: width+'px', height: '100px', backgroundColor: 'red'}"></div> </div> 自定义指令 可以使用 .directive 函数来添加自定义的指令 使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive 可以通过标签,属性,类名,注释来调用 示例 <body ng-app="myApp"> <runoob-directive></runoob-directive> <script> var app = angular.module("myApp", []); app.directive("runoobDirective", function() { return { template : abc() }; }); function abc(){ var str = ''; for(var i=0;i<10;i++){ str+="<h1>自定义指令"+i+"</h1>"; } return str; } </script> </body> 自定义函数返回对象的属性 tempate属性的值为页面显示的内容 restrict 值可以是以下几种: E 只限元素名使用 A 只限属性使用 C 只限类名使用 M 只限注释使用 默认值为 EA, 即可以通过元素名和属性名来调用指令 如果需要使用注释来调用,需要在返回对象中添加属性 restrict : "M", replace : true,并在调用时 <!-- directive: 自定义指令 --> AngularJS 表达式 AngularJS 表达式写在双大括号内：{{ expression }} AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙 AngularJS 将在表达式书写的位置"输出"数据。 AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。 如果绑定的变量值发生改变,表达式的值也会实时发生改变数据绑定 说明 数据同步是AngularJS的一个核心特性。当页面加载的时候， AngularJS会根据输入框的属性值名字，将其与数据模型中相同名字的变量绑定在一起，以确保两者的同步性 实时同步 在AngularJS中，一个视图是模型通过HTML模板渲染之后的映射。 这意味着，不论模型什么时候发生变化，AngularJS会实时更新结合点，随之更新视图 任何对于模型的更改都会即时反映在视图上 任何在视图上的更改都会被立刻体现在模型中 优点 节省了大量dom操作 ng-model指令 绑定 HTML 元素 到应用程序数据,也可以进行数据校验 双向绑定 在修改输入域的值时， AngularJS 属性的值也将修改 <div ng-app=""> 数量： <input type="number" ng-model="quantity"> 价格： <input type="number" ng-model="price"> <p><b>总价：</b> {{ quantity * price }}</p> </div> 数据校验 为应用程序数据提供类型验证(number,email,required) email和number需要写到type属性中,而required是单独的一个属性 <form ng-app="" name="myForm"> Email: <input type="email" name="myAddress" ng-model="text" required> <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span> </form> 提示信息会在 ng-show 属性返回 true 的情况下显示 应用状态 可以为应用数据提供状态值(invalid, dirty, touched, error) error的返回值是一个对象,key可能为email,required 其它三个返回值是true或false <form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'"> Email:<input type="email" name="myAddress" ng-model="myText" required> <p>编辑邮箱地址，查看状态的改变。</p> <h1>状态</h1> <p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p> <p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p> <p>Pristine: {{myForm.myAddress.$pristine}} (如果值没有改变则为 true)。</p> <p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p> <p>Error: {{myForm.myAddress.$error}} (错误信息)。</p> </form> css类 根据表单域的状态添加/移除以下类 ng-empty ng-not-empty ng-touched ng-untouched ng-valid ng-invalid ng-dirty ng-pending ng-pristine 示例 <style> input.ng-invalid { background-color: red; } </style> <body> <form ng-app="" name="myForm"> 输入你的名字: <input name="myName" ng-model="myText" required> </form> </body> 当文本框的值为空时,背景色会变红AngularJS 模块 模块定义了一个应用程序 模块是应用程序的容器 定义 <script> var app = angular.module("myApp", []); </script> 在模块定义中 [] 参数用于定义模块的依赖关系 使用 <div ng-app="myApp">...</div> 优点 JavaScript 中应避免使用全局函数。因为他们很容易被其他脚本文件覆盖。 AngularJS 模块让所有函数的作用域在该模块下，避免了该问题。AngularJS 控制器 AngularJS 控制器 控制 AngularJS 应用程序的数据。 ng-controller 指令指定使用的控制器 <div ng-app="myApp" ng-controller="myCtrl"> 名: <input type="text" ng-model="firstName"><br> 姓: <input type="text" ng-model="lastName"><br> <br> 姓名: {{firstName + " " + lastName}} </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; }); </script>AngularJS Scope(作用域) AngularJS 应用组成如下： View(视图), 即 HTML。 Model(模型), 当前视图中可用的数据。 Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。 Scope用来存放模型,用来在视图和控制器之间传递数据 使用$scope 创建控制器时，可以将 $scope 对象当作一个参数传递: 视图中,不需要添加 $scope 前缀,只需要使用属性名即可,如： {{carname}} <div ng-app="myApp" ng-controller="myCtrl"> <h1>{{carname}}</h1> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.carname = "Volvo"; }); </script> Scope不仅可以存放属性,也可以存放方法 作用域和根作用域 在$scope上定义的属性只在当前ng-app或某个ng-repeat循环中有效 $rootScope作用域为根作用域,定义的属性在ng-app所有位置有效,使用方法和$scope相同AngularJS 过滤 用于转换数据(格式化) 或 排序 使用一个管道字符（|）添加到表达式和指令中 常用过滤器 currency 格式化数字为货币格式。 filter 从数组项中选择一个子集。 lowercase 格式化字符串为小写。 orderBy 根据某个表达式排列数组。 uppercase 格式化字符串为大写。 在表单式中使用过滤器 {{ lastName | uppercase }} 在指令中使用过滤器 <div ng-app="myApp" ng-controller="namesCtrl"> <ul> <li ng-repeat="x in names | orderBy:'country'"> {{ x.name + ', ' + x.country }} </li> </ul> <div> 输入过滤器(将过滤器的输出作为另一个过滤器的输入) <div ng-app="myApp" ng-controller="namesCtrl"> <p><input type="text" ng-model="test"></p> <ul> <li ng-repeat="x in names | filter:test | orderBy:'country'"> {{ (x.name | uppercase) + ', ' + x.country }} </li> </ul> </div> 格式化时间 {{ a | date:'yyyy-MM-dd HH:mm:ss' }} 自定义过滤器 var app = angular.module('phonecatFilters', []); app.filter('checkmark', function() { return function(input) { return input ? '正确' : '错误'; }; }); 例子 表格排序 <div ng-app="myApp"> <div ng-controller="myCtrl"> <table> <tr> <th ng-click="f='name'; rev=!rev">名字</th> <th ng-click="f='age'; rev=!rev">年龄</th> </tr> <tr ng-repeat="o in data | orderBy: f : rev"> <td>{{ o.name }}</td> <td>{{ o.age }}</td> </tr> </table> </div> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope){ $scope.data = [ {name: 'B', age: 4}, {name: 'A', age: 1}, {name: 'D', age: 3}, {name: 'C', age: 3}, ]; }); </script>AngularJS 服务(Service) 在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用 服务的优点 AngularJS 会一直监控应用，处理事件变化， AngularJS 使用 $location 服务比使用 window.location 对象更好 常用内置服务 $location 对应window.location $http 向服务器发送请求 $timeout 对应window.setTimeout $interval 对应window.setInterval 创建自定义服务 声明 方式一: 使用service方法 app.service('hexafy', function() { this.myFunc = function (x) { return x.toString(16); } }); 方式二: 使用factory方法 app.service('hexafy', function() { var myFunc = function (x) { return x.toString(16); } return myFunc; }); 方式三:使用$provide来定义 使用 app.controller('myCtrl', function($scope, hexafy) { $scope.hex = hexafy.myFunc(255); }); 服务是作为一个参数传递到 controller 中。如果要使用它，需要在 controller 中定义 $http 发送请求 示例 var p = $http({ method: 'GET', url: '/json' }); p.success(function(response, status, headers, config){ $scope.name = response.name; }); 参数 method 方法 url 路径 params GET请求的参数 data post请求的参数 headers 头 transformRequest 请求预处理函数 transformResponse 响应预处理函数 cache 缓存 timeout 超时毫秒，超时的请求会被取消 withCredentials 跨域安全策略的一个东西 便捷写法 $http.delete(url, config) $http.get(url, config) $http.head(url, config) $http.jsonp(url, config) $http.post(url, data, config) $http.put(url, data, config)依赖注入 当控制器构造的时候，AngularJS的依赖注入器会将这些服务注入到你的控制器中 只需要在控制器的构造函数里面作为参数声明出所需服务的名字 压缩问题 由于AngularJS是通过控制器构造函数的参数名字来推断依赖服务名称的。 所以如果你要压缩代码，它所有的参数也同时会被压缩，这时候依赖注入系统就不能正确的识别出服务了。 解决方式一: app.$inject = ['$http']; app.controller('myCtrl', function($http) { ... }); 解决方式二: app.controller('myCtrl', ['$http', function($http) { ... }]);AngularJS 内置方法 转换 angular.lowercase() 将字符串转换为小写 angular.uppercase() 将字符串转换为大写 angular.copy() 数组或对象深度拷贝 angular.forEach() 对象或数组的迭代函数 比较 angular.isArray() 如果引用的是数组返回 true angular.isDate() 如果引用的是日期返回 true angular.isDefined() 如果引用的已定义返回 true angular.isElement() 如果引用的是 DOM 元素返回 true angular.isFunction() 如果引用的是函数返回 true angular.isNumber() 如果引用的是数字返回 true angular.isObject() 如果引用的是对象返回 true angular.isString() 如果引用的是字符串返回 true angular.isUndefined() 如果引用的未定义返回 true angular.equals() 如果两个对象相等返回 true JSON angular.fromJSON() 反序列化 JSON 字符串 angular.toJSON() 序列化 JSON 字符串 基础 angular.bootstrap() 手动启动 AngularJS angular.element() 包裹着一部分DOM element或者是HTML字符串，把它作为一个jQuery元素来处理。 angular.module() 创建，注册或检索 AngularJS 模块AngularJS 包含 可以在 HTML 中包含 HTML 文件 使用 ng-include 指令来包含 HTML 内容 示例 <div ng-include="'b.html'"></div>多视图和路由(暂时不会) index.html <div ng-app="phonecat"> <div ng-view></div> </div> <script> angular.module('phonecat', []). config(['$routeProvider', function($routeProvider) { $routeProvider. when('/phones', {templateUrl: 'phone-list.html', controller: PhoneListCtrl}). when('/phones/:phoneId', {templateUrl: 'phone-detail.html', controller: PhoneDetailCtrl}). otherwise({redirectTo: '/phones'}); }]); function PhoneListCtrl($scope) { } function PhoneDetailCtrl($scope, $routeParams) { $scope.phoneId = $routeParams.phoneId; } </script> otherwise使得当浏览器地址不能匹配我们任何一个路由规则时，触发重定向到/phones phone-list.html 这是list页面 phone-detail.html 这是detail页面,phoneId:{{phoneId}}AngularJS 事件 AngularJS 支持以下事件: ng-click ng-dbl-click ng-mousedown ng-mouseenter ng-mouseleave ng-mousemove ng-keydown ng-keyup ng-keypress ng-change ng-click 点击事件 <div ng-app="myApp" ng-controller="personCtrl"> <button ng-click="toggle()">隐藏/显示</button> <p ng-hide="myVar">你好</p> </div> <script> var app = angular.module('myApp', []); app.controller('personCtrl', function($scope) { $scope.myVar = false; $scope.toggle = function() { $scope.myVar = !$scope.myVar; } }); </script> 事件对象 可使用$event 0 0
- AngularJS
- angularjs
- Angularjs
- angularJS
- AngularJS
- AngularJS
- AngularJS
- AngularJs
- AngularJS
- AngularJs
- AngularJs
- AngularJS
- AngularJS
- AngularJS
- AngularJS
- AngularJS
- angularjs
- AngularJS
- eclipse实用小技巧
- C#/模拟键盘和鼠标的操作
- ES6 import/export:模块导入导出方式
- mysql innodb 行锁 insert
- 迷宫
- angularJs
- LeetCode 378. Kth Smallest Element in a Sorted Matrix 题解（C++）
- 根据前序遍历和中序遍历结果重建二叉树（递归方法）
- Django模块之include:
- 利用类反射和注解做自己的JUnit测试工具
- Extjs
- 安卓中的文件存储方式
- git
- C++中四种类型转换以及const_cast是否能改变常量的问题
