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.
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
.
1 Like
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!
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;
/* ... */
}
Thanks for reply and yeap, my problem is get the unique ID from URL
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!!!