AngularJS路由实例(uiRoute、ngRoute)

介绍

AngularJS的路由功能使得它能够在一个页面中呈现不同的视图页面。它的做法是将视图分解成布局和模板视图，并且根据用户当前访问的URL来展示对应的视图。

AngularJS 为我们封装好了一个路由工具 ngRoute ,它的实现是对URL进行匹配后去驱动视图页面显示。它也为我们封装了一个独立的路由模块 uiRouter ,它是一种靠状态 state 来驱动视图页面。

效果图

是不是很像App下方的选项卡

实例代码

方式一：ngRoute(匹配URL路径加载对应的视图页面)

home.html

    

        
        


        

            

                page1
            
            

                page2
            
            

                page3
            
        
    

routeConfig.js

//设置模块与ngRoute的依赖关系
angular.module("ngRouteApp", ["ngRoute"])
    .config(['$routeProvider', function($routeProvider){
        $routeProvider
        //定义路由规则(若URL路径为“/page1”则加载childPage1.html),语法类似switch case default
            .when("/page1",{templateUrl : "childPage1.html"})
            .when("/page2",{templateUrl : "childPage2.html"})
            .when("/page3",{templateUrl : "childPage3.html"}) 
            .otherwise({redirectTo: "/page1"});
    }]
);

方式二：uiRoute(根据状态state加载对应的视图页面)
有三种方法来激活状态,并传递参数

1. 调用$state.go()方法；$state.go("TabBar.Page1",{param: 'value'})

2. 点击包含ui-sref指令的链接；ui-sref="TabBar.Page1({param1:value1})"

3. 导航到与状态相对应的URL；

home.html

pageTabBar.html

    
    

    

        

            
            page1
        
        

            page2
        
        

            page3
        
    

routeConfig.js

angular.module("uiRouteApp", ["ui.router"])
    .config(
    function($stateProvider, $urlRouterProvider){
        $urlRouterProvider.otherwise("TabBar/Page1");
        $stateProvider
            //.state("状态",{url : "URL路径", templateUrl : "html"})
            .state("TabBar",{url : "/TabBar", templateUrl : "PageTabBar.html"})
            
            //.state("子状态",{url : "下一级URL路径", templateUrl : "子html页面"})
            .state("TabBar.Page1", {url : "/Page1", templateUrl : "childPage1.html"})
            .state("TabBar.Page2", {url : "/Page2", templateUrl : "childPage2.html"})
            .state("TabBar.Page3", {url : "/Page3", templateUrl : "childPage3.html"})

    }
);

视图层级结构

home.html 
    state:TabBar
    
pageTabBar.html
pageTabBar.html 
    state: TabBar.Page1
    
childPage1.html