前言 ionic是一个垮平台开发框架，可通过web技术开发出多平台的应用。但只建议开发简单应用。复杂的应用需要用到许多cordova插件，而cordova插件的更新或者移动平台的更新很可能导致插件的不可用，维护升级成本较高。安装插件 安装插件Image Picker $ ionic cordova plugin add cordova-plugin-telerik-imagepicker $ npm install @ionic-native/image-picker安装插件File Transfer $ ionic cordova plugin add cordova-plugin-fil...
ngDraggable.js是一款比较简单实用的angularJS拖拽插件，借助于封装好的一些自定义指令，能够快速的进行一些拖拽应用开发。首先先介绍一些基本的概念;?ng-drop:是否允许放入拖拽元素?ng-drop-success($data, $event):拖拽元素放入的回调;$data：放入元素数据；$event拖拽事件对象?ng-drag:元素是否允许拖拽?ng-drag-success($data, $event):$data:拖拽元素数据,$event拖拽元素事件对象?ng-drag-data:拖拽数据官方链接：https://git...
在前后端分离的开发模式中，接口数据模拟(API Mock)是不可避免的事情。前端同学在应对该情况时采取的办法可以各种各样，大概的方案可能会是这几类： 业务代码中临时写上 mock 数据的逻辑在前端引入 mock 服务或框架，对 HTTP 请求服务进行拦截代理转发至自建的 mock server本文主要介绍在 Angular-cli 中引入 simple-mock 以快速实现项目数据接口模拟功能的方法。该方案本质上为上述的第三种方案。 1 simple-mock 简介 simple-mock...
本文介绍了详解Angular5/Angular6项目如何添加热更新(HMR)功能，分享给大家，具体如下： A：什么是HMR？Q：HMR（热替换）用于在运行的应用程序中更新代码而不需要重建它。这将导致更快的更新和更少的全页重新加载。 angular6-hmr 提供angular6以上HMR(热更新)功能 步骤1、进入angular项目父级目录内 git clone https://github.com/staven630/angular6-hmrangular6-hmr目录与angular项目(例如：my-app)是同级关系 2、执行gulp hmr -...
本文实例讲述了AngularJS自定义表单验证功能。分享给大家供大家参考，具体如下： Angular实现了大部分常用的HTML5的表单控件的类型(text, number, url, email, date, radio, checkbox)，也实现了很多指令做为验证(required, pattern, minlength, maxlength, min, max)。 在自定义的指令中，我们可以添加我们的验证方法到ngModelController的$validators对象上。为了取得这个controller对象，我们需要requirengModel指令。 在$valid...
最近要实现一个多图片上传的预览功能，网上有很多例子大多不太完整，我就把他们的整合了下并且加了一些功能和界面，我们只需要调用一条指令就可以实现，但传给后台还需要额外的代码，会在后面controller里介绍。不知道封装的是否符合标准，还希望大家一起讨论下,如果有时间封装下Angular4的图片上传和预览分享给大家。 图片上传的预览，我们最主要解决的是拿到input的on-change事件，再是读取图片，读取图片我们需要用到FileReader...
Angular-UI Bootstrap提供了许多组件，从流行的的Bootstrap项目移植到Angular 指令（显著的减少了代码量）。如果你计划在Angular应用中使用Bootstrap组件，我建议细心检查。话虽如此，直接使用Bootstrap，应该也是可以工作的。 Angular controller可以共享service的代码。警报就是把service代码共享到controller的很好用例之一。 Angular-UI Bootstrap文档提供了下面的例子： view <div ng-controller="AlertDemoCtrl"><alert ng-r...
先来 看看具体效果：实现方法： 1.下载并引入 angularjs 2.HTML代码： <!DOCTYPE html> <html lang="en" ng-app="test"> <head><meta charset="UTF-8"><title>Html5 拖拽行为和AngularJs的结合</title><meta charset="utf-8"/><script type="text/javascript" src="js/angular.js"></script><style>.to-drag, .drag-stop {display: inline-block;}</style> </head> <body ng-controller="main"> <div class="to-drag"><ul><li ng-r...
本文实例讲述了angular 实现的输入框数字千分位及保留几位小数点功能。分享给大家供大家参考，具体如下： 网上查到一个关于千分位的指令，我稍微做了点完善，通用指令代码 myApp.directive(price, function($parse) {return {link: function (scope, element, attrs, ctrl) {//控制输入框只能输入数字和小数点function limit(){var limitV=element[0].value;limitV=limitV.replace(/[^0-9.]/g,"");//处理0开头的整数if ((/^0+[0-9]...
本文实例讲述了AngularJS实现标签页tab选项卡功能。分享给大家供大家参考，具体如下： 选项卡一： JavaScript+html+css <!DOCTYPE html> <html><head><meta charset="utf-8"><title>www.gxlcms.com js标签页tab切换</title><style>#div1 .active{background:blue;}#div1 div{width:200px;height:200px;background:gray;border:1px solid black;display:none;}</style><script>window.onload=function (){var oDiv=document.getElem...
本文实例讲述了AngularJS实现的base64编码与解码功能。分享给大家供大家参考，具体如下： <!DOCTYPE HTML> <html> <head><meta charset="utf-8"><title>base64加密</title><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><script>function Base64() {// private property_keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";// public method for encodingthis....
HTML5原生的表单校验属性（必填，长度限制，取值间隔，正则表达式等等）可以满足普通的校验需求，但是有些场景必须用到自定义校验，比如注册时的密码确认，有比对关系的时间/数值选择， 需要到请求到服务端取值验证等等这里以密码确认为例进行说明。 指令开发表单的验证状态是通过 formContro l的 errors 属性反馈出来的，所以基本的思路肯定就是需要添加校验规则，然后将验证结果添加到formControl实例的errors属性中。那么问题来...
前言 本文主要介绍了关于angular实现页面打印局部功能的相关内容，分享出来供大家参考，下面话不多说了，来一起看看详细的介绍吧。 场景在页面显示的时候是分页现实的，当前页面只有10条数据，但是打印需要打印完整的100条数据。 并且在当前页面包含了表格之外的标题，菜单等其他元素。 后天api请求都需要带上token信息 前台页面跳转到打印页面后再跳回1、通过缓存传递数据，2、路由跳转到打印页面，3、页面获取缓存数据，4、调用浏...
我们常常会遇到这样一个问题，当我们使用一个第三方控件库的时候，我们只用到了其中 1 个或某几个组件，会连带一大堆无用的东西，造成体积臃肿不堪。又或者首页用到的组件较多，首页加载速度缓慢，这个时候，我们或许需要加载用户可视范围内用到的组件，随着用户的浏览下拉，我们再去加载这些组件，渐进式加载,渐进式体验，这个时候你或许就用到了本工具所实现的功能。或者一个页面的某些不重要区域，比如第三方广告又或者不重要的...
最近一个同事在使用Angular的时候，希望能像VUE那样，修改代码后浏览器不刷新，页面对应修改的组件自动更新的功能。这个功能的名字时HMR (hot module replace)。稍微研究了一下，发现在angular/cli创建的项目中，实现这个不算太难，步骤如下： 1、首先创建一个src/environments/environment.hmr.ts文件，内容如下export const environment = {production: false,hmr: true };当然，对应的environment.prod.ts和environment.ts需要增...