AngularJS路由实例(uiRoute、ngRoute)

发布时间:2019-11-09 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了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加载对应的视图页面)
有三种方法来激活状态,并传递参数

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

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

  3. 导航到与状态相对应的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>

总结

以上是脚本之家为你收集整理的AngularJS路由实例(uiRoute、ngRoute)全部内容,希望文章能够帮你解决AngularJS路由实例(uiRoute、ngRoute)所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。

脚本之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ” ,选择关注!
精选程序员所需精品干货内容!

标签: