Angular之$location

1. 初识$location

1.1 调用$location对象的只读方法

  在$location对象中，只读方法包含下面几个：

1. absUrl:用于返回URL地址中编码后的完整内容，其中包含了hash片段、端口号和请求协议名称等。
2. protocol:用于返回URL地址中请求的协议名称，包括常见的http或https等。
3. host:用于返回URL地址中请求的主机名称，例如，URL地址为http://www.google.hk/，那么主机名就是www.google.hk。
4. port:用于返回URL地址中请求的端口号，在通常情况下，默认端口号为’80’。

基本调用代码如下：

    app.controller('myController',['$scope','$location',function($scope,$location{...})])

1.2 调用$location对象的读写方法

  该类方法在调用时有一个非常明显的特征，那就是在调用方法时如果不带参数，则返回方法获取的内容，如果带参数，则重置方法对于的内容，并且重置后都返回一个相同的$location对象，以实现后续的链式写法：$location.path('value').search({key:value})

  在$location对象中，读写方法包含下面几个：

1. url:不带参数，返回URL地址栏中#后的内容，如果带参数，则修改URL地址栏中#后的内容，并且返回一个$location对象。
2. hash:不带参数，返回URL地址栏中hash片段，如果带参数，则修改URL地址栏中hash片段，并且返回一个$location对象。
3. search:不带参数，返回URL地址栏中查询字符串内容(?后面的内容)，如果带参数，则修改URL地址栏中查询字符串内容，并且返回一个$location对象。
4. path:不带参数，返回页面当前路径，如果带参数，则修改页面当前路径，并且返回一个$location对象。

  基本调用代码如下：

    app.controller('myController',['$scope','$location',function($scope,$location{...})])

2. $location对象的事件

2.1 $locationChangeStart

  在地址栏URL发生变化之前，会触发$locationChangeStart事件，该事件可以调用peventDefault()方法阻止，在这个事件中，$location服务将开始加载URL变化时所需的依赖，该事件在触发时带有3个参数：

1. evt:表示触发时原始的事件对象
2. current:表示当前的URL地址
3. previous:表示上一级的URL地址，如果首次加载，则为undefined

    <div ng-controller='myController'>        <div>当前URL：{{current}}</div>        <div>上页URL：{{previous}}</div>        <div>原始事件对象：{{evt}}</div>    <script type="text/javascript">        var app=angular.module('myapp',[]);        app.controller('myController',['$rootScope','$window','$location','$scope',            function($rootScope,$window,$location,$scope){            $rootScope.$on('$locationChangeStart',function(evt,current,previous){                $scope.current=current;                $scope.previous=previous;                $scope.evt=evt;            })        }])    </script>

  以上代码中，调用了$rootScope，其实也可以使用控制器中注入的$scope对象，两者的区别在于,$rootScope面对的是页面中所有控制器，通过$rootScope绑定的时间，在所有控制器中都会触发生效，而$scope只是针对某一个控制器。

2.2 $locationChangeSuccess

  在地址栏URL发生变化之前，会触发$locationChangeSuccess事件，该事件只会在$locationChangeStart触发后才会触发，同样包含了evt current previous3个参数。

    <div ng-controller='myController'>        <div>当前状态1：{{tip_a}}</div>        <div>当前URL：{{current}}</div>        <hr>        <div>当前状态2：{{tip_b}}</div>        <div>上页URL：{{previous}}</div>    </div>    <script type="text/javascript">        var app=angular.module('myapp',[]);        app.controller('myController',['$rootScope','$window','$location','$scope',            function($rootScope,$window,$location,$scope){            $rootScope.$on('$locationChangeStart',function(evt,current,previous){                $scope.tip_a='URL地址即将发生变化！';                var yn=$window.confirm('确定真的离开吗？');                if(yn){                    $location.path('/change');                    return;                }                evt.preventDefault();                $scope.tip_b='用户取消了Url的改变！';                $scope.current=current;                $scope.previous=previous;                return;            });            $rootScope.$on('$locationChangeSuccess',function(evt,current,previous){                $scope.tip_b='Url地址改变操作完成！';                $scope.current=current;                $scope.previous=previous;            })        }]);    </script>

3. 路由模式和地址变更

  路由的模式分为标签模式和HTML5模式两种。

3.1 标签模式

  标签模式是Angular默认使用的浏览器模式，它是HTML5 的一个降级方案，用于满足一些不支持HTML5模式的浏览器使用。
  在使用该模式时，URL将以一个#开头，后面紧跟一个!，表明这是一种标签模式，这个默认的!符号可以通过hashPrefix属性进行重置，由于标签模式不会重新加载URL请求，因此，这种模式不需要服务端的支持。
  Angular中可以通过注入的$locationProvider对象中的html5Mode方法进行自定义设置路由模式，格式如下：

    $locationProvider.htmlMode(boolen || obj)

  上述代码中，html5Mode方法支持两种设置格式：

• 一种是布尔类型，当在方法的括号中添加一个布尔值true时，表示支持HTML5模式，反之表示为默认的标签模式。
• 另外一种是JSON对象类型，当在方法的括号中添加{enabled:true}时，表示支持HTML5模式，反之表示为默认的标签模式。

  除了调用$locationProvider对象中的html5Mode方法配置浏览器路由模式外，还可以调用对象中的hashPrefix方法自定义标签模式中的bang标识符，格式如下：
$locationProvider.hashPrefix(strBangName)

3.2 HTML5模式

  想要开启HTML5模式，必须进行下面两步操作：

1. 必须通过吊桶config方法对路由服务模式进行配置：
   $locationProvider.html5mode(ytue)
2. 必须在服务端进行相关配置
   上一步还不能完全确保页面正常浏览，为了实现HTML5模式对低端浏览器的更好支持，还需要在服务端进行相应的配置。
   通常的做法是把应用内部的所有链接都执行一个HTML页面，并且这个页面名称最好命名为index.html，用于实现用户在浏览器中直接输入各种路由地址时的重定向功能。

4. 路由对象方法的双向绑定

  在Angulat内部，并不支持$location对象提供的方法与页面中的元素进行双向的数据绑定，如果要实现这种效果，需要将对象的方法定义为元素的model属性值，专门用于绑定model属性，并且添加两个watch方法，当$location更新时，分别向元素和控制器相互推送更新信息。

    <div ng-controller='myController'>        <div><input type="text" ng-model='locationPath' /></div>        <div>{{locationPath}}</div>    </div>    <script type="text/javascript">        var app=angular.module('myapp',[]);        app.controller('myController',['$location','$scope',function($location,$scope){            $scope.$watch('locationPath',function(path){                $location.path(path);            });            $scope.$watch('$location.path()',function(path){                $scope.locationPath=path;            })        }]);    </script>