| <html ng-app="ionicApp"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> | |
| <title>Side Menus</title> | |
| <link href="http://code.ionicframework.com/1.0.0-beta.6/css/ionic.css" rel="stylesheet"> | |
| <script src="http://code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.js"></script> | |
| </head> | |
| <body> | |
| <div ng-controller="AppController"> | |
| <ion-nav-view></ion-nav-view> | |
| </div> | |
| <script id="app.html" type="text/ng-template"> | |
| <ion-side-menus> | |
| <ion-side-menu-content> | |
| <ion-nav-bar class="bar-dark"> | |
| <ion-nav-back-button class="button-icon ion-arrow-left-c"> | |
| </ion-nav-back-button> | |
| </ion-nav-bar> | |
| <ion-nav-buttons side="left"> | |
| <button class="button button-icon button-clear ion-navicon" menu-toggle="left"> | |
| </button> | |
| </ion-nav-buttons> | |
| <ion-nav-buttons side="right"> | |
| <button class="button button-icon button-clear ion-navicon" menu-toggle="right"> | |
| </button> | |
| </ion-nav-buttons> | |
| <ion-nav-view name="appContent"></ion-nav-view> | |
| </ion-side-menu-content> | |
| <ion-side-menu side="left"> | |
| <ion-header-bar class="bar-assertive"> | |
| <h1 class="title">Left Menu</h1> | |
| <button class="button button-icon button-clear ion-navicon" menu-toggle="left"> | |
| </button> | |
| </ion-header-bar> | |
| <ion-content> | |
| <ion-cart ng-controller='CartController'></ion-cart> | |
| </ion-content> | |
| </ion-side-menu> | |
| <ion-side-menu side="right"> | |
| <ion-header-bar class="bar-assertive"> | |
| <h1 class="title">Left Menu</h1> | |
| </ion-header-bar> | |
| <ion-content> | |
| <ion-cart ng-controller='CartController'></ion-cart> | |
| </ion-content> | |
| </ion-side-menu> | |
| </ion-side-menus> | |
| </script> | |
| <script id="home.html" type="text/ng-template"> | |
| <ion-view title="Ionic Shopping Checkout"> | |
| <ion-content padding="true"> | |
| <ion-purchase></ion-purchase> | |
| </ion-content> | |
| </ion-view> | |
| </script> | |
| <script id="ionCart.html" type="text/ng-template"> | |
| <div class="list"> | |
| <div class="item" ng-repeat="item in data.items">{{item.label}}</div> | |
| </div> | |
| </script> | |
| </body> | |
| </html> |
| angular.module('ionicApp', ['ionic']) | |
| .config(function($stateProvider, $urlRouterProvider) { | |
| $stateProvider | |
| .state('app', { | |
| url: "/app", | |
| abstract: true, | |
| templateUrl: "app.html" | |
| }) | |
| .state('app.home', { | |
| url: "/home", | |
| views: { | |
| 'appContent' :{ | |
| templateUrl: "home.html", | |
| controller : "HomeController" | |
| } | |
| } | |
| }) | |
| $urlRouterProvider.otherwise("/app/home"); | |
| }) | |
| .controller('AppController', function($scope, $ionicSideMenuDelegate) { | |
| $scope.toggleLeft = function() { | |
| $ionicSideMenuDelegate.toggleLeft(); | |
| }; | |
| }) | |
| .controller("HomeController", function($scope) { | |
| }) | |
| .controller("CartController", function($scope) { | |
| $scope.data = { | |
| items : [] | |
| }; | |
| for(var i = 0; i < 25; i++) { | |
| $scope.data.items.push({ | |
| id : i, | |
| label : "Item " + i | |
| }) | |
| } | |
| }) | |
| .directive("ionCart", function() { | |
| return { | |
| restrict : "E", | |
| templateUrl : "ionCart.html" | |
| } | |
| }) | |
| .directive("ionPurchase", function() { | |
| return { | |
| restrict : "E", | |
| template : "<h2>This is Ion Purchase</h2>" | |
| } | |
| }) |