前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >[angularjs] 前端路由实现单页跳转

[angularjs] 前端路由实现单页跳转

作者头像
唯一Chat
发布2019-09-10 11:29:13
1.2K0
发布2019-09-10 11:29:13
举报
文章被收录于专栏:陶士涵的菜地陶士涵的菜地

代码:

<div ng-app="Home">
    <div ui-view></div>    
    <div ng-controller="Index">
        <a href="#/one">第一页</a>
        <a href="#/two">第二页</a>
        <a href="#/three">第三页</a>
    </div>
</div>
</body>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script type="text/javascript">
    var app=angular.module("Home",["ui.router"]);
    app.config(function($stateProvider,$urlRouterProvider){
        $stateProvider.state("one",{
            url:"/one",
            templateUrl:'page1.html',
            controller: function($scope){
                $scope.title = '第一页';
            }
        });
        $stateProvider.state("two",{
            url:"/two",
            templateUrl:'page2.html',
            controller: function($scope){
                $scope.title = '第二页';
            }
        });
        $stateProvider.state("three",{
            url:"/three",
            templateUrl:'page3.html',
            controller: function($scope){
                $scope.title = '第三页';
            }
        });
    });
    app.controller("Index",function($scope){});
</script>

效果图:

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016-03-28 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档