Skip to content

Commit d161dfd

Browse files
georgicodesgeorgicodes
committed
Inital commit to add in working side menu with navigation app
1 parent 466ec65 commit d161dfd

File tree

11 files changed

+117
-148
lines changed

11 files changed

+117
-148
lines changed

‎.gitignore‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
# Intellij
2+
.idea/
3+
*.iml
4+
*.iws
5+
6+
# Mac
7+
.DS_Store
8+
19
*.keystore
210
*.sw*
311
platforms/^.*

‎README.md‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
1-
ionic-angular-cordova-seed
1+
ionic-side-menu-with-navigation
22
==========================
33

4-
The perfect starting point for an Ionic project.
4+
The project has been forked from ionic-angular-cordova-seed. It contains a fully functional app that has a Side Menu
5+
with navigation.
56

6-
- [Ionic Tutorials](http://ionicframework.com/tutorials/)
7+
The aim of this project was to extend the functionality demonstrated [here](http://ionicframework
8+
.com/examples/side-menu/) by allowing navigation by clicking on the items within the side menu.
9+
10+
The project is structured well with separate app.js, controllers.js and services.js files.
11+
12+
Changes have only been made to /templates, index.html and app.js, controllers.js and services.js. Everything else
13+
remains the same as the ionic-angular-cordova-seed project.

‎www/index.html‎

Lines changed: 31 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -29,16 +29,38 @@
2929
<script src="js/controllers.js"></script>
3030
</head>
3131

32-
<!-- 'starter' is the name of this angular module (js/app.js)-->
33-
<body ng-app="starter">
32+
<!-- 'sideMenuApp' is the name of this angular module (js/app.js)-->
33+
<body ng-app="sideMenuApp">
3434

35-
<!-- Our navigation router with some animations set -->
36-
<pane nav-router animation="slide-left-right-ios7">
37-
<!-- The nav bar that will be updated as we navigate -->
38-
<nav-bar class="nav-title-slide-ios7" type="bar-positive" back-button-type="button-icon" back-button-icon="icon ion-arrow-left-c"></nav-bar>
35+
<div ng-controller="MenuController">
36+
<side-menus>
37+
38+
<!-- Center content -->
39+
<pane id="navRouter" side-menu-content nav-router>
40+
<header class="bar bar-header bar-assertive">
41+
<button class="button button-icon" ng-click="openLeft()"><i class="icon ion-navicon"></i></button>
42+
<h1 class="title">Slide Me</h1>
43+
</header>
44+
<!-- where the content of each page will be rendered -->
45+
<ng-view></ng-view>
46+
</pane>
47+
48+
<!-- Left Side Menu -->
49+
<side-menu side="left">
50+
<header class="bar bar-header bar-assertive">
51+
<h1 class="title">Menu</h1>
52+
</header>
53+
<content has-header="true">
54+
<ul class="list">
55+
<a href="{{item.link}}" class="item item-icon-left" ng-repeat="item in list">
56+
<i ng-class="item.iconClass"></i>
57+
{{item.text}}
58+
</a>
59+
</ul>
60+
</content>
61+
</side-menu>
62+
</side-menus>
63+
</div>
3964

40-
<!-- where the content of each page will be rendered -->
41-
<ng-view></ng-view>
42-
</pane>
4365
</body>
4466
</html>

‎www/js/app.js‎

Lines changed: 19 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,22 @@
1-
// angular.module is a global place for creating, registering and retrieving Angular modules
2-
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
3-
// the 2nd parameter is an array or 'requires'
4-
// 'starter.services' is found in services.js
5-
// 'starter.controllers' is found in controllers.js
6-
angular.module('starter', ['ionic', 'ngRoute', 'ngAnimate', 'starter.services', 'starter.controllers'])
1+
var sideMenuApp = angular.module('sideMenuApp', ['ionic', 'ngRoute', 'sideMenuApp.controllers', 'sideMenuApp.services']);
72

8-
.config(function ($compileProvider){
9-
// Needed for routing to work
10-
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
3+
sideMenuApp.config(function ($compileProvider) {
4+
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
115
})
126

13-
.config(function($routeProvider, $locationProvider) {
14-
15-
// Set up the initial routes that our app will respond to.
16-
// These are then tied up to our nav router which animates and
17-
// updates a navigation bar
18-
$routeProvider.when('/home', {
19-
templateUrl: 'templates/app.html',
20-
controller: 'AppCtrl'
21-
});
22-
23-
// if the url matches something like /pet/2 then this route
24-
// will fire off the PetCtrl controller (controllers.js)
25-
$routeProvider.when('/pet/:petId', {
26-
templateUrl: 'templates/pet.html',
27-
controller: 'PetCtrl'
28-
});
29-
30-
// if none of the above routes are met, use this fallback
31-
// which executes the 'AppCtrl' controller (controllers.js)
32-
$routeProvider.otherwise({
33-
redirectTo: '/home'
34-
});
35-
36-
});
37-
7+
sideMenuApp.config(['$routeProvider', function ($routeProvider, $locationProvider) {
8+
$routeProvider
9+
.when('/one', {
10+
controller: 'OneController',
11+
templateUrl: 'templates/one.html'
12+
})
13+
.when('/two', {
14+
controller: 'TwoController',
15+
templateUrl: 'templates/two.html'
16+
})
17+
.when('/three', {
18+
controller: 'ThreeController',
19+
templateUrl: 'templates/three.html'
20+
})
21+
.otherwise({ redirectTo: '/one' });
22+
}]);

‎www/js/controllers.js‎

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,22 @@
1-
angular.module('starter.controllers', [])
1+
angular.module('sideMenuApp.controllers', [])
22

3-
.controller('AppCtrl', function($scope) {
4-
// Main app controller, empty for the example
5-
})
3+
.controller('MenuController', function ($scope, MenuService) {
4+
// "MenuService" is a service returning mock data (services.js)
5+
$scope.list = MenuService.all();
66

7-
// A simple controller that fetches a list of data
8-
.controller('PetsTabCtrl', function($scope, Pets) {
9-
// "Pets" is a service returning mock data (services.js)
10-
$scope.pets = Pets.all();
7+
$scope.openLeft = function () {
8+
$scope.sideMenuController.toggleLeft();
9+
};
10+
})
1111

12-
$scope.$on('tab.shown', function() {
13-
// Might do a load here
14-
});
15-
$scope.$on('tab.hidden', function() {
16-
// Might recycle content here
17-
});
18-
})
12+
.controller('OneController', function ($scope) {
13+
$scope.title = "Page One Title";
14+
})
1915

20-
// A simple controller that shows a tapped item's data
21-
.controller('PetCtrl', function($scope, $routeParams, Pets) {
22-
// "Pets" is a service returning mock data (services.js)
23-
$scope.pet = Pets.get($routeParams.petId);
24-
});
16+
.controller('TwoController', function ($scope) {
17+
$scope.title = "Page Two Title";
18+
})
19+
20+
.controller('ThreeController', function ($scope) {
21+
$scope.title = "Page Three Title";
22+
});

‎www/js/services.js‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,19 @@
1-
angular.module('starter.services', [])
1+
angular.module('sideMenuApp.services', [])
22

33
/**
44
* A simple example service that returns some data.
55
*/
6-
.factory('Pets', function() {
7-
// Might use a resource here that returns a JSON array
6+
.factory('MenuService', function() {
87

9-
// Some fake testing data
10-
var pets = [
11-
{ id: 0, title: 'Cats', description: 'Furry little creatures. Obsessed with plotting assassination, but never following through on it.' },
12-
{ id: 1, title: 'Dogs', description: 'Lovable. Loyal almost to a fault. Smarter than they let on.' },
13-
{ id: 2, title: 'Turtles', description: 'Everyone likes turtles.' },
14-
{ id: 3, title: 'Sharks', description: 'An advanced pet. Needs millions of gallons of salt water. Will happily eat you.' }
8+
var menuItems = [
9+
{ text: 'Page One', iconClass: 'icon ion-map', link: '#/one'},
10+
{ text: 'Page Two', iconClass: 'icon ion-gear-b', link: '#/two'},
11+
{ text: 'Page Three', iconClass: 'icon ion-star', link: '#/three'}
1512
];
1613

1714
return {
1815
all: function() {
19-
return pets;
20-
},
21-
get: function(petId) {
22-
// Simple index lookup
23-
return pets[petId];
16+
return menuItems;
2417
}
2518
}
2619
});

‎www/templates/app.html‎

Lines changed: 0 additions & 57 deletions
This file was deleted.

‎www/templates/one.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<nav-page id="one" ng-controller="OneController">
2+
3+
<div class="content has-header">
4+
5+
<h2>{{title}}</h2>
6+
7+
</div>
8+
</nav-page>

‎www/templates/pet.html‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎www/templates/three.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<nav-page id="three" ng-controller="ThreeController">
2+
3+
<div class="content has-header">
4+
5+
<h2>{{title}}</h2>
6+
7+
</div>
8+
</nav-page>

0 commit comments

Comments
 (0)