angular路由小笔记

Posted 2022-12-11 川衡

angular路由

angular提供的 when和otherwise两个方法来定义引用路由。

路由中有controller template templateUrl resolve

其中

• controller 是指定的控制器与路由所创建的新作用域关联在一起。
• template templateURL为模板 模板路径 比较重要的是 resolve，要单独记录一下。

如果设置了*resolve属性，AngularJS会将列表中的元素都注入到控制器中。如果这些依赖是promise对象，它们在控制器加载以及$routeChangeSuccess被触发之前，会被resolve并设置成一个值。*

• redirectTo 属性的值是一个字符串，最后路径会替换为这个值。

• reloadOnSearch 如果设置为true，当$location.search()发生变化时会重新加载路由。false就不会了。

$routeParams angular会把路由参数解析出来并传递给$routeParams。用法是在路由参数前面加上”:”,如testId

app.config(['$routeProvider',function ($routeProvider) 
$routeProvider
    .when('/test', 
        templateUrl: 'angu_home_route/test.html',
        controller: 'homeStarter'
    )
    .when('/testId/:id', 
        templateUrl: 'angu_home_route/testId.html',
        controller: 'testIdCtrl',
        resolve:
                getJson: function($http)

                    $http.get("json/test.json")
                        .success(function(json) 
                            console.log(json);

                            angular.forEach(json,function(data,index,array)
                                for(var i = 0;i < data.length; i++)
                                    console.log(data[i].userCode);
                                

                            );
                        );

                
        
    )
    .otherwise(
        redirectTo: '/test'
    );

]);

注意 如果需要在控制器中访问这些变量，需要把$routeParams注入到控制器。

$location服务

用来解析地址栏中的URL，$location没有刷新整个页面的能力，如果需要刷新整个页面，需要使用$window.location对象。

• path() 用来获取页面的当前路径
• replace() 屏蔽回退按钮 不能点击后退按钮
• absUrl() 用来回去编码后的完整URL
• hash() 用来获取URL中的hash片段
• host() 获取URL中的主机
• port() 获取port中的端口号
• protocol() 获取URL中的协议
• search() 获取URL中的查询串
• url() 获取当前页面的url

angular 支持两种模式 标签模式 和 html5模式

标签模式

标签模式是HTML5模式的降级方案，URL路径以#符号开头。

html5模式

运用时不要用相对路径。

路由事件

路由事件有二个阶段

第一阶段就是路由变化之前的广播 $routeChangeStart 这一步，路由服务会开始加载路由变化所需的所有依赖，并且模板行业resolve键中的promise也会被resolve。 ** 第二阶段**就是在路由的依赖被加载后广播$routeChangeSuccess事件。

另外就是会出现$routeChangeError即失败$routeUpdate

# $location服务不会重新加载整个页面，它只会单纯地改变URL。如果我们想重新加载整个页面，需要用$window服务来设置地址。
$window.location.href = “/reload/page”;

如果要在作用域的生命周期外使用$location服务，必须用$apply函数将变化抛到应用外部。因为$location服务是基于$digest来驱动浏览器的地址变化，以使路由事件正常工作的。