代码:
<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>
效果图:
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/industrynews/12709.html