关于AngularJS的ui-router

最新推荐文章于 2024-05-27 15:27:28 发布

小白变怪兽

最新推荐文章于 2024-05-27 15:27:28 发布

阅读量544

点赞数 1

分类专栏： angular 文章标签： angularjs

本文链接：https://blog.csdn.net/u013558749/article/details/63401707

版权

angular 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

下面以一个具体的例子来解释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'
            });
    });