Angular實現(xiàn)下載安裝包的功能代碼分享
更新時間：2017年09月05日 09:19:45 作者：艾斯德斯的博客
本文通過實例代碼給大家介紹了angular實現(xiàn)下載安裝包的功能以及基于angularjs代碼實現(xiàn)錨點跳轉(zhuǎn)的功能，需要的朋友參考下吧
廢話不多說了，直接給大家貼代碼了，具體代碼如下所示：
<!DOCTYPE html>
<html ng-app="myPro">
<head>
<meta charset="UTF-8">
<title>angular-實現(xiàn)下載安裝包的功能</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：下面在給大家分享一段代碼關(guān)于angularJS實現(xiàn)錨點跳轉(zhuǎn)實例
<!DOCTYPE html>
<html ng-app = "myPro">
<head>
<meta charset="UTF-8">
<title>angularJS_實現(xiàn)錨點跳轉(zhuǎn)實例</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>
總結(jié)
以上所述是小編給大家介紹的Angular實現(xiàn)下載安裝包的功能代碼分享，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
AngularJS中如何使用$parse或$eval在運行時對Scope變量賦值
這篇文章主要介紹了AngularJS中如何使用$parse或$eval在運行時對Scope變量賦值的相關(guān)資料,本文介紹的非常詳細，具有參考借鑒價值，需要的朋友可以參考下2016-01-01
本篇文章主要介紹了詳解Angular2 之 結(jié)構(gòu)型指令，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
BootStrap+Angularjs+NgDialog實現(xiàn)模式對話框
在完成一個后臺管理系統(tǒng)時，需要用表格顯示注冊用戶的信息。但是用戶地址太長了，不好顯示。所以想做一個模式對話框，點擊詳細地址按鈕時，彈出對話框，顯示地址。下面小編給大家分享下實現(xiàn)方法，一起看下吧2016-08-08
AngularJS通過$location獲取及改變當前頁面的URL
本篇將介紹AngularJS中的$location服務(wù)的基本用法,$location服務(wù)的主要作用是用于獲取當前url以及改變當前的url,并且存入歷史記錄。本文通過示例代碼介紹的很詳細，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-09-09
AngularJS與BootStrap模仿百度分頁的示例代碼
分頁在很多時候都能用到，這篇文章主要介紹了AngularJS與BootStrap模仿百度分頁的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
Angular中的ActivatedRoute和Router原理解釋
這篇文章主要為大家介紹了Angular中的ActivatedRoute和Router原理解釋，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
這篇文章主要介紹了Angularjs 與 bower安裝和使用詳解的相關(guān)資料,需要的朋友可以參考下2017-05-05
掌握Queries設(shè)計模式優(yōu)化Angular應用開發(fā)技巧
這篇文章主要介紹了掌握Queries設(shè)計模式優(yōu)化Angular應用開發(fā)的技巧示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-10-10
這篇文章主要介紹了深入淺析AngularJS和DataModel 的相關(guān)資料,需要的朋友可以參考下2016-02-02
這篇文章主要給大家介紹了關(guān)于Angular4學習教程之DOM屬性綁定的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2018-01-01