随笔分类 - AngularJS
摘要：在任何应用程序中，中介者模式随处可见。→ 有一个事件源，触发事件，传递参数→ 中介者记下这个事件，向外界广播，并带上参赛→ 有一个地方侦听中介者事件，一旦事件源触发事件，就从中介者手里获取事件相关参数本篇，要体验的是在AngularJS中的中介者模式。场景是：当创建一个订单，需要引发一些动作，比如给...
阅读全文
摘要：■ 搭建karma测试环境→ 创建app和test文件夹→npm install karma --save-dev→npm install karma-jasmine --save-dev→npm install karma-chrome-launcher --save-dev→karma init...
阅读全文
摘要：通常我们这样写一个菜单： Orders 菜单项是否高亮显示取决于controller中的highlight方法。vm.highlight = funciton(path){ return $locaiton.path().substr(0, path.lenght)...
阅读全文
摘要：在AngualrJS中使用$http每次向远程API发送请求，等待响应，这中间有些许的等待过程。如何优雅地处理这个等待过程呢？如果我们在等待过程中弹出一个遮罩层，会是一个比较优雅的做法。这就涉及到了对$http的请求响应进行拦截了。请求的时候，弹出一个遮罩层，收到响应的时候把遮罩层隐藏。其实，$ht...
阅读全文
摘要：有这样的一个需求：添加用户的时候，根据主键判断当前添加用户的email是否已经被使用。为此，我们需要把主键和email来传递给远程的一个API，让API返回结果，告之当前email是否被使用过。写一个验证email唯一性的Directive，页面大致如下表现： Email alread...
阅读全文
摘要：AngularJS中的transclusion类似于包含关系。通常，这样定义一个directive:转换成html可能是这样的： 现在，想在类名为someclass的div中放置一些动态内容，即： 这里有一些动态内容 如何做到呢？1、在template中通过属性或者元素的方式标记放置动态内容的位...
阅读全文
摘要：在AngularJS中，自定义Directive过程中，有时用link和controller都能实现相同的功能。那么，两者有什么区别呢？使用link函数的Directive页面大致是：Add ItemDirective方面：(function(){ var withoutController ...
阅读全文
摘要：所谓的延迟加载通常是：直到用户交互时才加载。如何实现延迟加载呢？需要搞清楚三个方面：1、html元素的哪个属性需要延迟加载？2、需要对数据源的哪个字段进行延迟加载？3、通过什么事件来触发延迟加载？自定义的Directive的页面表现大致是这样： ...
阅读全文
摘要：如何使用谷歌地图把当前位置显示出来呢？--在html5中，为我们提供了navigator.geolocation.getCurrentPosition(f1, f2)函数，f1是定位成功调用的函数，f2是定位失败调用的函数，而且会把当前的地理位置信息作为实参传递给f1和f2函数。f1函数调用谷歌地图...
阅读全文
摘要：在"AngularJS中自定义有关一个表格的Directive"中自定义了一个有关表格的Direcitve，其表格的表现方式是这样的：以上，变量colmnmap的值是事先定义在了Scope中的：return { restrict: 'E', scope: { columnm...
阅读全文
摘要：我们知道ngModel是AngularJS中默认的一个Directive，用于数据的双向绑定。通常是这样使用的：在控制器中大致这样：$scope.customer ={ name: ''}在上一篇中，有关表格的Directive是这样使用的：以上，datasource代表数据源,是否可以用ng-mo...
阅读全文
摘要：本篇体验在AngularJS中自定义一个有关表格的Directive。表格的需求包括：● 表格结构 Name Street Age > > > 4行● 点击某个th，就对该列进行排序● 可以给表头取别名● 可以设置某个列是否显示● 表格下方有一行显示总行数我们希望表格按如下方式展示：以...
阅读全文
摘要：本篇体验使用AngularJS中的$http对MongoLab数据表进行增删改查。主页面：Load CourseAdd New Course以上，页面上显示course_list.html，add_course.html和edit_course.html的内容显示与toggleAddCourseVi...
阅读全文
摘要：在AngularJS中，有时候需要监视Scope中的某个变量，因为变量的改变会影响一些界面元素的显示。有时，也希望通过jQuery调用Scope的某个方法。比如以下场景： jQ Button Toggle jQ button state Counter: {{counter}}以...
阅读全文
摘要：本篇关注AngularJS中的控制器继承，了解属性和方法是如何被继承的。嵌套控制器中属性是如何被继承的？==属性值是字符串myApp.controller("ParentCtrl", function($scope){ $scope.name = "darren";})myApp.contro...
阅读全文
摘要：在AngularJS中，每一个controller都有对应的Scope，而Scope间有时候需要通讯。比如有如下的一个controller嵌套： ... {{$index + 1}} {{product.name}} ...
阅读全文
摘要：本篇通过几个例子对AngularJS中的Directive进行汇总。例子1，单向绑定和双向绑定 ==单向绑定{{contacts.length}}the first name is {{contacts[0].firstname}}{{contacts[0].f...
阅读全文
摘要：在AngularJS中module是一个核心的存在，包括了很多方面，比如controller, config, service, factory, directive, constant, 等等。在Javascript中如何实现类似module的功能呢？或者说，我们定义一个函数，如何把函数内的函数向...
阅读全文
摘要：本篇体验在AngularJS中实现在"显示/隐藏"这2种状态切换间添加动画效果。通过CSS方式实现显示/隐藏动画效果思路：→npm install angular-animage→依赖：var app = angular.module("app",["ngAnimate"]);→controller...
阅读全文
摘要：假设需要烹饪一道菜肴，有3种原料，可以同时使用所有的3种原料，可以使用其中2种，也可以使用其中1种。如果以Directive的写法，大致是：,或者是...由此，我们需要自定义一个名称是bread的directive,以元素的方式呈现；需要自定义名称是material1的direcitve，名称是ma...
阅读全文
