Ionic 左侧菜单(登录主页详情demo)

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>