Angular UI Router Question
When $state.go("main.loadbalancer.readonly"); is activated in the resolve block, the main.loadbalancer.vips state controller VipListCtrl (the controller only) still loads after the resolve.
Since the state main.loadbalancer.readonly is activated, how can I keep make the controller VipListCtrl cancel and not load?
I tried using a promise and never having the promise resolve, but then the UI Router seems to stay sit at that resolve forever.
angular.module("main.loadbalancer", ["ui.bootstrap", "ui.router"]).config(function($stateProvider) {
return $stateProvider.state("main.loadbalancer", {
url: "device/:id",
views: {
"content#": {
templateUrl: "loadbalancer/loadbalancer.html",
controller: "LoadBalancerCtrl"
}
}
}).state("main.loadbalancer.vips", {
resolve: {
isDeviceReadOnly: function($state) {
if (!$state.current.data['deviceId']) {
$state.go("main.loadbalancer.readonly"); //THIS IS RAN...NEED CONTROLLER
//VipListCtrl TO NOT RUN AFTERWARDS
}
}
},
url: "/vips",
templateUrl: "loadbalancer/vip-table.html",
controller: "VipListCtrl"
}).state("main.loadbalancer.nodes", {
url: "/nodes",
templateUrl: "loadbalancer/node-table.html",
controller: "NodeListCtrl"
}).state("main.loadbalancer.admin", {
url: "/admin",
templateUrl: "loadbalancer/admin.html",
controller: "AdminCtrl"
}).state("main.loadbalancer.readonly", {
url: "/readonly",
templateUrl: "loadbalancer/readonly.html",
controller: "ReadonlyCtrl"
});
});
resolve: {
isDeviceReadOnly: function($state, $q, $timeout) {
if (!$state.current.data['deviceId']) {
$timeout(function() { $state.go("main.loadbalancer.readonly"); });
return $q.reject("rejection message"); // <-- Gotta reject your resolve
}
}
},
plunk which demonstrates $q.reject cancelling the transition: http://plnkr.co/edit/njJtyVbKD4rDY3OckAF6?p=preview
Related
Ui router looks like:
<div ui-view="test1">
<div ui-view="test2">
My routing:
.state('testsPage', {
url: "/",
// templateUrl: "public/src/settings/settings.php",
views: {
'test1': {
templateUrl: 'public/src/test2.html',
controller: 'test2Controller',
controllerAs: 'vm',
resolve: {
getData: function(testService) {
return testService.getdata();
}
}
},
'test2': {
templateUrl: 'public/src/test1.html',
controller: 'test1ontroller',
controllerAs: 'vm',
resolve: {
getData: function(testService) {
return testService.getdata();
}
}
},
I want to call getData only once and not inject it the each controller
If I do that in each controller it means that I call to getData from server two times in loading.
I tried to use controller inheritance but it ask to inject that service
// Inherit from Base Controller
angular.extend(vm, $controller('baseController', {
getData: getData,
testService: testService,
$rootScope: $rootScope
}));
How can I make it like inheritance?
Do I need to move it to run the function? If yes do I have to use rootScope to get that data in the controller?
Try putting the resolve on the parent:
.state('testsPage', {
url: '/',
views: ...,
resolve: {
getData: function(testService) {
return testService.getdata();
}
}
...
}
You would then need to add getData as a dependancy on each views controller:
// Controller
function test1ontroller(getData) {
}
This code is functional, but it could work better. My question:
How i can insert navDetalle or other views in many states without call controller again.
(function() {
'use strict';
angular
.module('miApp')
.config(routerConfig);
var nav = {
templateUrl: 'app/nav/nav.html',
controller: 'NavController',
controllerAs: 'nav'
};
var navInter = {
templateUrl: 'app/nav/navInter.html',
controller: 'NavController',
controllerAs: 'nav'
};
var navDetalle = {
templateUrl: 'app/navDetalle/navDetalle.html',
controller: 'NavDetalleController',
controllerAs: 'navDetalle'
};
/** #ngInject */
function routerConfig($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
views: {
// the main template will be placed here (relatively named)
'nav': nav,
'carousel': {
templateUrl: 'app/carousel/carousel.html',
controller: 'CarouselController',
controllerAs: 'carousel'
},
'footer':{
templateUrl: 'app/footer/footer.html'
}
}
})
.state('detalle', {
url: '/detalle/:idDetalle',
views:{
'nav': navInter,
'detalle': {
templateUrl: 'app/detalle/detalle.html',
controller: 'DetalleController',
controllerAs: 'detalle'
},
'navdetalle': navDetalle,
'footer':{
templateUrl: 'app/footer/footer.html'
}
}
})
.state('resumen', {
url: '/resumen',
views:{
'nav': navInter,
'navdetalle': navDetalle,
'footer':{
templateUrl: 'app/footer/footer.html'
}
}
})
.state('success', {
url: '/success',
views:{
'nav': navInter,
'success': {
templateUrl: 'app/success/success.html',
controller: 'SuccessController',
controllerAs: 'success'
},
'navdetalle': navDetalle,
'footer':{
templateUrl: 'app/footer/footer.html'
}
}
})
.state('cancel', {
url: '/cancel',
views:{
'nav': navInter,
'navdetalle': navDetalle,
'cancel': {
templateUrl: 'app/cancel/cancel.html',
controller: 'CancelController',
controllerAs: 'cancel'
},
'footer':{
templateUrl: 'app/footer/footer.html'
}
}
});
$urlRouterProvider.otherwise('/');
}
})();
and if you have suggestion on another improvements please comment
I'm not sure if this is possible to prevent executing controller every time. But, I do have another solution. That might work. The Ionic Framework do this internally by preserving controller state.
Create a global controller and add it to <body> or <html> tag so that its scope can be available every time.
app.controller('GlobalController', function($scope) {
var navDetalleCtrlInstantiated = false;
$scope.$on('$stateChangeStart', function(e, toState, toParams) {
if (!navDetalleCtrlInstantiated && toState.views && toState.views.navdetalle) {
// Do the common logic on controller instantiation
// Mark so that we don't have to do the same logic again
navDetalleCtrlInstantiated = true;
}
});
});
In your view:
<body ng-controller="GlobalController">
</body>
And remove logic from your NavDetalleController.
I don't know if what you want is possible. Because ui-router always creates a new instance to the view's controller, and that makes sense cause every single view has your own scope.
I am trying to load a get service JSON function in the main state resolve function so I can store the data to a scope variable.
The account JSON information is relevant because all sub pages are essentially dependent on the information.
--
The below code is partially working. The account resolve function is being successfully called and even the $http returns a promise (state === 0 though). The issue is when the account function resolves the state.controller is never being called.
$stateProvider
.state('app',{
url: '/',
views: {
'header': {
templateUrl: '../views/templates/partials/header.html',
},
'content': {
templateUrl: '../views/templates/partials/content.html'
},
'footer': {
templateUrl: '../views/templates/partials/footer.html',
}
},
resolve: {
account: function($timeout, accountFactory){
//Comment
return $http({method: 'GET', url: '/account.json'});
}
},
controller: ['$scope', 'account', function($scope, account){
// You can be sure that promiseObj is ready to use!
$scope.data = account;
console.log('SCOPE!!!!!');
}],
})
.state('app.accessory', {
url: 'accessory',
views: {
'content#': {
templateUrl: '../views/accessory/listing.html',
controller: 'accessoryListingCtrl',
controllerAs: 'vm'
}
}
})
}]);
Your parent state config is not correct. When using multiple named views A controller does not belong to a state but to a view, so you should move your controller statement to the specific view declaration, or all of them if you need it everywhere.
See here: https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
$stateProvider
.state('report',{
views: {
'filters': {
templateUrl: 'report-filters.html',
controller: function($scope){ ... controller stuff just for filters view ... }
},
'tabledata': {
templateUrl: 'report-table.html',
controller: function($scope){ ... controller stuff just for tabledata view ... }
},
'graph': {
templateUrl: 'report-graph.html',
controller: function($scope){ ... controller stuff just for graph view ... }
},
}
})
I don't know why the controller does not get called. But you can start by making sure that resolve always return data.
resolve: {
account: function($timeout, accountFactory){
//Comment
return $http({method: 'GET', url: '/account.json'})
.$promise.then(
function(data) { return data; },
function(error) { return error; });
}
}
I have a < ion-side-menu > with links to my pages defined here:
app.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$stateProvider.state('content', {
url: "/content",
abstract: true,
templateUrl: "templates/sidemenu.html",
controller: 'SideController'
});
$stateProvider.state('content.home', {
url: "/home",
views: {
'menuContent': {
templateUrl: "templates/home.html",
controller: "HomeController"
}
}
});
$stateProvider.state('content.nearby', {
url: "/nearby",
views: {
'menuContent': {
templateUrl: "templates/nearby.html",
controller: "NearbyController"
}
}
});
$stateProvider.state('content.map', {
url: "/map",
views: {
'menuContent': {
templateUrl: "templates/map.html",
controller: "MapController"
}
}
});
$stateProvider.state('content.radar', {
url: "/radar",
views: {
'menuContent': {
templateUrl: "templates/radar.html",
controller: "RadarController"
}
}
});
$stateProvider.state('content.location-details', {
url: "/location-details/:index",
views: {
'menuContent': {
templateUrl: "templates/location-details.html",
controller: "DetailsController"
}
},
resolve: {
currentLocation: function($stateParams, shareService, NearbyFactory)
{
return NearbyFactory.getLocations()[$stateParams.index];
}
}
});
$urlRouterProvider.otherwise("/content/home");
});
I want to execute a method in my controllers when the user navigates to this page and when the page is left (for loading AJAX data or start listening to some Cordova sensors). Like this:
app.controller("HomeController", function()
{
$scope.onEnter = function(previous_page)
{
...
};
$scope.onExit = function(next_page)
{
...
};
});
I've already tried onEnter and onExit inside the $stateProvider state but afaik I don't have my $scope there.
What is the easiest/best/nicest way to get this functionality? It would be great if I could determine the previous/next page and if the user navigated back/forward. I tried this:
$scope.$on('$routeChangeStart', function(event, next, current)
{
console.log(next);
});
but this didn't work every time and it didn't fire when loading the page. This also seems a bit dirty to me because I'd have to implement this in every single controller.
Thank you!
You can use $ionicView.beforeEnter and beforeLeave.
Simply add this to your HomeController :
app.controller("HomeController", function()
{
$scope.$on('$ionicView.beforeEnter', function() {
//do stuff before enter
});
$scope.$on('$ionicView.beforeLeave', function() {
//do your stuff after leaving
});
});
You can check the docs of the $ionicView here.
You can try this. It works every time when it's loading the page:
$scope.$on('$locationChangeStart', function(event)
{
console.log(event);
});
When using ui-router's $state.go() in my Ionic app, the onEnter method is not called.
The states would be transitioning from tab.settings to tab.queries. The state transitions fine. How do I get the onEnter method to be called from $state.go() call? Does onEnter not get called when entering child views?
Route
$stateProvider
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tab.queries', {
url: '/queries',
views: {
'tab-queries': {
templateUrl: 'templates/tab-queries.html',
controller: 'QueryCtrl',
onEnter: function() {
activate();
}
}
}
})
.state('tab.settings', {
url: '/settings',
views: {
'tab-settings': {
templateUrl: 'templates/tab-settings.html',
controller: 'SettingsCtrl'
}
}
});
SettingsCtrl
vm.removeAll = function() {
Data.removeAll().then(function() {
$state.go('tab.queries');
});
};
QueryCtrl
function activate() {
console.log('Activating');
}
Try moving the onEnter from within the view object up a level to the state object, I've just ran across this same problem and it seemed to work OK for me.
.state('tab.queries', {
url: '/queries',
views: {
'tab-queries': {
templateUrl: 'templates/tab-queries.html',
controller: 'QueryCtrl'
}
},
onEnter: function() {
activate();
}
})