前言 开始本文之前，大家应该首先了解，协议、主机名和端口号相同叫同源。同源策略允许页面从同一个站点加载和执行特定的脚本。站外其他来源的脚本同页面的交互则被严格限制。 要解决这个问题就需要跨域，本文介绍解决angular中的跨域的三种方式： 一、JSONPJSONP的原理是通过 <script> 标签发起一个GET请求来取代XHR请求。JSONP生成一个<script> 标签并插到DOM中，然后浏览器会接管并向 src 属性所指向的地址发送请求。当服务器返...
前言 本文主要给大家介绍了关于Angular.js文件上传控件ng-file-upload结合springMVC使用的相关内容，对于Angular.js文件上传控件ng-file-upload不熟悉的朋友们可以先看看这篇文章（传送门），下面话不多说，来看看详细的使用介绍： 引入angular和ng-file-upload。 前端代码 Upload.upload({url: upload,fields: {username: zouroto}, // additional data to sendfile: file}).progress(function (evt) {var progressPercentage = p...
前言 最近因为项目的需要，经常有一些对input输入进行格式化的需求，以前做的时候在js中写指令进行处理，但是这样又要在js或者在java代码中将请求的数据进行还原，很是麻烦，于是在网上看到了jquery的inputmask组件，觉得很好用，在项目中写出指令，用起来很方便。 方法如下： 在项目中引入jquery和jquery-inputmask，然后在项目中写指令，如下： define([./module], function (directives) {use strict;directives.directive(inpu...
前戏 面向模型编程；测试驱动开发；先保障交互逻辑，再调整细节。---by 雪狼。为什么要自动化测试？ 1，提高产出质量。 2，减少重构时的痛。反正我最近重构多了，痛苦经历多了。 3，便于新人接手。 angular自动化测试主要分：端到端测试和单元测试，很明显两者都要熟练掌握。 端到端测试是从用户的角度出发，认为整个系统是个黑盒，只会有UI暴露给用户，主要是模仿人工操作测试。 单元测试认为整个系统是白盒，可以...
前言 $http service在Angular中用于简化与后台的交互过程，其本质上使用XMLHttpRequest或JSONP进行与后台的数据交互。在与后台的交互过程中，可能会对每条请求发送到Server之前进行预处理（如加入token），或者是在Server返回数据到达客户端还未被处理之前进行预处理（如将非JSON格式数据进行转换）；当然还有可能对在请求和响应过程过发生的问题进行捕获处理。所有这些需求在开发中都非常常见，所以Angular为我们提供了$http拦截器...
前言 之前的开发选择的是完全舍弃服务端，仅保留最简单web服务器提供angular经打包的静态资源，此外所有的业务与数据请求都访问一个分离的WebApi来实现。不过最近碰到一个需求，有必要使用多个客户端，而各客户端本身都是webpack打包出来的js而已，没必要每个客户端都自己建一个站点，这就有必要搭建一个服务端，根据参数动态渲染不同客户端的脚本来服务多个客户端了。主要需要解决两个问题，一是防止前后端路由冲突各自有效工作，...
前言 本文主要给大家介绍的是关于Angular.JS中select下拉框设置value的相关内容，非常出来供大家参考学习，下面来一起看看详细的介绍： 最近在系统中增加一个查询的筛选条件，通过下拉框选取，用的是Angular常见的ng-options 指令： <select id="selectDetectUnit" class="form-control" ng-model="detectUnits" ng-options="detectUnit.name for detectUnit in detectQueryFilters.detectUnits"> <option value="">全部</option> ...
前言 ng-if指令可以根据表达式的值true/false在DOM中真正生成或真正移除一个元素。如果赋值给ng-if的表达式的值是false，那对应的元素将会从DOM中移除，否则对应元素的一个克隆将被重新插入DOM中。 ng-if同ng-show和ng-hide指令最本质的区别是，它不是通过CSS显示或隐藏DOM节点，而是真正生成或移除节点。 当一个元素被ng-if从DOM中移除，同它关联的作用域也会被销毁。而且当它重新加入DOM中时，会通过原型继承从它的父作用域生成一...
前言 大家都知道angualrjs处于安全的考虑，插值 指令会对相应字符串进行过滤，避免出现html攻击。但是在一些时候，我们需要渲染html，比如实现一个分级的下拉框 代码如下： <body ng-app="app" ng-controller="controller"> <select ng-model="value" ng-options="t.text for t in testList"></select> <script src="/bootstrap/bootstrap/dist/angular-bootstrap/angular.js"></script> <script type="text/javascript">var app= ...
前言 之前跟大家分享了关于 Android 原生实现验证码倒计时，地址是这里，现在公司使用 Ionic 开发的 App 也要实现类似的功能，现在也记录下来，供大家参考： 效果图：正文 首先介绍下与本文相关的概念 $interval $interval 是 window.setInterval 的 Angular 包装形式，函数如果在没有被取消的时候会无限执行。（取消使用 cancel(promise) ） 用法： $interval(fn,delay,[count],[invokeApply],[Pass]);参数说明： fn : 无限执行的...
前言 AngularJS中scope之间的继承关系使用JavaScript的原型继承方式实现。本文结合AngularJS Scope的实现以及相关资料谈谈原型继承机制。下面来看看详细的介绍： 基本原理在JavaScript中，每创建一个构造函数（constructor），就会同时给该函数生成一个指向原型对象的属性prototype。每个原型对象又获得一个constructor属性指向相应的构造函数，原型对象的其他属性和方法从Object继承而来。每个通过构造函数创建的实例，都包含一个...
前言 在编写一些大型工程的时候，会经常遇到一些公用提示，使用框架自带很多时候不方便，于是我手写了一个，下面来看看详细的介绍： 效果图如下方法如下 一、先在angular中注册一个模块二、注册一个模块 注入依赖三、返回不同的方法应对不同情况 四、获取模板路径 五、编写模板内容 和普通的页面一样调用使用angular服务六、 1. 开启http服务获取模板内容 2. 重点注意 $template = $compile(template)(scope); 这句代码...
前言 有时候需要根据URL来渲染不同组件，我所指的是在同一个URL地址中根据参数的变化显示不同的组件；这是利用Angular动态加载组件完成的，同时也会设法让这部分动态组件也支持AOT。 动态加载组件 下面以一个Step组件为示例，完成一个3个步骤的示例展示，并且可以通过URL userstep=step-one 的变化显示第N个步骤的内容。 1、resolveComponentFactory 首先，还是需要先创建动态加载组件模块。 import { Component, Input, ViewConta...
前言 在开始本文之前，首先要说明我们使用的angular的版本是1.5.0，因为不同版本的表现结果不是那么相同。 首先我们应该了解到，在angular指令的选项中，有一项是transclude，这个选项有三种值：false，true，object；那这三种值分别表示什么，该如何选择？ 下面我们来详细的说明一下。 transclude字面意思就是嵌入，也就是说你需不需要将你的指令内部的元素（注意不是指令的模板）嵌入到你的模板中去，默认是false。如果你需要这种...
Angular指令 定义一个指令的方法非常简单，只需要调用`directive`方法即可: var app=angular.module(myapp,[]);app.directive(name,fn)1. 基础指令var app=angular.module(myapp,[]);app.run(function($templateCache){$templateCache.put(cache,<h3>模板内容来源于缓存</h3>)});app.directive(tsHello,function(){return{restrict:EAC,template:<h3>Hello,directive</h3>}})app.directive(tsTplfile,function(){return{restrict:E...