AngularJS 多个控制器共享服务

多个控制器共享同一个服务(Service),就是一个控制器操作的数据会影响到其它控制器中的数据。 下面直接贴出代码: HTML 代码 index.html <!DOCTYPE html> <html lang="en" ng-app="yk"> <head> <meta charset="UTF-8"> <title>AngularJS 多个控制器共享服务</title> <link rel="stylesheet" href="http://yunkus.com/demo/lib/css/bootstrap...

2017
09-27

Element.scrollIntoView() 用法

Element.scrollIntoView() 可以让元素滚动到可窗口可视区域。类似于我们平时用到的锚文本功能。 语法 看这里 element.scrollIntoView(); element.scrollIntoView(alignToTop); // Boolean parameter element.scrollIntoView(scrollIntoViewOptions); // Object parameter 参数 alignToTop alignToTop 为可选的布尔值类型 如果 alignToTop 为 true 或者不传,窗口会尽量滚动自身顶部与元素顶部对...

2017
09-26

iscroll 让移动 WEB 页面滚动如丝般顺滑

前言 iscroll 是一个有关于移动端滑动的解决方案,但它又不仅仅只是滑动,还有一些其它的非常好用的功能,比如:图片放大,视觉差效果。 关于 iscroll 也没什么好说的,直接点开 demo 链接,你就可以感受到如丝般顺滑原来就这么简单。 iscroll 示例 http://yunkus.com/demo/iscroll/demos/2d-scroll/index.html http://yunkus.com/demo/iscroll/demos/barebone/index.html http://yunkus.com/demo/iscr...

2017
09-24

AngularJS $timeout $interval 定时器用法

前言 原生的 JavaScript 已经给我们提示了setTimeout 和 setInterval 了,为什么 Angular 还给我们这两个东西($timeout $interval)呢?。因为在AngularJS 中如果你使用原生的setTimeout 和 setInterval 的话,在计时器里更改的值是不是自动更新到页面中的,而$timeout 和 $interval 就可以做到,也就是说 AngularJS 为我们把原生 JavaScript 的 setTimeout 和 setInterval 做了封装。 看这里 <!DOC...

2017
09-23

AngularJS ng-repeat 遍历完成(repeatFinish)

AngularJS 中的 ng-repeat 相信你已经再熟悉不过了,在这里也没有什么好说的,本文主要是想分享下 ng-repeat 完成的判断。这个判断也很常用,比如页面中的轮播图就很有可能会用到这个判断。所以我们现在就开始吧! 看这里 <!DOCTYPE html> <html lang="en" ng-app="yk"> <head> <meta charset="UTF-8"> <title>AngularJS $repeatFinish</title> <...

2017
09-23

AngularJS $cacheFactory 缓存用法

前言 缓存有很多种,比如本地缓存、会话、以及本文将要介绍的 $cacheFactory ,它们能给我们带来不少好处,比如数据的临时存储,下面就来分享分享这个好东西。 看这里 <!DOCTYPE html> <html lang="en" ng-app="yk"> <head> <meta charset="UTF-8"> <title>AngularJS $cacheFactory 缓存</title> <script src="http://yunkus.com/demo/lib/js/...

2017
09-23

移动端禁止页面滚动最佳实践

在移动端禁止页面滚动非常的有用,比如在手机端弹出一个弹窗,并带有遮罩,此时你肯定不想让页面可以滚动,毕竟这个遮罩看起来就是这种感觉。下面我们分享一段很实用的代码。代码非常的精简,但恰到好处。 看这里 function preventDefaultHandler(e){ e.preventDefault(); }; document.addEventListener('touchstart', preventDefaultHandler,false);//阻止默认滑动事件(绑定 touchstart) docum...

2017
09-20

Cordova APP 使用友盟 U-WEB 事件跟踪统计分析功能

前言 这是一篇没有什么技术含量的文章,只是在 Cordova 构建的 APP 中调用友盟 WEB 版的事件跟踪统计功能。如果是把友盟统计(https://www.umeng.com/)用到网页中,那么这篇文章就没有什么值得看的了。因为如果是放到网站中,那么就你直接把相关代码放到页面上就完事了。 友盟事件跟踪之旅 首先官方是有提供 Cordova 的 SKD 资源包。但在这里不用  SKD 资源包,而是尝试使用友盟的 U-WEB(网站统计)...

2017
09-18

移动端非常实用的插件和库

前言 本文主要分享下移动端比较常用的一些插件及库。包括 JS 库和 CSS 库。有了这些插件及库,你也可以轻松做一个移动项目,即使是我们生活中常用的 APP 中的一些效果。 JavaScript 库 有了下面这两个 JavaScript 库,就可以让你的 APP 页面有了质的飞越,效果棒棒不要不要的。 Swiper 官网地址:http://www.swiper.com.cn/ 这个插件可以实现一些导航滑动效果,页面切换效果,甚至是H5 的视觉差效果...

2017
09-17

JavaScript 判断对象是否为空

前言 在 JavaScript 的世界我们会遇到很多种意想不到的情况,更不用说如何判断对象是否为空这样的常用技巧了。本文不会长,几段代码就结束了,所以相信你应该可以在两分钟内看完。 怎么判断一个对象是否为空呢?套路也不多,就几种。我就把它们罗列出来,希望你喜欢: 空对象之旅 方法一:JSON.stringify() JSON.stringify(),用于把一个对象解析成字符串,返回值为JSON 文本的字符串。 看这里 var ...

2017
09-14

AngularJS 实现省市区三级联动功能

省市区三级联动功能无处不在,所以本文就来分享下如何用 AngularJS 实现省市区的三级联动功能。AngularJS  实现这个功能极其的简单,主要还是得看数据结构,如果数据结果合理,基本都不用写 JS 代码。不信,我们走着瞧! 省市区三级联之旅 因为是基于 AngularJS,所以直接把代码贴出来。 看这里 <!DOCTYPE html> <html lang="en" ng-app="yk"> <head> <meta charset="UTF-8"&...

2017
09-12

AngularJS ng-options 指令套路大全

前言 下拉框无处不在,我们不能小看它,因为它的功能还是很实在的。下面就把 AngularJS 中的 ng-options 指令整理成文。以备不时之需。 ng-options 指令 ng-options 指令说强大也不强大,但它可以帮助我们实现一些常用的功能,比如:下拉联动选择。ng-options 根据其处理的数据大致可以分为三大类,下面我们将逐个记录。 数组型下拉框 看这里 <!DOCTYPE html> <html lang="en" ng-app="yk...

2017
09-11

FLEX 布局中的兼容性写法汇总

前言 随着浏览器的发展 FLEX 布局已经慢慢地走进了前端世界,虽然这样,但 FLEX 在实际的使用当中我们还得考虑下它的兼容性问题。即使现在已经是移动端横行霸道的时代,并且老版本的 IE 也已经慢慢退出历史的舞台,但浏览器之间也还是坚持着自己的一套方案。所以在这里有必要,也应该为给自己整理下 FLEX 布局当中的一些兼容性写法。虽然有很多编辑器也已经很智能,自带自动补全功能。 FLEX 兼容性之旅 ...

2017
09-10

AngularJs 数据表格化(完美展示)

前言 AngularJs 的强大之处不必多说,在平时的开发中我们经常会用来表格来展示相关数据,并且可以新增、删除、修改数据,你甚至还可以按不同的关键字对数据进行排序。这个功能都是极常见的。所以在这里我们在必要用专门一篇文章来分享它。 AngularJS 数据表格化之旅 HTML 代码 <!DOCTYPE html> <html lang="en" ng-app="yk"> <head> <meta charset="UTF-8"> <title>...

2017
09-10

Bower 前端依赖包管理器

前言 Bower 是一个软件包管理器(如JavaScript、HTML、CSS之类的网络资源),你可以在应用程序中用它来安装新的软件包,它可以让你很好地管理前端中各种依赖比如:jQuery、Boostrap、Angular、React 等。下面我们就来看看 Bower 这个好东西。 为什么是 Bower 在项目用使用 Bower 来管理依赖如以下几个好处: 管理项目中所有依赖的版本号 可以下载依赖源码 让依赖关系处理起来变得前所未有的简单,可以...

2017
09-09

移动端布局解决方案

前言 在移动 WEB 开发中页面整体框架的布局极其重要,如果你曾经感受过这种痛苦,你就会觉得这篇文章就是为你而写。还是那句话:好的开始,你就成功了一半。我们开始吧? 这也是我自己踩过的一个大坑,在项目中没有做好页面整体框架的规划,也就是整个页面上中下如何布局。对于头部和底部我用了fixed 看起来没有什么毛病,但在实践的使用中就会发现一些让你抓狂的 BUG。在 IOS(如:iphone 5s) 下弹出键...

2017
09-06

关于移动端开发的一些忠告

有好的开始,你就成功的一半,在移动端开发中也不例外。对于一个项目来说框架的选择以及整个项目的结构布局极其重要。下面就分享下自己在平时开发过程中遇到的一些问题,会文会一直更新。 问题一:要不要选择前端 UI 框架 对于这个问题得根据项目的实践情况来进行选择。比如:你的项目采用了敏捷开发,那么框架对于你来说就很有必要了,但是这里有一个问题需要注意,你得提前跟交互同事、UI 同事沟通好。...

2017
09-04

JavaScript 正则表达式用法及常用的正则表达式整理

前言 正则表达式功能之强大,不用多说,不敢想象没有正则表达式的程序世界里会是怎么样的。正则表达式是一种匹配的模式,用于匹配一个或者多个字符串。 字符串常用的一方法如: indexOf 查找下标(通过字符串) substring 获取子字符串(有两个参数,开始位置,结束位置,但不包含结束位置) charAt 获取某个字符(通过下标) split 分割字符获取数组 但在这里我们通过正则来完成字符串的一些操作。 判...

2017
08-26

WAMP SERVER 环境下,手机端访问电脑本地站点(localhost)

前言 移动开发盛行,移动端页面调度就显示极其重要。很多东西只有在真机下才能看到最终效果。于是我们就需要通过手机端来访问电脑中的站点来进行调试,包括但不限于样式调整。下面就分享一个移动端套装。不能说是最好的,但至少是够用。本文主要分享的东西是通过手机端访问页面,从而达到提高开发效率的目的。 准备 要想使用这个功能来提高工具效率的,我们必需先安装两个软件:Wamp Server 和 360 手...

2017
08-08

腾讯地图 API 使用指南

前言 地图功能对于我们的日常生活来说非常地重要,不管你去到哪里都需要地图为你保驾护航,这次整理了下调用腾讯地图 API 时的一些有用的东西,不为别的只为让看到的人节省点时间,时间无价,但我愿意把浪费了自己时间的一些东西分享出来,让“前人种树后人乘凉”的美好品质传承下去。 资料整理 在项目中如果我们是通过 requirejs 来管理 js 。那么你肯定会遇到这样的问题。 看这里 require.config({ ...

2017
08-05

angularjs 自定义指令(directive)

前言 一个指令(directive)就相当一个模块,可以把它当作一个功能的模块。把一个功能做成指令后,你就可以反复重用它,而不需要写多份代码。 基本用法 基本用法就直接上码了: HTML 代码 <!DOCTYPE html> <html lang="en" ng-app="yunkus"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...

2017
08-02

AngularJS 事件传播($broadcast() || $emit())

前言 由于某种原因我们需要在不同的 controller 之间进行通信,以达到一些特别的需要。那么我们就可以用AngularJS 给我们提供的两个方法配合使用来达到预期效果。这两个方法就是$broadcast() 和 $emit()。 费话少说 $broadcast() $broadcast() 翻译成中文就是广播。也就是上级向下级推送信息。类似于原生 JavaScript 中的事件捕获。 $emit() $emit() 与$broadcast() 正好相反。$emit() 方法向上推...

2017
07-30

Angularjs ngRoute 用法

前言 Angularjs (即Angular 1),虽然 Angular 2 及以上版本已经放出,但 Angular 1 想全身而退,似乎又有点早,所以对于前辈我们需要送上足够的尊重。所以本文只要分享的是 Angularjs 中的ngRout 插件。 ngRoute 初识 ngRoute 中包含的东西也不是很多,主要有以下一些: 1、$routeProvider(when、otherwise) 2、$routeParams (参数) 3、事件($on、$routeChangeStart、$routeChangeSuccess、rout...

2017
07-29

Angular 4.x NgPlural 指令用法

基本用法 下面是官方给出的用法样例: 官方套路 <some-element [ngPlural]="value"> <ng-template ngPluralCase="=0">there is nothing</ng-template> <ng-template ngPluralCase="=1">there is one</ng-template> <ng-template ngPluralCase="few">there are a few</ng-template> </some-element> 示例 其实 NgPlural 的用法跟 NgSwitch...

2017
07-23

Angular 4.x NgSwitch 指令用法

基本用法 下面是官方给出的基本套路,看完估计该懂的都应该懂了,不懂的联想一下也应该懂得差不多了。 用法 <container-element [ngSwitch]="switch_expression"> <some-element *ngSwitchCase="match_expression_1">...</some-element> <some-element *ngSwitchCase="match_expression_2">...</some-element> <some-other-element *ngSwitchCase="match_exp...

2017
07-18

Angular 4.x NgStyle 指令用法

基本用法 官方给出的用法就只有两种不同的形式,行内添加及或者通过一个对象添加。下面就是 NgStyle 的全部内容。 语法 <some-element [ngStyle]="{'font-style': styleExp}">...</some-element> <some-element [ngStyle]="{'max-width.px': widthExp}">...</some-element> <some-element [ngStyle]="objExp">...</some-element> 示例 套路一 行间添加...

2017
07-18

Angular 4.x NgClass 指令用法

用法 语法 <some-element [ngClass]="'first second'">...</some-element> <some-element [ngClass]="['first', 'second']">...</some-element> <some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element> <some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element> <some-elemen...

2017
07-16

Angular 4.x HTTP 示例

启动服务 ng serve --open 上面的命令行就是启动服务并运行 应用。这个命令行有几个作用:1.启动应用服务;2.监听文件变化。3.重建APP。 提供 HTTP Services HttpModule 并不是核心的 NgModule。HttpModule 是一个可选项。你可以引入这个包@angular/http。 您可以从@ angular / http导入,因为systemjs.config配置了SystemJS,以便在需要时加载该库。 注册 HTTP services 应用将依赖于Angular 的 htt...

2017
07-14

Angular 4.x 路由示例(Routing)

现在应用有了新的需求: 1、添加一个 Dashboard 页面 2、添加导航功能 3、用户不管在任意一个页面中点击都能进入详情 4、当用户点击一个深度链接可以打开指定英雄详情 当你完成了以上这些,用户就可以像下面这样进行导航(页面跳转): 为了能达到上面的这些需求你得给应用添加一个路由。 准备 请确保你的项目结构目录如下: 启动服务 ng serve --open 上面的命令行就是启动服务并运行 应用。这个命...

2017
07-08