AngularJs服务-$location(暴露当前地址栏的URL)

<!DOCTYPE html>  
<html lang="en" ng-app="App">  
    <head>  
        <meta charset="UTF-8">  
        <title>$location服务</title>  
    </head>  
<!--  
    服务:服务是一个对象或函数,对外提供特定的功能.  
    内建服务:  
        1: $location是对原生Javascript中location对象属性和方法的封装。  
        2: $timeout&$interval对原生Javascript中的setTimeout和setInterval进行了封装。  
        3: $filter在控制器中格式化数据。  
        4: $log打印调试信息  
        5: $http用于向服务端发起异步请求。  
        6: 同时还支持多种快捷方式如$http.get()、$http.post()、$http.jsonp。  
-->  
    <body>  
        <dl ng-controller="DemoController">  
            <dt>{{title}}</dt>  
            <dd>absUrl: {{absUrl}}</dd>  
            <dd>url: {{url}}</dd>  
            <dd>host: {{host}}</dd>  
            <dd>search: {{search}}</dd>  
            <dd>hash: {{hash}}</dd>  
            <dd>protocol: {{protocol}}</dd>  
            <dd>port: {{port}}</dd>  
        </dl>  
          
    <script src="../libs/angular.min.js"></script>  
    <script>  
        var App = angular.module('App', []);  
  
        // $location内置服务是angularJS提前封装好的  
        // AngularJS 专门提供了一个帮你获URL地址一个服务  
        App.controller('DemoController', ['$scope', '$location', function($scope, $location) {  
              
            $scope.title = '学习$location服务';  
  
            $scope.absUrl = $location.absUrl();  
  
            $scope.url = $location.url();  
  
            $scope.host = $location.host();  
  
            $scope.search = $location.search();  
  
            $scope.hash = $location.hash();  
  
            $scope.protocol = $location.protocol();  
  
            $scope.port = $location.port();  
  
        }]);  
          
        for(var key in location) {  
            console.log(key + '=>' + location[key]);  
        }  
    </script>   
    </body>  
</html>  

$location服务解析地址栏中的URL(基于window.location),让你在应用代码中能获取到。改变地址栏中的URL会反应$location服务中,反之亦然。

$location服务:

  • 暴露当前地址栏的URL,这样你就能
    • 获取并监听URL。
    • 改变URL。
  • 当出现以下情况时同步URL
    • 改变地址栏
    • 点击了后退按钮(或者点击了历史链接)
    • 点击了一个链接
  • 一系列方法来获取URL对象的具体内容用(protocol, host, port, path, search, hash).formatDate

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值