AngularJS路由实例(uiRoute、ngRoute)

最新推荐文章于 2022-11-20 14:30:24 发布

安人多梦

最新推荐文章于 2022-11-20 14:30:24 发布

阅读量5.8k

点赞数 1

本文链接：https://blog.csdn.net/u011554735/article/details/51052587

版权

hybridApp 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

web前端

2 篇文章 0 订阅

订阅专栏

angularjs

1 篇文章 0 订阅

订阅专栏

介绍

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>
                    state: TabBar.Page2
                    <div ui-view="">childPage2.html</div>
                    state: TabBar.Page3
                    <div ui-view="">childPage3.html</div>

安人多梦

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS路由实例(uiRoute、ngRoute)

AngularJS的路由功能使得它能够在一个页面中呈现不同的视图页面。它的做法是将视图分解成布局和模板视图，并且根据用户当前访问的URL来展示对应的视图。AngularJS 为我们封装好了一个路由工具 ngRoute ,它的实现是对URL进行匹配后去驱动视图页面显示。它也为我们封装了一个独立的路由模块 uiRouter ,它是一种靠状态 state 来驱动视图页面。
复制链接

扫一扫