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>

     效果图:

  • 相关阅读:
    自定义标签的作用
    自定义标签处理器类的生命周期
    自定义标签的执行过程
    自定义标签入门案例
    JSTL核心标签库详解
    JSTL标签(核心标准库)
    动作标签
    jsp标签
    EL表达式
    JSP学习案例--,竞猜游戏
  • 原文地址:https://www.cnblogs.com/taoshihan/p/5329846.html
Copyright © 2011-2022 走看看