ui-router resolving before a controller not working properly - angularjs

My state definition looks like:
.state('repository', {
url: '/repository/:host/:owner/:repository',
views: {
appView: {
templateUrl: '/templates/app/repository.html'
},
'repositoryView#repository': {
templateUrl: '/templates/app/_repositoryAnalytics.html'
}
},
resolve: {
resolvedRepository: [
'$stateParams', 'RepositoryService', function($stateParams, RepositoryService) {
console.log(RepositoryService.find($stateParams.host, $stateParams.owner, $stateParams.repository));
return 1;
}
]
},
controller: 'AnalyticsController'
});
However, it hands and never gets to the AnalyticsController. If I remove the resolve, then it works just fine (except, of course, I don't have the resolved value).
I did return 1 for now just to see if it would return something without worrying about promises. I did the console.log to see if it hit, and it does not.

I created update of the prvious plunker here. All is working if all the parts are as well. Your resolve code is ok (it could really return just a value). The only thing different is:
The controller belongs to the view === { views : { viewName : { template, controller}}}
Controller should not (cannot) be defined at the state level. It simply is there to do the MVC stuff...
$stateProvider.state('repository', {
url: '/:host/:owner/:repository',
views: {
appView: {
template: '<div><h1>Repository</h1><div ui-view="repositoryView" ></div>',
controller: 'AnalyticsController', // here is new position
}
},
// removed from here
// controller: 'AnalyticsController',
resolve: {
resolvedRepository: [
'$stateParams', 'RepositoryService', function($stateParams, RepositoryService) {
console.log(RepositoryService.find($stateParams.host, $stateParams.owner, $stateParams.repository));
return 1;
}
]
},
Check it in action here

If you want to return a value for testing purposes, you need to do it in an object, see the first example here: https://github.com/angular-ui/ui-router/wiki#resolve
resolve: {
resolvedRepository: [
'$stateParams',
'RepositoryService',
function($stateParams, RepositoryService) {
return {'value': 1};
}
]
}
If that won't work, try leaving out your RepositoryService to check if that's the problem:
resolve: {
resolvedRepository: [
'$stateParams',
function($stateParams) {
return {'value': 1};
}
]
}

Related

angularJS $stateProvider - resolve $scope

I'm trying to resolve $scope for component-usage reasons but it seems to be a problem... please look at the code and let me know if you see a problem or have a different idea of how to implement it.
angular.module('app').config(
function ($stateProvider) {
$stateProvider.state('home', {
url: '/home',
views: {
'': {
template: `<my-comp user-logged-in="userModel"></my-comp>`
}
},
resolve: {
'$scope': function ($rootScope) {
var scope = $rootScope.$new();
scope.userModel = {userId:1, name:'user'};
return scope;
}
}
})
});
As you can see I'm trying to pass the userModel's data directly to the component controller, but it fails...
Currently I'm using the following logic which work's fine but i'm trying something new :)
views: {
'': {
template: `<my-comp user-logged-in="$ctrl.userModel"></my-comp>`,
controller: function (userLoggedIn) {
this.userModel = userLoggedIn;
},
controllerAs: '$ctrl'
}
},
resolve: {
userLoggedIn: function (userLoggedIn) {
return userLoggedIn;
}
}
Please advise.

Share resolve in Angular UI Router

I have various states that use the same resolve to load a timeLog into my controller $scope before the controller loads. I would like to not reproduce this code but share it between these views. I'm fairly new to JS frameworks, and especially Angular JS.
I'm having a hard time googling this and not finding any decent information. Maybe I'm searching incorrectly or not thinking about this correctly. Any Suggestions?
.config(function($stateProvider) {
$stateProvider
.state('tab.edit-log-summary', {
url: '/logs/edit-log-summary/:timeLogId',
views: {
'tab-logs': {
templateUrl: 'templates/logs/edit-log-summary.html',
controller: 'EditLogSummaryCtrl'
}
},
resolve: {
timeLog: function(config, $stateParams, DailyLog) {
return DailyLog.get({id: $stateParams.timeLogId});
},
}
})
.state('tab.edit-time-log', {
url: '/logs/edit-time-log/:timeLogId',
views: {
'tab-logs': {
templateUrl: 'templates/logs/edit-time-log.html',
controller: 'EditTimeLogCtrl'
}
},
resolve: {
timeLog: function(config, $stateParams, DailyLog) {
return DailyLog.get({id: $stateParams.timeLogId});
},
}
})
})
This really goes down to vanilla Javascript. The resolves are objects. Just define them as a single object somewhere above and pass it to the resolve property each time.
.config(['$stateProvider',function($stateProvider) {
var timeLogResolve = {
timeLog: ['config','$stateParams','DailyLog',function(config, $stateParams, DailyLog) {
return DailyLog.get({id: $stateParams.timeLogId});
}]
};
$stateProvider
.state('tab.edit-log-summary', {
url: '/logs/edit-log-summary/:timeLogId',
views: {
'tab-logs': {
templateUrl: 'templates/logs/edit-log-summary.html',
controller: 'EditLogSummaryCtrl'
}
},
resolve: timeLogResolve,
}
})
.state('tab.edit-time-log', {
url: '/logs/edit-time-log/:timeLogId',
views: {
'tab-logs': {
templateUrl: 'templates/logs/edit-time-log.html',
controller: 'EditTimeLogCtrl'
}
},
resolve: timeLogResolve,
}
})
}])
One suggestion- use inline array notation for providing dependencies. This helps protect your code from breaking if you minify it. I did that myself in the demo above, but I leave it to your discretion to keep it.

uiRouter not setting values when I change state

So I would have thought this would be easy however I am obviously doing something wrong, no matter what I do I can't get the "personId" variable in the conttroller when I change state. I can see it in the URL so you think it would be OK but it's always undefined. Hopefully someone can see the mistake - here is the config for the state
$stateProvider.state('quickScreen', {
params: {
hideAjaxContainer: "true",
personId: {}
},
//url: "/Components/QuickScreen/{personId}",
url: "/Components/QuickScreen/:personId",
views: {
angularContentContainer: {
templateUrl: "/Components/QuickScreen/index.html",
controller: "quickScreenController",
resolve: {
name: function ($stateParams) {
return $stateParams.personId;
}
}
}
}
});
and this is the controller
var quickScreenController = function ($scope, $stateParams) {
console.log("quickScreenController loaded: " + $stateParams.personId);
};
It is possible that because my URL's end up looking like this "http://localhost:1790/Search2#/Components/QuickScreen/5a114c4f-44c2-477a-97e5-a19500995016" it doesn't work but I don't know. Thanks...
I do not see any bad in your syntax. Even more, I created working plunker here and this is working
$stateProvider.state('quickScreen', {
params: {
hideAjaxContainer: "true",
personId: {}
},
//url: "/Components/QuickScreen/{personId}",
url: "/Components/QuickScreen/:personId",
views: {
angularContentContainer: {
templateUrl: 'tpl.html',
//templateUrl: "/Components/QuickScreen/index.html",
controller: "quickScreenController",
resolve: {
name: function($stateParams) {
return $stateParams.personId;
}
}
}
}
});
Check it here. If this still won't help, update that plunker to reproduce the issue... ready to assist...

Angularjs ui-router abstract state with resolve

Is it possible to make an abstract state with ui-router that needs to resolve data? I need to load the top half of a page with profile info, and then have a sub-nav that loads other details at the bottom of the page. The idea is that the abstract state would load the profile info every time regardless of which child state I am on. It doesn't seem to work.
Example:
.state('app.profile', {
abstract: true,
url: 'user/:username',
views: {
content: {
templateUrl: 'views/frontend/profile.html',
controller: 'ProfileCtrl',
resolve: {
data: ['$stateParams', 'ProfileService', function ($stateParams, ProfileService) {
var username = $stateParams.username;
return ProfileService.getProfile(username);
}]
}
}
}
})
.state('app.profile.something', {
url: '',
views: {
profile: {
templateUrl: 'views/frontend/profile.something.html',
controller: 'ProfileCtrl',
resolve: {
data: ['$stateParams', 'ProfileService', function ($stateParams, ProfileService) {
var username = $stateParams.username;
return ProfileService.getProfileSomething(username);
}]
}
}
}
})
Solution here is to distinguish the names of the resolved data. Check this answer:
angular ui-route state parent and resolve (nested resolves)
And its plunker
So in our case we would need this change in parent
resolve: {
dataParent: ['$stateParams', 'ProfileService', function ($stateParams, ProfileService) {
var username = $stateParams.username;
return ProfileService.getProfile(username);
}]
}
and this in child
resolve: {
dataChild: ['$stateParams', 'ProfileService', function ($stateParams, ProfileService) {
var username = $stateParams.username;
return ProfileService.getProfileSomething(username);
}]
}
so, instead of working with resolve : { data: ... } in parent and child we would have these:
// parent state
resolve : { dataParent: ... }
// child state
resolve : { dataChild: ... }
One working example should be better than other words...

Angular UI router not resolving injected parameters

So consider the following fragment from my angularUI routing setup. I am navigating to the route /category/manage/4/details (for example). I expect 'category' to be resolved before the relevant controller loads, and indeed it is to the extent that I can put a breakpoint inside the resolve function that returns the category from the category service and see that the category has been returned. Now putting another breakpoint inside the controller itself I can see that 'category' is always undefined. It is not injected by UI router.
Can anyone see the problem? It may be somewhere other than in the code I've provided but as I have no errors when I run the code, it's impossible to tell where the source of the issue might lie. Typical js silent failures!
.state('category.manage', {
url: '/manage',
templateUrl: '/main/category/tree',
controller: 'CategoryCtrl'
})
.state('category.manage.view', {
abstract: true,
url: '/{categoryId:[0-9]*}',
resolve: {
category: ['CategoryService', '$stateParams', function (CategoryService, $stateParams) {
return CategoryService.getCategory($stateParams.categoryId).then(returnData); //this line runs before the controller is instantiated
}]
},
views: {
'category-content': {
templateUrl: '/main/category/ribbon',
controller: ['$scope', 'category', function ($scope, category) {
$scope.category = category; //category is always undefined, i.e., UI router is not injecting it
}]
}
},
})
.state('category.manage.view.details', {
url: '/details',
data: { mode: 'view' },
templateUrl: '/main/category/details',
controller: 'CategoryDetailsCtrl as details'
})
The concept is working. I created working plunker here. The changes is here
instead of this
resolve: {
category: ['CategoryService', '$stateParams', function (CategoryService, $stateParams) {
//this line runs before the controller is instantiated
return CategoryService.getCategory($stateParams.categoryId).then(returnData);
}]
},
I just returned the result of the getCategory...
resolve: {
category: ['CategoryService', '$stateParams', function (CategoryService, $stateParams) {
return CategoryService.getCategory($stateParams.categoryId); // not then
}]
},
with naive service implementation:
.factory('CategoryService', function() {return {
getCategory : function(id){
return { category : 'SuperClass', categoryId: id };
}
}});
even if that would be a promise... resolve will wait until it is processed...
.factory('CategoryService', function($timeout) {return {
getCategory : function(id){
return $timeout(function() {
return { category : 'SuperClass', categoryId: id };
}, 500);
}
}});

Resources