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

时间:2024-01-02 17:37:08

代码:

<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] 前端路由实现单页跳转