So I'm trying to use ionic to build a simple mobile app. I've looked at ionic tutorials and googled quite a bit but I'm not quite getting it. I have created a nav bar that shows up on every page by adding this code to the index.html page:
<body ng-app="starter">
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-icon icon ion-ios7-arrow-back">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view>
</ion-nav-view>
</body>
I added a navicon to the right side of the nav bar on one of my pages with this code:
<ion-view title="Hanzi Options">
<ion-nav-buttons side="right">
<button menu-toggle="right" class="button button-icon icon ion-navicon" >
</button>
</ion-nav-buttons>
<ion-content>...etc
I would like to be able to click on the navicon and see a side menu containing a basic html page called sidemenu.html that is located in the templates folder. Here is the start of the code in that file:
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<header class="bar bar-header bar-stable">
<h1 class="title">Navigate</h1>
</header>
<ion-content class="has-header">
<ion-list>
<ion-item nav-clear menu-close href="#/friends">
Friends
</ion-item>...etc
I added this code to my app.js file in the .config section:
.state('app.sidemenu', {
url: "/sidemenu",
abstract: true,
templateUrl: "templates/sidemenu.html",
controller: 'NavCtrl'
})
and an empty NavCtrl to my controllers.js file:
.controller('NavCtrl', function($scope) {
});
I suspect that maybe my .state code isn't quite right but not sure. Also, do I need to add something to the NavCtrl controller to open/close the side menu? Many thanks in advance!
So I'm trying to use ionic to build a simple mobile app. I've looked at ionic tutorials and googled quite a bit but I'm not quite getting it. I have created a nav bar that shows up on every page by adding this code to the index.html page:
<body ng-app="starter">
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-icon icon ion-ios7-arrow-back">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view>
</ion-nav-view>
</body>
I added a navicon to the right side of the nav bar on one of my pages with this code:
<ion-view title="Hanzi Options">
<ion-nav-buttons side="right">
<button menu-toggle="right" class="button button-icon icon ion-navicon" >
</button>
</ion-nav-buttons>
<ion-content>...etc
I would like to be able to click on the navicon and see a side menu containing a basic html page called sidemenu.html that is located in the templates folder. Here is the start of the code in that file:
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<header class="bar bar-header bar-stable">
<h1 class="title">Navigate</h1>
</header>
<ion-content class="has-header">
<ion-list>
<ion-item nav-clear menu-close href="#/friends">
Friends
</ion-item>...etc
I added this code to my app.js file in the .config section:
.state('app.sidemenu', {
url: "/sidemenu",
abstract: true,
templateUrl: "templates/sidemenu.html",
controller: 'NavCtrl'
})
and an empty NavCtrl to my controllers.js file:
.controller('NavCtrl', function($scope) {
});
I suspect that maybe my .state code isn't quite right but not sure. Also, do I need to add something to the NavCtrl controller to open/close the side menu? Many thanks in advance!
Share Improve this question asked Jul 16, 2014 at 3:25 user3843276user3843276 1331 gold badge2 silver badges6 bronze badges 1- OK I figured it out but stackoverflow won't let me answer my own question until tomorrow. The .state stuff is unnecessary. I did it all with a factory, a controller, and some markup in the index.html file. I'll post the answer tomorrow. Long story short, the ionic framework tutorials and examples are not helpful... – user3843276 Commented Jul 16, 2014 at 5:38
2 Answers
Reset to default 6Wow I finally worked this out after losing a day to skimpy documentation. The tutorials and examples on ionic framework website seem to be seriously outdated.
First, I created a factory to provide the list items for the side menu:
.factory('MenuService', function() {
var menuItems = [{text: 'Friends'}, {text: 'Enemies'}, {text: 'Losers'}];
return {
all: function() {
return menuItems;
}
}
})
Then, I created a menu controller:
.controller('MenuController', function ($scope, $location, MenuService) {
// "MenuService" is a service returning mock data (services.js)
$scope.list = MenuService.all();
});
I replaced the code in the body of the index.html page with this:
<div ng-controller="MenuController">
<ion-side-menus>
<!-- Center content -->
<ion-pane ion-side-menu-content>
<ion-nav-bar type="bar-assertive" back-button-type="button-icon" back-button-icon="ion-arrow-left-c"></ion-nav-bar>
<ion-nav-view>
</ion-nav-view>
</ion-pane>
<!-- Left Side Menu -->
<ion-side-menu side="right">
<ion-header-bar class="bar bar-header bar-assertive">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content has-header="true">
<ion-list>
<ion-item ng-click="goTo(item.link)" class="item item-icon-left" ng-repeat="item in list" menu-close>
<!-- <i ng-class="item.iconClass"></i> -->
{{item.text}}
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</div>
The factory took the place of the sidemenus.html that I had in the template directory. Also, the ".state" stuff was not needed at all.
There is a starter app for Ionic that is a small example for an app with a side menu
ionic start myApp sidemenu
Here is a live preview that you can check out
http://plnkr.co/edit/0RXSDB?p=preview
I think that you have a problem in your routes definitions
Change this:
.state('app.sidemenu', { ...
Into this:
.state('sidemenu', { ...
And all your other routes to the different sections of the menu should be like this:
.state('sidemenu.home', { ...
.state('sidemenu.dashboard', { ...