angular基础 - 随笔分类 - toodeep

ng animate

摘要：要在angular中加入动画必须引入angular.animate.js插件，然后就可以在module中引入ngAnimate模块。如：var module1 = angular.module('myApp',['ngAnimate']);指令对动画支持情况如下Directive Suppor... 阅读全文

posted @ 2015-12-03 11:07 toodeep 阅读(348) 评论(0) 推荐(0)

ngRoute插件

摘要：angular中可以使用插件，例如ngRoute插件就是用与路由控制。首先要在模块中引入即可：var m1 = angular.module('myApp',['ngRoute']);然后我们进行供应商配置m1.config(['$routeProvider',function($routeProv... 阅读全文

posted @ 2015-11-23 15:08 toodeep 阅读(327) 评论(0) 推荐(0)

factory service provide自定义服务

摘要：1.factoryfactory ，就是你提供一个方法，该方法返回一个对象的实例，对于 AngularJS 的 factory 来说，就是先定义一个对象，给这个对象添加属性和方法，然后返回这个对象，例如：var app = angular.module('MyApp', []);app... 阅读全文

posted @ 2015-11-23 11:13 toodeep 阅读(158) 评论(0) 推荐(0)

延迟对象$q和供应商配置config

摘要：1.angular总的$q和jquery中的延迟对象很类似，用法也差不多m1.controller('meng',['$scope','$q',function($scope,$q){ var dfd = $q.defer(); function show(){ ... 阅读全文

posted @ 2015-11-22 16:48 toodeep 阅读(187) 评论(0) 推荐(0)

$anchorScroll和$cache

摘要：1.$achorScroll服务---用于描点跳转$scope.change = function(id){ $location.hash(id); $anchorScroll(); };只要给locatioin设置了对应的hash值，就可以直接跳转，但是还是手动执行一下$ancho... 阅读全文

posted @ 2015-11-21 21:47 toodeep 阅读(293) 评论(0) 推荐(0)

$http服务和$location

摘要：1.angular的$http服务跟jquery中的ajax很类似，用法如下：$http({ method : 'GET', url : 'data.php' }).success(function(data,state,headers,config){ console.l... 阅读全文

posted @ 2015-11-21 21:30 toodeep 阅读(227) 评论(0) 推荐(0)

自定义指令directive

摘要：1.自定义指令在angular中，module下面的directive方法用于创建自定义指令，用法：m1.directive('myTab',function(){ return { restrict : 'AE', replace : true, templateUrl : '... 阅读全文

posted @ 2015-11-21 11:55 toodeep 阅读(305) 评论(0) 推荐(0)

angular中的表单验证

摘要：angular中的表单验证很强大，一共有5中验证信息，$valid,$invalid,$pristine,$dirty,$error.$valid-----当验证通过的时候，为true,不通过的时候为false$invalid----当验证不通过的时候，为true，通过的时候为true$pristi... 阅读全文

posted @ 2015-11-17 13:55 toodeep 阅读(452) 评论(0) 推荐(0)

ng-init,ng-controller,ng-model

摘要：1.ng-init用于初始化数据，跟在$scope插入数据一样，但是在配合repeat指令时候比较有用： {{arrInner}}:{{outerIndex}}{{innerIndex}} 2.ng-controller当controller里面的回调是一个对象的写法的... 阅读全文

posted @ 2015-11-16 21:26 toodeep 阅读(589) 评论(0) 推荐(0)

dom相关指令

摘要：1.ng-show 和 ng-hide当ng-show=''true''的时候 dom会显示，反之隐藏，通过控制display属性2.ng-if 当ng-if=“true” 的时候，dom显示，反之隐藏，通过创建删除dom节点的方式。3.ng-switch.用法如：默认的效果切换... 阅读全文

posted @ 2015-11-16 20:46 toodeep 阅读(310) 评论(0) 推荐(0)

属性相关的指令

摘要：ng-class ng-style ng-href ng-src等都是angular内置的一些attr指令，作用跟原生的写法都是一样的，只是在写法上有些不同。如：{{str}}{{str}} one　其中添加class的写法是不太一样，{red:true,yellow:true}，angular中... 阅读全文

posted @ 2015-11-15 16:24 toodeep 阅读(176) 评论(0) 推荐(0)

ng-bind,ng-cloak优化数据显示

摘要：{{text}} 当我们使用angular在页面中有取值的时候，如果出现网络加载慢的问题，可能会在页面上出现{{text}}这种不好的体验，那么angular有什么样的方法来解决呢。1.通过ng-bind 上述例子改写为：这样就可以解决上述问题。但是如果页面中有多个取值怎么办，如：{{str1}}... 阅读全文

posted @ 2015-11-15 16:08 toodeep 阅读(347) 评论(0) 推荐(0)

ng-repeat指令应用

摘要：1.ng-repeat 一看就知道跟foreach等指令类似，用于循环重复。一般用于列表和表格中。用法如下： {{ data.name }} {{ data.age }}显而易见，dataList是定义在$scope下的一个数组。除了直接遍历数据，还有以下属性可以辅助开... 阅读全文

posted @ 2015-11-15 13:31 toodeep 阅读(438) 评论(0) 推荐(0)

ng中的过滤器

摘要：angular中对输出的值提供过滤器，用法如下：{{name | currency:"￥"}}这是在在html中的用法，用 | 来添加过滤器，过滤器后面通过 : 来添加相应的一些参数，angular内置的过滤器有currency number lowercase/uppercase json lim... 阅读全文

posted @ 2015-11-11 22:32 toodeep 阅读(263) 评论(0) 推荐(0)

$watch监听数据变化和run方法

摘要：angular中$watch方法可以监听数据的变化。$scope.$watch('phone',function(){ $scope.phone.fre = $scope.phone.num>=20 ? 0 : 10; },true);如上所示，只要phone这个... 阅读全文

posted @ 2015-11-11 21:20 toodeep 阅读(556) 评论(0) 推荐(0)

随笔分类 - angular基础