编程 Javascript

Angular实现下载安装包的功能代码分享

Posted in Javascript onSeptember 05, 2017

废话不多说了，直接给大家贴代码了，具体代码如下所示：

<!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实现下载安装包的功能代码分享，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

Angular实现下载安装包的功能代码分享

- Author -

艾斯德斯的博客

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery 学习6 操纵元素显示效果的函数

Feb 07 Javascript

给html超链接设置事件不使用href来完成跳

Apr 20 Javascript

高性能JavaScript模板引擎实现原理详解

Feb 05 Javascript

JS实现选择TextArea内文本的方法

Aug 03 Javascript

JS+CSS实现的经典圆角下拉菜单效果代码

Oct 21 Javascript

纯js仿淘宝京东商品放大镜功能

Mar 02 Javascript

基于javaScript的this指向总结

Jul 22 Javascript

vue获取当前激活路由的方法

Mar 17 Javascript

常用的 JS 排序算法整理版

Apr 05 Javascript

Vue2.x通用编辑组件的封装及应用详解

May 28 Javascript

js构造函数constructor和原型prototype原理与用法实例分析

Mar 02 Javascript

js实现无刷新监听URL的变化示例代码详解

Jun 03 Javascript

简单谈谈关于Angular Cli打包的事

Sep 05 #Javascript

Vue学习笔记之表单输入控件绑定

Sep 05 #Javascript

zTree异步加载展开第一级节点的实现方法

Sep 05 #Javascript

纯js实现画一棵树的示例

Sep 05 #Javascript

javascript基础进阶_深入剖析执行环境及作用域链

Sep 05 #Javascript

基于ES6 Array.of的用法(实例讲解)

Sep 05 #Javascript

对于Javascript 执行上下文的全面了解

Sep 05 #Javascript