关于AngularJS的ui-router

发布时间：2020-12-17 09:31:09 所属栏目：安全来源：网络整理

导读：下面以一个具体的例子来解释ui-router的用法：准备工作 page1.html div this is the page1 con/ div page2.html div this is the page2 con/ div extra.html div this is the extra con/ div main.html !DOCTYPE html html head meta charset = "utf-8" tit

下面以一个具体的例子来解释ui-router的用法：

准备工作

page1.html

<div>this is the page1 con</div>

page2.html

<div>this is the page2 con</div>

extra.html

<div>this is the extra con</div>

main.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        //这里要记得引入angular框架和ui-router
        <script src="./node_modules/angular/angular.min.js" charset="utf-8"></script>
        <script src="./node_modules/angular-ui-router/release/angular-ui-router.min.js" charset="utf-8"></script>
        <script src="./app.js"></script>
    </head>
    <body ng-app="myApp">
        <h1>Angularjs ui-router demo</h1>
        //ui-view相当于一个占位符,用来放置切换的页面
        <div ui-view=""></div>
    </body>
</html>

pageTab.html

<div>
//这里添加的ui-sref表示的就是要显示的页面，"."表示的是子页面
    <span ui-sref=".page1"><a href="">page1</a></span>
    <span ui-sref=".page2"><a href="">page2</a></span>
</div>
<div>
    <div ui-view=""></div>
</div>

接下来就是要编写js代码了，我们把它下载app.js中（main.html中引入了）：

//声明angular模块，并把ui-router传入
var myApp = angular.module('myApp',['ui.router'])
//传入$stateProvider和$urlRouteProvider两个路由引擎参数，这样，我们后面就可以配置我们想要的路由了
    .config(function($stateProvider,$urlRouterProvider) {
        //如果后面没有匹配的路由，那么将会跳转到$urlRouterProvider这儿设定的路径(也就是设置默认路径)，就和switch..case..中的default是一个道理
        $urlRouterProvider
            .when('','/pageTab');
        $stateProvider
        //第一行表示会在main.html页面第一个显示出来的页面
            .state('pageTab',{
                url: '/pageTab',templateUrl: 'pageTab.html'
            })
            //这里加上“.“表示告诉路由引擎，我们在这里定义的是子页面／嵌入页面，也就是说它会显示在pageTab.html页面中的ui-view处。
            .state('pageTab.page1',{
                url: '/page1',templateUrl: 'page1.html'
            })
            .state('pageTab.page2',{
                url: '/page2',templateUrl: 'page2.html'
            })
           .state('extra',{
                url: '/extra',templateUrl: 'extra.html'
            });
    });

参考： http://www.oschina.net/translate/angularjs-ui-router-nested-routes?print

更多请点击查看…

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!