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

代码：

<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>

 效果图：

转载于:https://www.cnblogs.com/taoshihan/p/5329846.html