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.
Related
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.
I have a problem with resolve and my nested view is not loading because ot that. I don't see where is the problem. This was working with ng-route.
Here is my situation. We should see "View3" text bellow other tow. If you remove the resolve it will work.
[http://plnkr.co/edit/p483wWVSp30LGiQMuk1r?p=preview][1]
[1]: http://plnkr.co/edit/p483wWVSp30LGiQMuk1r?p=preview
Here is my State with Resolve. The problem is that i used $route as parameter. $route is averrable for ng-route module.
.state('test.subs.quest', {
url: '/:bob',
views: {
'quest#test': {
template: "View3",
controller: function($stateParams) {
console.log($stateParams);
}
},
},
resolve: {
Questions: function(Questionnaire, $route) {
console.log('any body here ?');
return Questionnaire.Get($route.current.params.slug);
}
}
});
and it should be like this:
.state('categories.category.questionnaire', {
url: '/:slug',
views:{
"main#":{
template: '<div compilehtml="html"></div>',
controller: 'QuestionnaireController',
}
},
resolve: {
Questions: function(Questionnaire, $stateParams ) {
return Questionnaire.Get($stateParams.slug);
}
}
})
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; });
}
}
after I did the update to angular 1.3 I'm not able to reach the controllers and views, they simply doesn't load.
the states in my root works perfectly, this is my app.js
$stateProvider.state("root",
{
url: '',
abstract: true,
views: {
'footer#': {
templateUrl: "/partial/footer/footer.html",
},
'header#': {
templateUrl: "/partial/header/header.html",
}
}
}).state('root.home', {
url: '/index',
views: {
'container#': {
templateUrl: '/partial/index/index.html',
controller: 'IndexCtrl'
}
}
}
).state('root.welcome', {
url: '/index/:status',
views: {
'container#': {
templateUrl: '/partial/index/index.html',
controller: 'IndexCtrl'
}
}
});
an also my configuration:
$urlRouterProvider.otherwise('index');
$locationProvider.hashPrefix('!');
$locationProvider.html5Mode({ enabled: false });
by after doing a stage.go or just by typing the url, I'm not able to reach any route in these states:
$stateProvider.state("candidate",
{
url: '',
abstract: true,
views: {
'footer#': {
templateUrl: "/partial/footer/footer.html"
},
'header#': {
templateUrl: "/user/partial/user.header/user.header.html",
},
'sideBar#': {
templateUrl: '/user/partial/user.sidebar/user.sidebar.html',
controller: 'SidebarCtrl',
resolve: {
user: 'currentUser'
}
},
'navBar#': {
templateUrl: '/user/partial/navbar/navbar.html'
}
}
}).state('candidate.dashboard',
{
url: '/dashboard',
views: {
'container#': {
templateUrl: '/user/partial/user.dashboard/user.dashboard.html',
controller: 'DashboardCtrl',
resolve: {
dashboardinfo: function ($resource, tracker) {
var resourceGet = $resource('/user/dashboard');
var promise = resourceGet.get().$promise;
tracker.addPromise(promise);
return promise;
}
}
}
}
})
I've spent a couple of hours trying to figure this out without any luck, maybe it's just a small detail I'm missing, any advice will be more than welcome.
PS: I'm using v0.2.12-pre1
I tried to replicate the issue, mentioned above in this working plunker. All the code is almost unchanged, I just used a custom version of UI-Router. The reason is this reported and known bug:
Impossible to disable html5Mode with angular 1.3.0-rc.3 #1397 (small cite:)
Due to: angular/angular.js#dc3de7f
the html5mode-check in urlRouter.js [line 383] is no longer correct. And thus it's impossible to disable html5mode.
A quick fix could be:
var isHtml5 = $locationProvider.html5Mode();
if (angular.isObject(isHtml5)) {
isHtml5 = isHtml5.enabled;
}
And this (the code above) is the change I made. Nothing else. All the code started to work then...
Check also this answer
ui-router not producing correct href attribute in angular
for a Chris T link to fixed version...
it turns out that the resolve method was failing, I'm using angular promise tracker
var resourceGet = $resource('/user/dashboard');
var promise = resourceGet.get().$promise;
tracker.addPromise(promise); <-- fails here
return promise;
it seems like resources and promises have breaking changes and my implementation could be deprecated.
Angular started off easy to understand but today I'm completely lost and would appreciated any help that is offered here for this problem I've come across.
So I have a two column page, one side the filters and the other the list of things to be filtered. This page is created using the bit of html injected in to the DOM. I have a filter template and a list template and they both have their own controllers (filterCtrl and filterCtrl).
I understood that I needed to seperate the http request for the controllers in to factories, so at the moment an example factory and controller in my app look like this.
fpApp.controller('listController', ['$scope', 'eventsFactory',
function($scope, eventsFactory) {
eventsFactory.eventList().then(
function(data){
$scope.events = data;
}
);
}
]);
and
fpApp.factory('eventsFactory', function ( $http ) {
return {
eventList: function() {
return $http.get('/js/db/events.json')
.then(
function(result) {
return result.data;
});
}
};
});
at the moment every thing is grand, I have a interface built up from partials and everything is outputting what I need. My problem is that I need to apply those filters to the list but have no idea how to get the information out of one controller in to the other controller or even one template to the other.. Once I'm able to get data from one to the other ill be good.
fpApp.config(function($stateProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/grid");
//
// Now set up the states
$stateProvider
.state('grid', {
url: '/grid',
views: {
// the main template will be placed here (relatively named)
'': { templateUrl: '/templates/grid.html' },
'filerList#grid': {
templateUrl: '/templates/partials/filterList.html',
controller: 'filterCtrl'
},
'viewSwitch#grid': {
templateUrl: '/templates/partials/viewSwitch.html'
},
'eventList#grid': {
templateUrl: '/templates/partials/eventList.html',
controller: 'listController'
}
}
})
.state('list', {
url: '/list',
views: {
// the main template will be placed here (relatively named)
'': { templateUrl: '/templates/list.html' },
'filerList#list': {
templateUrl: '/templates/partials/filterList.html',
controller: 'filterCtrl'
},
'viewSwitch#list': {
templateUrl: '/templates/partials/viewSwitch.html'
},
'eventList#list': {
templateUrl: '/templates/partials/eventList.html',
controller: 'listController'
}
}
});
});
So in summary how do I affect the list controller when the user is clicking filters in the filterController?
Thank you for your time in advance.