
AngularJS学习
文章平均质量分 81
zc的救赎
这个作者很懒,什么都没留下…
展开
-
ng-options指令语法
ng-options一般有以下用法对于数组:label for value in arrayselect as label for value in arraylabel group by group for value in arrayselect as label group by group for value in arrayselect as labe转载 2017-05-12 10:27:23 · 992 阅读 · 0 评论 -
Excel转百度坐标系(AngularJS)
最近由于公司要在百度地图和Echarts上展示几千个地理位置,但是老大给我的却是一份几千条中文地址的excel表格,刚开始的时候打算新建一个数组进行遍历,在输入了10几个数据之后我放弃了,估计光输入就要花一两天,更不要说还要经常统计哪个省份或者城市的数据,这是非常耗时且不易维护的一种解决方案。后来又打算做一个数据库服务器,但是又被我否决了,花的时间估计不比新建数组少。所以决定自己做一个自动转化ex...原创 2019-02-08 12:56:02 · 470 阅读 · 0 评论 -
angualr高级篇之elem.scope()、elem.isolateScope和$compile(elem)(scope)中scope的区别
在angular的使用过程中我们经常用$rootScope.$new()为elem创建一个新的作用域scope,然后使用$compile(elem)(scope)编译这个含有指令的元素。那么这里传进去的scope到底是哪里的作用域?scope.$$childHead是什么作用域?编译好的elem.scope()返回的又是什么作用域?elem.isolateScope()返回的是什么作用域?知道这些原创 2017-09-15 15:58:41 · 656 阅读 · 0 评论 -
angular1.x + ES6开发风格记录
angular1.x和ES6开发风格一、ModuleES6有自己的模块机制,所以我们要通过使用ES6的模块机制来淡化ng的框架,使得各业务逻辑层的看不出框架的痕迹,具体的做法是:把各功能模块的具体实现代码独立出来。module机制作为一个壳子,对功能模块进行封装。每个功能分组,使用一个总的壳子来包装,减少上级模块的引用成本。每个壳子文件把module的name属性export出转载 2017-07-24 14:56:03 · 1996 阅读 · 0 评论 -
探究Angular依赖注入对象$injector
$injector其实是一个IOC容器,包含了很多我们通过.module()和$provide创建的模块和服务。$injector服务提供了对依赖注入器的对象的访问,当然我们也可以调用angular.injector()来获得注入器。var injector1 = angular.injector(["myModule","herModule"]); //获得myModule和herModul原创 2017-05-22 17:44:19 · 6297 阅读 · 0 评论 -
angular指令之complie和link不得不说的故事
angular指令比较晦涩难懂的就是complie和link字段了,什么时候该用complie?什么时候该用link?总是很难分别清楚。当理解了指令的真正编译原理的时候,就会发现这相当的简单。ng怎样处理指令其实是依赖于它定义时的对象属性的,你可以定义一个compile或者一个link函数,或者用pre-link和post-link函数来代替link.。我们先看一段简单的代码:ht转载 2017-05-21 16:14:19 · 673 阅读 · 0 评论 -
angular指令中的preLink函数和postLink函数
指令模板选项有complie和link两个字段,两者之前存在如下关系:当compile字段存在时,link字段将被忽略,compile函数的返回值将作为link字段。当compile不存在,link字段存在时,angular通过这样directive.compile = valueFn(directive.link);包装一层,使用用户定义定义的link字段。而link转载 2017-05-21 14:57:34 · 2315 阅读 · 0 评论 -
angular指令的4种设计模式
指令的功能集非常丰富,不过我们已经发现了指令的帕累托分布:使用angular编写的大量指令只会用到可用性和设计模式中很小的比例,这些指令大概可以分为4类只渲染指令——这些指令将渲染作用域中的数据,但不会修改数据。事件处理封装器——这些指令将封装事件处理程序,从而与数据绑定进行交互,例如ngClick,这些指令不渲染数据。双向指令——这些指令既渲染数据也修改数据。集合了以上3种功能的模板转载 2017-05-21 14:14:45 · 1650 阅读 · 0 评论 -
angular核心$watch,$digest,$apply之间的联系
浏览器事件发生时,会在浏览器的上下文window中执行,而angular有自己的上下文angular content,angular 事件在自己的上下文angular content中执行。$watch$watch组成了双向绑定的一边,在指定的表达式改变时调用,每个作用域都维护了一个监视器列表,被称为$scope.$$watchers。每次你绑定一些东西到你的UI上时你就会往$watch队原创 2017-05-21 01:34:48 · 527 阅读 · 0 评论 -
angular控制器常用的4种通信方式
首先概括一下angular通信的4方式作用域继承通过$scope广播事件事件发射器模块服务1、作用域的继承子作用域可以访问声明在它们的祖先作用域中的变量和函数 this prints '42':{{answer}} m.controller('Controller1', function ($scope) { $scope.answer = 42;});转载 2017-05-20 15:52:37 · 713 阅读 · 0 评论 -
angular控制器、服务和指令三者之间的关系
从总体来看,这三个组件的关系如下所示:服务负责从远端服务器抓取和存储数据基于服务构建的控制器将为angular的作用域层次提供数据和功能基于服务和控制器构建的指令将直接与文档对象模型(DOM)元素进行交互因为控制器并未使用依赖注入器进行注册,所以控制器和服务无法将控制器列为依赖var m = angular.module('myModule');m.factory('myS转载 2017-05-20 15:00:42 · 2302 阅读 · 1 评论 -
angular指令中@,=,&的区别
当directive中的scope设置为一个对象的时候,该指令就有了一个独立的作用域,AngularJS提供了一种绑定策略用于隔离作用域和外部作用域进行通信。1、@(or @attr)使用@符号可以进行单项的数据绑定,取值总是一个字符串,所以要用{{}}。另外这也是一个单向的绑定,外部数据改变会反应到内部,但是内部数据变数据变化,外部不会变。属性要用-连接,scope中写它的驼峰格原创 2017-05-04 19:07:46 · 4299 阅读 · 0 评论 -
angular之scope详解
AngularJS的一些指令会创建子作用域,而子作用域会继承自父作用域,大致可分为以下3种1、创建子作用域并继承父作用域的指令ng-repeatng-includeng-switchng-controllerdirective(scope:true)directive(transclude:true)2、创建子作用域但不继承父作用域directive(scope:{原创 2017-05-04 15:01:03 · 764 阅读 · 0 评论 -
ngRoute路径出现#!#解决方案
在做一个开源项目的时候,使用了"angular-route": "^1.6.4",发现设置了标签的href后,点击后路径出现的不是#/,而是#!#。然而我并没有设置hashPrefix。About点击标签后地址栏中出现:http://localhost:9000/#!#about。打印一下$location。发现我们设置的$location中,并没有像预期的那样是显示在伪url的p原创 2017-05-28 22:49:47 · 770 阅读 · 0 评论 -
Invalid environment specified: http://datatables.org/alltables.env
获取Yahoo股票的API会报错:http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%27AAPL%27)&format=json&diagnostics=true&env=http://datatables.org/alltabl原创 2017-05-12 15:41:11 · 670 阅读 · 0 评论 -
Angular服务的5种创建方式
config配置块Angular应用的运行主要分为两部分:app.config()和app.run(),config是你设置任何的provider的阶段,从而使应用可以使用正确的服务,需要注意的是在配置块中只有provider能被注入(只有两个例外是$provide和$injector)。而且provide也只能在config中注入。Angular注入服务的5中方式中,只有通过provide和原创 2017-05-22 16:09:46 · 695 阅读 · 0 评论 -
Angular通信$q服务和promise对象
promise约定(promise)是一个对象,表示在未来时间点会发生的某件事情,约定可以是三种状态之一:等待、完成或拒绝。约定将从等待状态开始,然后可以转换为完成或者拒绝状态,一旦约定完成或者被拒绝,它就无法再改变状态。例如我们的$http服务返回的就是一个经过包装的promise对象。可以看到,黑色部分圈起来的是基本的promise部分,此外$http还提供了success和e转载 2017-05-23 11:29:00 · 408 阅读 · 0 评论 -
在angularJS1.x中使用@NgModule装饰器
ng1-module-decorator我们都知道Angular2结合TypeScript使用@NgModule装饰器装饰模块是非常方便的,而在angular1.x中我们只能使用angular.module().xxxx来进行模块的组合,如果一个模块的功能非常多,这样写会是非常令人苦恼且不易维护的。幸而在ES6诞生之后,语言本身提供了装饰器的功能,虽然没有typescript那么强大,却也能满...原创 2019-02-08 13:05:42 · 489 阅读 · 0 评论