AngularJS路由实例(uiRoute、ngRoute) - 快车库

介绍

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

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

效果图

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

实例代码

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

home.html

<body>
    <div class="home_page">
        <!--ng-view指令告诉Angular把匹配到的视图载入到此处-->
        <div ng-view></div>

        <ul>
            <li>
                <a href="#page1">page1</a>
            </li>
            <li>
                <a href="#page2">page2</a>
            </li>
            <li>
                <a href="#page3">page3</a>
            </li>
        </ul>
    </div>

</body>

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加载对应的视图页面)
有三种方法来激活状态,并传递参数

调用$state.go()方法；$state.go("TabBar.Page1",{param: 'value'})
点击包含ui-sref指令的链接；ui-sref="TabBar.Page1({param1:value1})"
导航到与状态相对应的URL；

home.html

<body>
<div class="home_page">
    <!--ui-view指令告诉Angular把对应状态的视图载入到此处-->
    <!--state : TabBar-->
    <div ui-view=""></div>
</div>
</body>

pageTabBar.html

<div class="home_page">
    <!--ui-view指令告诉Angular把对应状态的视图载入到此处-->
    <div ui-view=""></div>
    <ul>
        <li>
            <!--匹配子状态Page1-->
            <a href="" ui-sref=".Page1">page1</a>
        </li>
        <li>
            <a href="" ui-sref=".Page2">page2</a>
        </li>
        <li>
            <a href="" ui-sref=".Page3">page3</a>
        </li>
    </ul>
</div>

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
    <div ui-view="">pageTabBar.html</div>
pageTabBar.html 
    state: TabBar.Page1
    <div ui-view="">childPage1.html</div>