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

 效果图:

[angularjs] 前端路由实现单页跳转_第1张图片

你可能感兴趣的:([angularjs] 前端路由实现单页跳转)