[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/industrynews/12709.html

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

相关推荐

发表回复

登录后才能评论