[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] 前端路由实现单页跳转详解编程语言

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/12709.html

(0)
上一篇 2021年7月19日
下一篇 2021年7月19日

相关推荐

发表回复

登录后才能评论