zoukankan      html  css  js  c++  java
  • AngularJS路由实现单页面跳转

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>路由</title>
        <script  src="angular.min.js"></script>
        <!--引入路由文件-->
        <script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
    
    </head>
    <body ng-app='routeDemo'>
        <!--左边栏-->
        <div id="navigator" style=" 20%;display: inline-block;background-color: red;height: 400px;float: left">
            <!--菜单-->
            <ul>
                <li><a href="#/home">首页</a></li>
                <li><a href="#/woman">女装</a></li>
                <li><a href="#/man">男装</a></li>
                <li><a href="#/life">生活用品</a></li>
                <li><a href="#/cook">厨房用品</a></li>
            </ul>
        </div>
        <!--右边栏-->
        <div style=" 80%;display: inline-block;background-color: green;height: 400px;float: right">
            <div ng-view=""></div>
        </div>
    </body>
    <script type="text/ng-template" id="index.home.html">
        <h1>这是首页</h1>
    </script>
    <script type="text/ng-template" id="index.woman.html">
        <h1>这是女装</h1>
    </script>
    <script type="text/ng-template" id="index.man.html">
        <h1>这是男装</h1>
    </script>
    <script type="text/ng-template" id="index.life.html">
        <h1>这是生活馆</h1>
    </script>
    <script type="text/ng-template" id="index.cook.html">
        <h1>这是厨房用品</h1>
    </script>
    <script type="text/javascript">
        angular.module('routeDemo',['ngRoute'])
        .controller('HomeController',function ($scope,$route) {
            $scope.$route = $route;
        })
            .controller('WomanController',function ($scope,$route) {
                $scope.$route = $route;
            })
            .controller('WomanController',function ($scope,$route) {
                $scope.$route = $route;
            })
            .controller('ManController',function ($scope,$route) {
                $scope.$route = $route;
            })
            .controller('LifeController',function ($scope,$route) {
                $scope.$route = $route;
            })
            .controller('CookController',function ($scope,$route) {
                $scope.$route = $route;
            })
    
            //配置$routeProvider用来定义路由规则
            //$routeProvider为我们提供了when(path,object)& other(object)函数按顺序定义所有路由,函数包含两个参数:
            //@param1:url或者url正则规则
            //@param2:路由配置对象
            .config(function($routeProvider){
                $routeProvider.
                when('/home',{
                    //templateURL:插入ng-view的HTML模板文件
                    templateUrl:'index.home.html',
                    controller:'HomeController'
    
                }).
                when('/woman',{
                templateUrl:'index.woman.html',
                controller:'WomanController'
                }).
                when('/man',{
                    templateUrl:'index.man.html',
                    controller:'ManController'
                }).
                when('/life',{
                    templateUrl:'index.life.html',
                    controller:'LifeController'
                }).
                when('/cook',{
                    templateUrl:'index.cook.html',
                    controller:'CookController'
                })
            })
    </script>
    </html>
    

      

      效果图:

  • 相关阅读:
    一步步用新浪SAE免费教大家搭建个人博客(wordpress 3.0.4 for SAE )
    欢迎大家来访西北狼网络乌托邦
    教大家如何让新浪SAE上安装wordpress实现伪静态
    CSDN 600万用户数据信息泄露并道歉
    推荐5款好用的屏幕录像软件
    IPv6无法解决全部安全问题
    详解STP以及工作过程
    如何在WordPress中实现彩色标签云
    EIGRP和RIP的一个综合性很强的实验(变态实验之一)
    查看系统等待的sql
  • 原文地址:https://www.cnblogs.com/chencuixin/p/6826176.html
Copyright © 2011-2022 走看看