Toggle Menu with Angular $routeProvider


#1

Hello guys, I’m newbie with angular and ionic and I’m stuck trying to put a sidemenu on my application, the problem is that I use $routeProvider instead of $stateProvider, so I need to know if I can put a sidemenu on my application working with $route Provider… He’s my code:

my App.js

.config(function ($routeProvider) {
$routeProvider
.when(’/’, {
templateUrl: ‘views/browse.html’,
controller: ‘TaskController’
})
.when(’/post’, {
templateUrl: ‘views/post.html’,
controller: ‘TaskController’
})
.when(’/edit/:taskId’, {
templateUrl: ‘views/edit.html’,
controller: ‘TaskController’
})
.otherwise({
redirectTo: ‘/’
});
});

and my Controller.js

app.controller(‘TaskController’, function($scope, $ionicSideMenuDelegate, $firebase, FURL, $location, $routeParams ) {

$scope.toggleLeft = function(){
$ionicSideMenuDelegate.toggleLeft();
}

var ref = new Firebase(FURL);
var fbTasks = $firebase(ref.child('tasks')).$asArray();
var taskId = $routeParams.taskId;

$scope.tasks = fbTasks;

if(taskId) {
    $scope.selectedTask = getTask(taskId);
}

function getTask(taskId) {
    return $firebase(ref.child('tasks').child(taskId)).$asObject();
};

$scope.postTask = function(task) {
    $scope.tasks.$add(task);
    $location.path('/');
};    

$scope.updateTask = function(task) {
    $scope.selectedTask.$save(task);
    $location.path('/');
};

});

I’ve watched this video https://www.youtube.com/watch?v=MN6vCWp4CdE and not works for me!

I’ll appreciate any help.


#2

While proficient with Angular I too am somewhat new to the Ionic Framework.

Ionic has chosen to use ui-router instead of Angular’s ngRoute.

While you may have some success sticking with ngRoute I suspect that the <ion-nav-*> functionality will not work correctly. Ionic Documentation: ion-nav-view

In my professional role defining the development process for my company’s development staff I was reluctant to use a non-Angular library for routing; however after using ui-router with Ionic I have come to appreciate it’s benefits.

For example I like referencing the controller from the view using ng-contoller="myCtrl as vm" instead of from a angular.module().config() block. After all the view should know about the model, and not the other way around. Using the config() block to map view to controller always felt “dirty”.

I also like how the nested views allow you to abstract the layout from your primary index.html page. Index.html becomes purely a location to place your file references, all look and feel markup is abstracted.

I know this does not directly answer your question, I just suspect that you will encounter more and more issues by not adopting ui-router.


#3

Yes treygood, you’re absolutely right about the problems, but if I’m not adopt this way, I think my app it’s not gonna work like I want, I’ve tried a lot of other ways to accomplish that, but I think that way is the more easy way to get what I want from my app to work.

Thank you so much for your time!


#4

I don’t believe side menus will work unless you use ui-router (they are dependent upon ion-nav-view).

If I understand correctly your issue is obtaining the taskId from the incoming URL?

ui-router has similar functionality as ngRoute, but it’s “$stateParams” instead of “$routeParams”

In your state definition

.state('edit', {
    url: "/edit/:taskId",
    views: {
        'mainContent': {
            templateUrl: 'views/edit.html'
        }
    }
})

Then in your controller

app.controller('TaskController', function($scope, $ionicSideMenuDelegate, $firebase, FURL, $location, $stateParams ) { 
    /* ... */
    var taskId = $stateParams.taskId;
    /* ... */
}

#5

Thanks for reply and yeap, my problem is get the unique ID from URL


#6

I have no words to describe how U illuminate my day… my mind and my fingers… now works flawlessly… Thank U soooooo muchhhhhh for that ---- treygood ----- simple way to do this perfect!!!