AngularJS
文章平均质量分 91
1.总结项目实战中经常遇到的angular1.x问题及个人解决方案;
2.ui-router与angular配合配合使用中鲜为人知的问题和个人处理办法;
3.收集日常开发中有关ui-router和angular的总结性技术要点内容。
骑着代马去流浪
这个作者很懒,什么都没留下…
展开
-
angular中使用multiselect实现二级下拉联动
在angular中用到了bootstrap-multiselect下拉插件,实现二级联动的效果:1)引入插件: 2)html下拉框: One Two Three {{x}} 3)js实现下拉效果,这里用到了$scope.mulLink()函数,当一级改变的时候,用这个函数给二级下拉赋值该表其列表:原创 2017-05-16 14:34:57 · 2426 阅读 · 0 评论 -
angular中使用bootstrap-multiselect设置单选选中
使用multiselect设置选中的方法: $('selector').multiselect({ //各项参数配置 });//初始化下拉框 $('selector').multiselect('select','x');//设置下拉中的x选项选中 $('selector').multiselect('rebuild');//重建将x渲染上去举例说明使用angular设原创 2017-05-12 09:56:53 · 4011 阅读 · 0 评论 -
angularJS应用架构浅析
本文以一个基于angularJS框架的简单应用分析angularJS应用的基本架构1.理解几个基本概念1.1 angularJS控制器对于刚入门的童鞋来说,提到控制器可能想到了就是电器上的一些开关或者控制设备等,实际上,在JavaScript编程中也有控制器这一概念,angularJS控制器(以下简称控制器)指的是附加在文档对象模型(DOM)节点上的函数,用来驱动应用程序的逻辑,通俗的原创 2016-12-09 22:42:15 · 5913 阅读 · 8 评论 -
第3篇:angularJS使用ui-router的嵌套路由配置
引入js文件:<script type="text/javascript" src="lib/angular/angular-1.3.0.js"></script> <script type="text/javascript" src="lib/angular/angular-ui-router.js"></script>路由配置: 1)ui-serf配置<a ui-sref="a">原创 2017-05-10 22:52:30 · 724 阅读 · 0 评论 -
第4篇:ui-router 切换路由后页面不回到顶部的解决办法
在使用ui-router中用$state.go切换路由后,子页面不会回到顶部而是停留在上一个子页面对应的位置,若使用在ui-view使用autoscroll="true"的属性,当路由顶部有导航时并不能回到顶部,可以使用run配置监控路由变化:app.run(['$rootScope', '$state', function ($rootScope, $state){ $rootSc原创 2017-05-11 10:02:23 · 2945 阅读 · 0 评论 -
第5篇:ui-router路由带参数跳转后controller执行两次的问题处理
最近用到了ui-router做项目:跳转路由:Create Offer路由配置:.state('createOffer', { url: "/offerManager/create/{id}", templateUrl: "./view/appOffer/offer/create/createOffer.html", controller:"cr原创 2017-05-11 10:56:43 · 3951 阅读 · 0 评论 -
第6篇:AngularJS路由去掉url里的#号刷新404($locationProvider.html5Mode(true)刷新404)
原文地址:http://blog.fens.me/angularjs-url/前言天天都在用AngularJS,各类文档也都看过好几遍,但总是些编程上的事找不到优雅的解决办法。今天终于把AngularJS的项目访问路径URL里的#号去掉了,这个问题不见得有多难,关键是花多长时间去理解AngularJS框架本身。目录URL的#号问题找到错误原因静态网站的解转载 2017-05-15 17:30:38 · 2648 阅读 · 0 评论 -
第7篇:ui-router登录检查实现权限控制
做项目时用到了前端登录检查实现用户权限控制,在angularJS插件中用到了ui-router,可以利用本地存储实现对登录状态的监听,实现如下:1)登录成功,将登录信息写入本地存储:$.ajax({ type: 'POST', url: api.login_url, data: data,原创 2017-05-15 23:58:10 · 1849 阅读 · 0 评论 -
第8篇:angular监听和获取路由的状态
注入$location服务,使用path()方法获取路由状态和路由参数angular.module('myApp') .run(['$rootScope','$location', '$routeParams', function($rootScope, $location, $routeParams) { $rootScope.$on('$routeChangeSuccess',原创 2017-06-01 18:09:03 · 3460 阅读 · 1 评论 -
第9篇:angular动态删除或插入节点元素
此方法使用了angular的迭代指令ng-repeat,从一个元素的集合里迭代出来显示在视图上。看代码(略去的css样式) Add New Postback原创 2017-06-05 14:31:54 · 9235 阅读 · 0 评论 -
第10篇:ui-router+ocLazyLoad实现控制器js文件的按需加载
在使用angular搭建项目的时候,如果单页面过多,就会配置过多的控制器,服务器等,就会导致项目启动时太多的js文件加载进来,存在其不合理之处,使用ocLoadLoad可以实现单页面控制器等js文件的懒加载,避免项目启动时过多的文件加载进来。下面以一个demo为例分析如何使用lazyload和ui-router实现控制器的懒加载1.项目目录结构:tpl 三个视图文件ctrl 三个视原创 2017-06-22 17:27:43 · 2052 阅读 · 0 评论 -
第11篇:Angular 监听路由变化
原文:http://blog.csdn.net/JunBo_Song/article/details/52127485【一】Angular 路由状态发生改变时可以通过'$stateChangeStart'、'$stateChangeSuccess'、'$stateChangeError'监听,通过注入'$location'实现状态的管理,代码示例如下:function run($ion转载 2017-07-12 16:02:13 · 3247 阅读 · 0 评论 -
第12篇:ng-class的用法
To apply different classes when different expressions evaluate to true: Hello World!To apply multiple classes when an expression holds true: Hello World!or quite simply: H原创 2017-07-12 16:18:33 · 565 阅读 · 0 评论 -
第13篇:Angular-表单动态添加删除
原文:http://webserver.300364.net/show/11019444150761540564.htmlangular本身不允许去操作DOM,在angular的角度来说,所有操作都以数据为核心,剩下的事情由angular来完成。所以说,想清楚问题的根源,解决起来也不是那么困难。 前提 那么,要做的这个添加删除要具有以下功能: 1、当数据只剩一条时,不允许转载 2017-07-12 16:28:23 · 2847 阅读 · 0 评论 -
第14篇:angular动态添加和删除组件元素的封装函数
实现功能包括:1)默认保留一组组件,每组组件自带删除按钮;2)每点击增加按钮,增加一组类似组件;3)点击每组组件上的删除按钮则删除该组组件,剩最后一组组件时点击删除按钮则情况该组件的内容不删除组件.封装的方法为:$rootScope.changeEle = function(obj) { obj.data = ['']; obj.add = functi原创 2017-07-13 09:33:44 · 3668 阅读 · 0 评论 -
第15篇:angular表单验证
原文地址:http://lib.csdn.net/article/angularjs/33619Q:novalidate:阻止常规的表单提交//如果你要自己定义验证方式,那么请加上novalidate属性,以此避开浏览器自行验证。 Q:form中数据有错误时候不可用Save Inner Q:输入时判断正确与否及时给输入框样式input.ng - invalid.ng转载 2017-07-13 10:04:05 · 600 阅读 · 0 评论 -
第16篇:angular字符串转换为变量名
在controller中定义了一个变量$scope.a_1 = "abc";想在view里面动态输出,因为这个数字是动态的,这么输出肯定是不行的{{'a_' + '1'}},因为输出来的是a_1这个字符串,而不是a_1这个变量的值想输出a_1这个变量的值,可以使用$eval方法:{{$eval('a_' + '1')}}$eval是作为scope的方法来使用的,在c原创 2017-07-13 10:27:31 · 1983 阅读 · 0 评论 -
第17篇:AngularJS中的Provider们:Service和Factory等的区别
原文地址:https://segmentfault.com/a/1190000003096933引言看了很多文章可能还是不太说得出AngularJS中的几个创建供应商(provider)的方法(factory(),service(),provider())到底有啥区别,啥时候该用啥,之前一直傻傻分不清楚,现在来总结一下。下文中泛指统一用中文,英文即为特指$provi转载 2017-07-13 14:38:03 · 363 阅读 · 0 评论 -
第18篇:ui-router强制刷新当前路由
在使用ui-router的项目中当编辑某个栏目完成之后需要重新加载,或者当输入信息有误需要恢复初始的表单状态时,就需要对当前路由进行强制刷新,在angular1.4版本中使用$state.reload()或者$state.reload('currentState')并没有起到作用,尝试使用$state.transitionTo()起到了作用。1.直接在代码中使用:$state.transi原创 2017-07-26 11:16:39 · 3193 阅读 · 0 评论 -
第19篇:ng-repeat循环字符串转换成的对象的过滤器
使用angular开发项目的时候,当请求返回的数据是对象字符串,然后需要将字符串转换为对象,然后使用ng-repeat赋值到dom元素上,需要用到转换为对象的过滤器:angular.module('app', []) .filter('jsonParse', function() { return function (str) { try{ return原创 2017-07-26 13:11:23 · 745 阅读 · 0 评论 -
第20篇:基于bootstrap-datatimepicker带时间段的选择 (与multiselect搭配使用,与angular搭配使用)
1.文件引入2.HTML代码(视图页面) Period Today Yesterday Last 7 Days This Month原创 2017-07-28 13:45:14 · 772 阅读 · 0 评论 -
第21篇:9 种改善 AngularJS 性能的方法
原文:https://www.oschina.net/translate/9-ways-to-improve-angularjs-performance?lang=chs&page=1#AngularJS 是目前使用非常广泛的 web app 应用框架,随着它的受欢迎程度持续上升 ,期待已久的AngularJS 4.0 诞生了。尽管已经做了很多优化,但几乎每个 Angular 专家仍然转载 2017-07-31 14:24:08 · 891 阅读 · 0 评论 -
第22篇:Angular 比较常用的指令
原文:http://techlogs.cn/angular-bi-jiao-chang-yong-de-zhi-ling/已经用了angular很久积累了一些很实用的指令,需要的话直接拿走用,有问题大家一起交流1.focus时,input:text内容全选angular.module('my.directives').directive('autoselect', [funct转载 2017-08-02 09:55:27 · 461 阅读 · 0 评论 -
第23篇:AngularJS单选框及多选框实现双向动态绑定
原文:http://blog.csdn.net/ligang2585116/article/details/48089285在AngularJS中提及双向数据绑定,大家肯定会想到ng-model指令。一、ng-modelng-model指令用来将input、select、textarea或自定义表单控件同包含它们的作用域中的属性进行绑定。它将当前作用域中运算表达式的值同给定的元素进转载 2017-08-02 10:01:36 · 492 阅读 · 0 评论 -
第24篇:AngularJS实现给动态生成的元素绑定事件的方法
在AngularJS中,操作DOM一般在指令中完成,事件监听机制是在对于已经静态生成的dom绑定事件,而如果在指令中动态生成了DOM节点,动态生成的节点不会被JS事件监听。举例:angular.module('myapp',[]).directive('myText',function(){ return{ restrict:'A', template:'Hi e原创 2017-08-22 17:34:35 · 1100 阅读 · 0 评论 -
第25篇:Angular新手容易碰到的坑
在Angular群里回答新手问题一段时间了,有一些Angular方面的坑留在这里备查,希望能对各位有所帮助。这个文章将来会随时更新,不会单独开新章,欢迎各位订阅。Q1. 错在哪里?如果你这么写过,会发现这个位置啥也没有加载出来,那么,错在哪里呢?错在ng-include需要的是一个变量,如果你在$scope中有这样一个变量 $scope.userShowTemplateUrl转载 2017-08-30 16:49:30 · 387 阅读 · 0 评论 -
第26篇:AngularJS+ui-router实现一个超简单的登陆和跳转的二级路由demo
1.页面结构介绍:1)index.html:页面入口文件;2)views文件夹下:login文件夹下:登陆页面和对应控制器;home文件夹下:home.html/home.js:二级路由页面和对应的控制器adv/list文件夹:二级页面和对应的控制器文件3)lib文件夹:引入的框架文件4)common文件夹:公共样式和脚本等文件2.定义路由入原创 2017-12-01 11:50:36 · 4848 阅读 · 1 评论 -
第30篇:AngularJS 中的 factory、 service 和 provider区别
原文地址:点击打开链接之前类似文章:第17篇:AngularJS中的Provider们:Service和Factory等的区别初学 AngularJS 时, 肯定会对其提供 factory 、 service 和 provider 感到疑惑, 这三种都是提供服务的方式, 他们到底有什么区别呢?factoryfactory 可以认为是设计模式中的工厂方法,转载 2018-02-05 19:01:23 · 217 阅读 · 0 评论 -
angularjs给Model添加拦截过滤器,路由增加限制,实现用户登录状态判断
原文地址:http://www.brafox.com/post/2015/javascript/angularjs/angularjs-router-interceptor.html使用angularjs的但页面应用时,由于是本地路由在控制页面跳转,但是有的时候我们需要判断用户是否登录来判断用户是否能进入界面。angularjs是mvc架构所以实现起来很容易也很灵活,我们只MainControll...转载 2018-06-19 10:20:46 · 363 阅读 · 0 评论