1.项目结构
2.截图效果展示
3.主要js 代码
1 $stateProvider 2 .state('app', { 3 url: "/app", 4 abstract: true, 5 templateUrl: "templates/menu.html", 6 controller: 'MenuCtrl' 7 }) 8 //用户 9 .state('login', { 10 url: '/login', 11 templateUrl: 'templates/login.html', 12 controller: 'LoginCtrl' 13 }) 14 .state('app.home', { 15 url: "/home", 16 views: { 17 'menuContent' :{ 18 templateUrl: "templates/home.html", 19 controller: 'HomeCtrl' 20 }, 21 'menuList': { 22 templateUrl : "templates/menulist.html" 23 } 24 } 25 }) 26 .state('app.users', { 27 url: "/users", 28 views: { 29 'menuContent' :{ 30 templateUrl: "templates/users.html", 31 controller: 'MenuCtrl' 32 }, 33 'menuList': { 34 templateUrl : "templates/menulist.html" 35 } 36 } 37 }) 38 .state('app.orderdetails', { 39 url: "/orderdetails/:orderid", 40 views: { 41 'menuContent' :{ 42 templateUrl: "templates/orderdetail.html", 43 controller: 'MenuCtrl' 44 } 45 } 46 }); 47 48 49 $urlRouterProvider.otherwise('login');
1 .controller('HomeCtrl',function ($scope, $state,$ionicSideMenuDelegate, $ionicLoading, Storage, ENV, $ionicPopup, $stateParams,$interval){ 2 $scope.orderList = [ 3 { orderNo: 'B101', id: 1 }, 4 { orderNo: 'B102', id: 2 }, 5 { orderNo: 'B103', id: 3 }, 6 { orderNo: 'B104', id: 4 }, 7 { orderNo: 'B105', id: 5 }, 8 { orderNo: 'B106', id: 6 } 9 ]; 10 })
4.html 页面代码
index.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 6 <title></title> 7 8 <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 9 <link href="css/style.css" rel="stylesheet"> 10 <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above 11 <link href="css/ionic.app.css" rel="stylesheet"> 12 --> 13 <!-- ionic/angularjs js --> 14 <script src="lib/ionic/js/ionic.bundle.js"></script> 15 <!-- cordova script (this will be a 404 during development) --> 16 <script src="cordova.js"></script> 17 18 <!-- your app's js --> 19 <script src="js/app.js"></script> 20 <script src="js/controllers.js"></script> 21 <script src="js/services.js"></script> 22 <script src="js/config.js"></script> 23 <script src="js/directive.js"></script> 24 25 </head> 26 <body ng-app="deliveryAPP"> 27 28 <ion-nav-view> 29 </ion-nav-view> 30 </body> 31 </html>
menu.html
1 <ion-side-menus > 2 <ion-side-menu-content drag-content="false"> 3 <ion-nav-bar class="bar-stable bar-positive"><!--nav-title-slide-ios7--> 4 <ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> 返回</ion-nav-back-button> 5 </ion-nav-bar> 6 <ion-nav-view name="menuContent" animation="slide-left-right" ></ion-nav-view> 7 </ion-side-menu-content> 8 <ion-side-menu side="left"> 9 <ion-nav-view name="menuList"></ion-nav-view> 10 </ion-side-menu> 11 </ion-side-menus>
drag-content="false" 是否允许拖动内容打开侧栏菜单，默认为 true
side="left" 左侧菜单
menuList.html
1 <header class="bar bar-header bar-stable"> 2 <h1 class="title">菜单功能</h1> 3 </header> 4 <ion-content class="has-header"> 5 <ion-list> 6 <ion-item nav-clear menu-close href="#/app/home"> 7 订单管理 8 </ion-item> 9 <ion-item nav-clear menu-close href="#/app/users"> 10 我的管理 11 </ion-item> 12 </ion-list> 13 </ion-content>
备注：具体看看 http://www.ionic.wang/js_doc-index-id-6.html