Skip to content

Commit 6680b0c

Browse files
OOP-Code-BunnyOOP-Code-Bunny
committed
angular学习代码
1 parent e7143cc commit 6680b0c

File tree

4,388 files changed

+593205
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

4,388 files changed

+593205
-0
lines changed

‎$location/21.1 $location.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html ng-app="locationApp">
3+
<head>
4+
<title>21.1 $location</title>
5+
<meta charset="utf-8">
6+
<script src="angular.min.js"></script>
7+
<script src="script.js"></script>
8+
9+
<style type="text/css">
10+
*{
11+
font-family:'MICROSOFT YAHEI';
12+
font-size:12px
13+
}
14+
body{
15+
padding:40px
16+
}
17+
span {
18+
color:#589FCE
19+
}
20+
</style>
21+
</head>
22+
<body ng-controller="locationCtrl">
23+
<p>完整url路径: <span>{{absurl}}</span></p>
24+
25+
<p>url路径(当前url#后面的内容,包括参数和哈希值): <span>{{url}}</span>
26+
<button ng-click="changeUrl()">改变</button>
27+
</p>
28+
29+
<p>相对路径(也就是当前url#后面的内容,不包括参数): <span>{{path}}</span>
30+
<button ng-click="changePath()">改变</button>
31+
</p>
32+
33+
<p>协议(比如http,https): <span>{{protocol}}</span></p>
34+
35+
<p>主机名: <span>{{host}}</span></p>
36+
37+
<p>端口号: <span>{{port}}</span></p>
38+
39+
<p>哈希值: <span>{{hash}}</span>
40+
<button ng-click="changeHash()">改变</button>
41+
</p>
42+
43+
<p>search值序列化json:
44+
<span>{{search}}</span>
45+
<button ng-click="changeSearch_1()">改变1</button>
46+
<button ng-click="changeSearch_2()">改变2</button>
47+
<button ng-click="changeSearch_3()">改变3</button>
48+
<button ng-click="changeSearch_4()">改变4</button>
49+
<button ng-click="changeSearch_5()">改变5</button>
50+
<button ng-click="changeSearch_6()">改变6</button>
51+
</p>
52+
</body>
53+
</html>
54+
55+
56+
57+
58+
59+

‎$location/angular.min.js‎

Lines changed: 213 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎$location/script.js‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
/*21.1 $location*/
2+
var locationApp = angular.module('locationApp',[]);
3+
locationApp.controller('locationCtrl',function($scope,$location,$timeout,$rootScope){
4+
$scope.absurl = $location.absUrl();
5+
$scope.url = $location.url();
6+
$scope.path = $location.path();
7+
$scope.protocol = $location.protocol();
8+
$scope.host = $location.host();
9+
$scope.port = $location.port();
10+
$scope.hash = $location.hash();
11+
$scope.search = $location.search();
12+
13+
$scope.refresh = function(){
14+
$scope.absurl = $location.absUrl();
15+
$scope.url = $location.url();
16+
$scope.path = $location.path();
17+
$scope.hash = $location.hash();
18+
$scope.search = $location.search();
19+
};
20+
21+
//重写url部分,相应的absurl,url,path,hash,search都会改变
22+
$scope.changeUrl = function(){
23+
$location.url('/foo2?name=bunny2&age=12#myhash2');
24+
};
25+
26+
//重写path部分,相应的absurl,url,path都会改变
27+
$scope.changePath = function(){
28+
$location.path('/foo2/foo3');
29+
};
30+
31+
//重写hash部分,相应的absurl,url,hash都会改变
32+
$scope.changeHash = function(){
33+
$location.hash('myhash3');
34+
};
35+
36+
//修改search部分(方法1),相应的absurl,url,search,hash都会改变
37+
//指定两个参数,第一个参数是属性名,第二个参数是属性值.
38+
//如果属性名是已有属性,则修改,如果属性名不是已有的,则新增.
39+
//属性值也可以是一个数组,参考方法6
40+
$scope.changeSearch_1 = function(){
41+
$location.search('name','code_bunny');
42+
};
43+
44+
//修改search部分(方法2),相应的absurl,url,search,hash都会改变
45+
//指定两个参数,第二个参数是null:删除第一个参数所指定的属性名.不再有这个属性
46+
//若第一个参数不是已有的,则不发生任何改变
47+
$scope.changeSearch_2 = function(){
48+
$location.search('age',null);
49+
};
50+
51+
//修改search部分(方法3),相应的absurl,url,search,hash都会改变
52+
//指定一个参数,json对象,直接重写整个search部分.不管是不是已有属性,全部重写.
53+
//这里属性的值可以是一个数组,参考方法5
54+
$scope.changeSearch_3 = function(){
55+
$location.search({name:'papamibunny',age:16,love:'zxg'});
56+
};
57+
58+
//修改search部分(方法4),相应的absurl,url,search,hash都会改变
59+
//指定一个参数,字符串,整个search部分就变为这个字符串.注意是没有属性值的.
60+
$scope.changeSearch_4 = function(){
61+
$location.search('bunnybaobao');
62+
};
63+
64+
//修改search部分(方法5),相应的absurl,url,search,hash都会改变
65+
//其余和方法3一样.全部重写search:
66+
//指定一个参数,json格式,属性值是一个数组,那么最后的search会变成name=code_bunny&name=white_bunny&name=hua_bunny
67+
$scope.changeSearch_5 = function(){
68+
$location.search({name:['code_bunny','white_bunny','hua_bunny']});
69+
};
70+
71+
//修改search部分(方法6),相应的absurl,url,search,hash都会改变
72+
//其余和方法1一样,修改指定的属性名(或新增)
73+
//第二个参数是一个数组,最后search中的love部分会变成love=zxg&love=mitu
74+
//它和方法5的区别,就像方法1和方法3的区别,一个是修改或新增某个属性值,一个是重置整个search
75+
$scope.changeSearch_6 = function(){
76+
$location.search('love',['zxg','mitu']).replace();
77+
};
78+
79+
//使用$location.replace(),则这一次的修改路径不会被记录到历史记录中,点击后退,不会后退到改变前的路径,而是后退到改变前的路径的改变前的路径
80+
81+
$rootScope.$on('$locationChangeStart',function(){
82+
console.log('开始改变$location')
83+
});
84+
$rootScope.$on('$locationChangeSuccess',function(){
85+
$scope.refresh();
86+
console.log('结束改变$location')
87+
});
88+
//这里就算绑定了$routeChangeStart和$routeChangeSuccess,也不会被触发,因为这里没有$route相关的服务.
89+
});
90+
//注意这里$scope下的这些值是不会实时更新的.举栗url,$location.url()是个方法,获取当前的url,而不是一个值,
91+
//所以,当url发生改变以后,不再次调用$location.url(),url值是不可能被实时更新的.

0 commit comments

Comments
 (0)