Angular实现下载安装包的功能代码分享
废话不多说了，直接给大家贴代码了，具体代码如下所示：
<!DOCTYPE html>
<html ng-app="myPro">
<head>
<meta charset="UTF-8">
<title>angular-实现下载安装包的功能</title>
<script src="js/angular.min.js"></script>
<script src="js/jquery-1.11.0.js"></script>
<style>
*{padding: 0;margin: 0;}
ol,ul{list-style: none;}
a{display:block;margin: 200px 0 0 500px;}
</style>
</head>
<body ng-controller="myProController">
<a href="{{onLoadPcUrl}}" rel="external nofollow" >下载安装包</a>
</body>
<script>
var pro = angular.module("myPro",[]);
pro.controller("myProController",["$scope","$rootScope","$location",function($scope,$rootScope,$location){
console.log($location.absUrl().split("angularJS")[0]);
$scope.onLoadPcUrl = $location.absUrl().split("angularJS")[0]+'angularJS/test/test.zip';
}]);
</script>
</html>
PS：下面在给大家分享一段代码关于angularJS实现锚点跳转实例
<!DOCTYPE html>
<html ng-app = "myPro">
<head>
<meta charset="UTF-8">
<title>angularJS_实现锚点跳转实例</title>
<script src="js/angular.min.js"></script>
<script src="js/jquery-1.11.0.js"></script>
<style>
*{padding: 0;margin: 0;}
ul,ol{list-style: none;}
body{background-color: #414246;}
::-webkit-scrollbar{width: 7px;height: 4px;}
::-webkit-scrollbar-track{border-radius:0 ;-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: rgba(0,0,0,0.1);}
::-webkit-scrollbar-thumb{border-radius: 10px;-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: rgba(0,0,0,0.2);}
.box{width: 800px;height: 500px;border: 1px solid #000000;margin: 100px auto;background-color: #373a3f;color: #a1a6a7;font-size: 12px;}
.box .box-header{width: 790px;height:40px;border: 1px solid #000000;padding: 10px 0 0 10px;font-size: 14px;}
.box .box-header ul li{float: left;margin: 0 8px;line-height: 40px;font-size: 16px;cursor: pointer;}
.box .box-header ul li.on{color: #0088cc;text-shadow: 0 0 6px #808080;cursor: pointer;}
.box .box-main{width: 790px;height: 440px;padding: 10px 0 0 10px;overflow-y:auto;}
.box .box-main ul .first_li{width:100%;height: 100px;}
.box .box-main ul .first_li .initials{width:100%;height: 20px;line-height: 20px;background-color: #3f4045;}
.box .box-main ul .first_li .position{width:100%;}
.box .box-main ul .first_li .position ul li{width:50px;height: 20px;line-height: 20px; float: left;text-align: center;margin: 20px;}
</style>
</head>
<body ng-controller = "myProController">
<div class="box">
<div class="box-header">
<ul choice-channel-jump>
<li ng-class="{'on':charArray.other}">#</li>
<li ng-class="{'on':charArray.A}">A</li>
<li ng-class="{'on':charArray.B}">B</li>
<li ng-class="{'on':charArray.C}">C</li>
<li ng-class="{'on':charArray.D}">D</li>
<li ng-class="{'on':charArray.E}">E</li>
<li ng-class="{'on':charArray.F}">F</li>
<li ng-class="{'on':charArray.G}">G</li>
<li ng-class="{'on':charArray.H}">H</li>
<li ng-class="{'on':charArray.I}">I</li>
<li ng-class="{'on':charArray.J}">J</li>
<li ng-class="{'on':charArray.K}">K</li>
<li ng-class="{'on':charArray.L}">L</li>
<li ng-class="{'on':charArray.M}">M</li>
<li ng-class="{'on':charArray.N}">N</li>
<li ng-class="{'on':charArray.O}">O</li>
<li ng-class="{'on':charArray.P}">P</li>
<li ng-class="{'on':charArray.Q}">Q</li>
<li ng-class="{'on':charArray.R}">R</li>
<li ng-class="{'on':charArray.S}">S</li>
<li ng-class="{'on':charArray.T}">T</li>
<li ng-class="{'on':charArray.U}">U</li>
<li ng-class="{'on':charArray.V}">V</li>
<li ng-class="{'on':charArray.W}">W</li>
<li ng-class="{'on':charArray.X}">X</li>
<li ng-class="{'on':charArray.Y}">Y</li>
<li ng-class="{'on':charArray.Z}">Z</li>
</ul>
</div>
<div class="box-main">
<ul>
<li class="first_li" ng-repeat="data in positionDatas" id="{{data.letter=='#'?'other':data.letter}}">
<p class="initials">{{data.letter}}</p>
<div class="position">
<ul>
<li ng-repeat = "d in data.title track by $index">
<p>{{d.name}}</p>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</body>
<script>
var pro = angular.module("myPro",[]);
pro.controller("myProController",["$scope",function($scope){
var data = [
{"letter":"#","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
{"letter":"A","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
{"letter":"B","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
{"letter":"C","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
{"letter":"D","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
{"letter":"E","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
{"letter":"F","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
{"letter":"G","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
{"letter":"H","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
{"letter":"I","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
{"letter":"J","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
{"letter":"K","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
{"letter":"L","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
{"letter":"M","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
{"letter":"N","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
{"letter":"O","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
{"letter":"P","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
{"letter":"Q","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
{"letter":"R","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
{"letter":"S","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
{"letter":"T","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
{"letter":"U","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
{"letter":"V","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
{"letter":"W","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
{"letter":"X","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
{"letter":"Y","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
{"letter":"Z","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]}
];
$scope.positionDatas = data;
$scope.charArray = {
A:false,
B:false,
C:false,
D:false,
E:false,
F:false,
G:false,
H:false,
I:false,
J:false,
K:false,
L:false,
M:false,
N:false,
O:false,
P:false,
Q:false,
R:false,
S:false,
T:false,
U:false,
V:false,
W:false,
X:false,
Y:false,
Z:false,
other:false
};
angular.forEach($scope.positionDatas,function(i){
if(i.letter=="#"){
$scope.charArray.other = true;
}else{
$scope.charArray[i.letter] = true;
};
})
}]);
pro.directive("choiceChannelJump",[function(){
return{
restrict:"A",
link:function(scope,element,attr){
var parent = $(".box-main");
var obj = $(element);
obj.find("li").click(function(){
var _this = $(this);
var text = _this.text();
console.log(text);
if(text=="#"){
text = "other";
};
if(_this.hasClass('on')){
parent.animate({scrollTop:$('#'+text).offset().top-parent.offset().top+parent.scrollTop()+'px'})
}
});
}
}
}]);
</script>
</html>
总结
以上所述是小编给大家介绍的Angular实现下载安装包的功能代码分享，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
本文实例讲述了AngularJS实现与Java Web服务器交互操作的方法.分享给大家供大家参考,具体如下: AngularJS是Google工程师研发的产品,它的强大之处不是几句话就能描述的,只有真正使用过的人才能体会到,笔者准备在这篇文章中,以一个简单的登录校验的例子说明如何使用AngularJs和Web服务器进行交互. 准备工作 1.下载angular js库. 官网下载地址:https://angularjs.org/ 或者点击此处本站下载. 2.开发环境准备,由于是和Tomcat服务器
-
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
本文实例讲述了AngularJS与服务器Ajax交互操作.分享给大家供大家参考,具体如下: AngularJS从Web服务器请求资源都是通过Ajax来完成,所有的操作封装在$http服务中,$http服务是只能接收一个参数的函数,这个参数是一个对象,用来完成HTTP请求的一些配置,函数返回一个对象,具有success和error两个方法. 用法如下: $http({method:'post',url:'loginAction.do' }).success(function(data,status
-
AngularJS路由实现页面跳转实例
AngularJS是一个javascript框架,通过AngularJS这个类库可以实现目前比较流行的单页面应用,AngularJS还具有双向数据绑定的特点,更加适应页面动态内容. 所谓单页面应用就是在同一个页面动态加载不同的内容,而这里的"跳转"可以理解为是局部页面的跳转. AngularJS是通过改变location地址来实现加载不同的页面内容到指定位置,下面是一个简单应用AngularJS路由来实现页面"跳转"的实例: 使用app.config来定义不同的lo
-
AngularJS 所有版本下载地址
AngularJS官网本身采用AngularJS库构建,页面中的AngularJS库通过Google的CDN(内容分发网络)引入,所以国内访问会有问题. 大家可以从下面地址获取AngularJS所以版本: https://code.angularjs.org/ 各种版本应有尽有,上图为证: 补充说明:每个目录下有对应版本的压缩包,下载压缩包即可 更简单的方法:通过Npm包管理工具,或者Bower获取,请自行研究. 以上就是AngularJS 版本下载的资料,后续继续补充相关资料,谢谢大家对本站的
-
angularjs项目的页面跳转如何实现（5种方法）
Angular页面传参有多种办法,根据不同用例,我举5种最常见的: PS: 在实际项目中,请参照https://github.com/johnpapa/angular-styleguide优化您的代码. 1. 基于ui-router的页面跳转传参 (1) 在AngularJS的app.js中用ui-router定义路由,比如现在有两个页面,一个页面(producers.html)放置了多个producers,点击其中一个目标,页面跳转到对应的producer页,同时将producerId这个参数
-
AngularJS利用Controller完成URL跳转
具体写法举例: 1.js定义一个controller function MyCtrl($scope, $location) { $scope.jumpToUrl = function(path) { //TODO:add code here }; } 2.html里面应用controller <div ng-controller='MyCtrl'> <button ng-click="jumpToUrl('/signin')">signin</button
-
Angular实现下载安装包的功能代码分享
废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html ng-app="myPro"> <head> <meta charset="UTF-8"> <title>angular-实现下载安装包的功能</title> <script src="js/angular.min.js"></script> <sc
-
R语言修改下载安装包install.package的默认存储路径的操作方法
这次遇到的问题是:R语言下载安装包时会先将下载下来的二进制zip文件保存在本地,然后将其解压安装到R的library文件夹下.包被下载后会默认将二进制zip文件保存在本地C盘的临时会话的downloaded_packages目录下,不希望保存在该目录下,想手动修改保存路径. 查找了一下方法,发现很多都让用.libPaths()或者lib参数来修改.这里说明一下.libPaths和lib参数的作用. libPaths {base} 文档中给出的说明大致意思就是这是一个获取或者设定R存放已经安装的包
-
iOS高仿微信表情输入功能代码分享
最近项目需求,要实现一个类似微信的的表情输入,于是把微信的表情扒拉出来,实现了一把.可以从这里下载源码.看起来表情输入没有多少东西,不外乎就是用NSTextAttachment来实现图文混排,结果在实现的过程中遇到了很多小问题,接下来会一一介绍遇到过的坑.先上一张效果图: 一.实现表情选择View(WKExpressionView) 具体的实现就不细说了,主要功能就是点击表情时,将对应表情的图片名称通知给delegate. 二.实现表情textView(WKExpressionTextView)
-
Struts2实现文件下载功能代码分享(文件名中文转码)
struts2文件下载功能实现代码如下所示: Action文件 public class DownLoadAction extends ActionSupport { /** * */ private static final long serialVersionUID = 5879762231742395104L; private String fileName;//用户请求的文件名 private String inputPath;//下载资源的路径(在struts配置文件中设置) publ
-
基于JS组件实现拖动滑块验证功能(代码分享)
拖动滑块验证功能在支付宝,微信各大平台都能见到这样的功能,那么基于js组件是如何实现此功能的呢?今天小编就给大家分享下js 拖动滑块 验证功能的实现代码,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Cache-Control" content="no-cache, no-store, m
-
Android中实现下载和解压zip文件功能代码分享
本文提供了2段Android代码,实现了从Android客户端下载ZIP文件并且实现ZIP文件的解压功能,非常实用,有需要的Android开发者可以尝试一下. 下载: DownLoaderTask.java 复制代码 代码如下: package com.johnny.testzipanddownload; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.File; im
-
手机开发必备技巧：javascript及CSS功能代码分享
1. viewport: 也就是可视区域.对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏.状态栏.滚动条等等之后用于看网页的区域, 这是真正有效的区域.由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport; 实际上我们可以操作的属性有4 个: 复制代码 代码如下: width - // viewport 的宽度 (范围从200 到10,000,默认为980 像素) height - // viewpor
-
java简单实现复制 粘贴 剪切功能代码分享
废话不多说,直接上代码,小伙伴们仔细看下注释吧. 复制代码 代码如下: /*简单的复制 剪切 粘贴 功能 操作: 复制测试: 输入文本选择文本,点击复制,然后将光标放在右边的TextArea,点击粘贴 剪切测试:输入文本选择文本,然后将光标放在右边的TextArea,点击剪切 */ import javax.swing.*; import java.awt.*; import java.awt.datatransfer.*; import java.awt.event.*; p
-
c#打印预览控件中实现用鼠标移动页面功能代码分享
该功能本来可以通过拉动水平和垂直滚动条来实现,但实际使用中,用户更趋向于直接用鼠标拖动页面来实现,很多看图类软件都有这种类似的功能.而.net的打印预览控件却很遗憾的没有提供这一功能,只来自己想办法来实现啦. 我的办法就是用代码来控制打印预览控件中的水平来垂直滚动条的位置,间接实现和用鼠标直接拖动滚动条一样的效果. 在实现这一功能的过程中,最大的困难是打印预览控件并没有让程序员直接调用的关于滚动条的方法或属性.所以只好向WinAPI求助了. 以下API函数和常量就是实现上述功能的关键了: 复制代
-
Python实现的下载8000首儿歌的代码分享
下载8000首儿歌的python的代码: 复制代码 代码如下: #-*- coding: UTF-8 -*- from pyquery import PyQuery as py from lxml import etree import urllib import re import os import sys import logging def format(filename): tuple=(' ',''','\'') for char in tuple: