zoukankan      html  css  js  c++  java
  • [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>

     效果图:

  • 相关阅读:
    NoInstall_Mysql
    说话
    我是一名博客新人
    pom.xml报错
    模板——链表模板、有序链表模板及测试
    模板——函数模板
    模板——类模板
    MDI程序演示
    容器和算法2 C++快速入门48(完)
    MDI程序演示
  • 原文地址:https://www.cnblogs.com/taoshihan/p/5329846.html
Copyright © 2011-2022 走看看