1.项目结构

2.截图效果展示

   

  

3.主要js 代码

     $stateProvider

       .state('app', {

         url: "/app",

         abstract: true,

         templateUrl: "templates/menu.html",

         controller: 'MenuCtrl'

       })

     //用户

     .state('login', {

       url: '/login',

       templateUrl: 'templates/login.html',

       controller: 'LoginCtrl'

     })

       .state('app.home', {

         url: "/home",

         views: {

           'menuContent' :{

             templateUrl: "templates/home.html",

             controller: 'HomeCtrl'

           },

           'menuList': {

             templateUrl : "templates/menulist.html"

           }

         }

       })

       .state('app.users', {

         url: "/users",

         views: {

           'menuContent' :{

             templateUrl: "templates/users.html",

             controller: 'MenuCtrl'

           },

           'menuList': {

             templateUrl : "templates/menulist.html"

           }

         }

       })

       .state('app.orderdetails', {

       url: "/orderdetails/:orderid",

       views: {

         'menuContent' :{

           templateUrl: "templates/orderdetail.html",

           controller: 'MenuCtrl'

         }

       }

     });

     $urlRouterProvider.otherwise('login');
 .controller('HomeCtrl',function ($scope, $state,$ionicSideMenuDelegate, $ionicLoading, Storage, ENV, $ionicPopup, $stateParams,$interval){

     $scope.orderList = [

       { orderNo: 'B101', id: 1 },

       { orderNo: 'B102', id: 2 },

       { orderNo: 'B103', id: 3 },

       { orderNo: 'B104', id: 4 },

       { orderNo: 'B105', id: 5 },

       { orderNo: 'B106', id: 6 }

     ];

   })

4.html 页面代码

index.html

 <!DOCTYPE html>

 <html>

   <head>

     <meta charset="utf-8">

     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

     <title></title>

     <link href="lib/ionic/css/ionic.css" rel="stylesheet">

     <link href="css/style.css" rel="stylesheet">

     <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above

     <link href="css/ionic.app.css" rel="stylesheet">

     -->

     <!-- ionic/angularjs js -->

     <script src="lib/ionic/js/ionic.bundle.js"></script>

     <!-- cordova script (this will be a 404 during development) -->

     <script src="cordova.js"></script>

     <!-- your app's js -->

     <script src="js/app.js"></script>

     <script src="js/controllers.js"></script>

     <script src="js/services.js"></script>

     <script src="js/config.js"></script>

     <script src="js/directive.js"></script>

   </head>

   <body ng-app="deliveryAPP">

   <ion-nav-view>

   </ion-nav-view>

   </body>

 </html>

menu.html

 <ion-side-menus >

     <ion-side-menu-content  drag-content="false">

       <ion-nav-bar class="bar-stable bar-positive"><!--nav-title-slide-ios7-->

         <ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> 返回</ion-nav-back-button>

       </ion-nav-bar>

       <ion-nav-view name="menuContent" animation="slide-left-right" ></ion-nav-view>

     </ion-side-menu-content>

   <ion-side-menu side="left">

     <ion-nav-view name="menuList"></ion-nav-view>

   </ion-side-menu>

 </ion-side-menus>
drag-content="false" 是否允许拖动内容打开侧栏菜单，默认为 true
side="left" 左侧菜单
menuList.html
 <header class="bar bar-header bar-stable">

   <h1 class="title">菜单功能</h1>

 </header>

 <ion-content class="has-header">

   <ion-list>

     <ion-item nav-clear menu-close href="#/app/home">

       订单管理

     </ion-item>

     <ion-item nav-clear menu-close href="#/app/users">

       我的管理

     </ion-item>

   </ion-list>

 </ion-content>

备注：具体看看 http://www.ionic.wang/js_doc-index-id-6.html

												


											
Ionic 左侧菜单(登录主页详情demo)的更多相关文章
	

    
								
  1. 仿京东左侧菜单 hover效果-简易demo
		
    简单描述: 用到的知识点 css 中的绝对定位 以及 Js 中的事件冒泡(或事件委托) .cont{display:inline-block;width:200px;height:200px;bord ...
    
		
    2. 
						
  2. 权限模块_使用权限_实现主页面的效果_显示左侧菜单&只显示有权限的菜单项
		
    权限模块__使用权限__实现主页面的效果 HomeAction.java public class HomeAction extends ActionSupport { public String i ...
    
		
    3. 
						
  3. React+Ant Design设置左侧菜单导航路由的显示与隐藏（与权限无关）
		
    最近在学习react时,用到了很流行的UI框架Ant Design,也了解了一下Ant Design Pro,发现它们都有导航组件,Ant Design框架的导航菜单在这里,Ant Design Pr ...
    
		
    4. 
						
  4. 使用layui-tree美化左侧菜单，点击生成tab选项
		
    layui-tree美化左侧菜单 html <div class="layui-side layui-bg-black"> <div class="la ...
    
		
    5. 
						
  5. 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑（二）——使用蓝图功能进行模块化
		
    使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(一)——创建应用 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(二)——使用蓝图功能进行模块化 使用 Flask 框架写用 ...
    
		
    6. 
						
  6. ajax实现简单的点击左侧菜单，右侧加载不同网页
		
    实现:ajax实现点击左侧菜单,右侧加载不同网页(在整个页面无刷新的情况下实现右侧局部刷新,用到ajax注意需要在服务器环境下运行,从HBuilder自带的服务器中打开浏览效果即可) 原理:ajax的 ...
    
		
    7. 
						
  7. python : jquery实现左侧菜单
		
    左侧菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...
    
		
    8. 
						
  8. python :页面布局 ，后台管理页面之左侧菜单跟着滚动条动
		
    左侧菜单跟着滚动条动 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// ...
    
		
    9. 
						
  9. python :  HTML+CSS  (左侧菜单)
		
    左侧菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 挂载U盘
			
    .fdisk -l 查看当前系统存储盘 (sdaX一般是系统自带, sdbX则是外接) .mount /dev/sdbX /mnt/usb/ (如果usb目录不存在可创建新目录) .umount /m ...
    
			
    2. 
						
  2. CSS——优雅降级和渐进增强
			
    什么是渐进增强(progressive enhancement).优雅降级(graceful degradation)呢? 渐进增强 progressive enhancement: 针对低版本浏览器 ...
    
			
    3. 
						
  3. 02-Nov-2017 07:11:56.475 信息 [http-nio-8080-exec-10] com.mchange.v2.c3p0.impl.AbstractPoolBackedDataSource. Initializing c3p0 pool...
			
    报错: 02-Nov-2017 07:11:56.475 信息 [http-nio-8080-exec-10] com.mchange.v2.c3p0.impl.AbstractPoolBackedD ...
    
			
    4. 
						
  4. vue-select-lang
			
    https://cli.vuejs.org/zh/guide/build-targets.html#%E5%BA%93 https://github.com/lipis/flag-icon-css
    
			
    5. 
						
  5. vue通过修改element-ui相关类的样式修改element-ui组件的样式
			
    可以在App.vue中的style中修改element-ui的样式. .el-menu{ width:160px !important; } 注意:一定要在属性值后面加上 !important 使自己 ...
    
			
    6. 
						
  6. 9.2 sun.py
			
    import requests from bs4 import BeautifulSoup url = 'http://wz.sun0769.com/index.php/question/reply? ...
    
			
    7. 
						
  7. READING | 我是一只IT小小鸟
			
    “世界是如此的熙熙攘攘,让年轻的心找不到方向,但这些人是不能小看的啊,如果他们开始敲打自己的命令行.” “知之者不如好知者,好之者不如乐之者”,很多IT界的优秀人才都对计算机技术或者IT技术有着浓厚的 ...
    
			
    8. 
						
  8. Axios的get和post请求写法
			
    执行get请求 // 为给定 ID 的 user 创建请求 axios.get('/user?ID=12345') .then(function (response) { console.log(re ...
    
			
    9. 
						
  9. Template-Thymeleaf：Thymeleaf
			
    ylbtech-Template-Thymeleaf:Thymeleaf 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部 0. https://www.thyme ...
    
			
    10. 
						
  10. iOS之CGPath相关属性（一）
			
    #ifndef CGPATH_H_ #define CGPATH_H_ForeverGuard博客园 #include <CoreFoundation/CFBase.h> #include ...
    
			
    11.