.state('cahonas.static_page', {
url: '*url',
templateUrl: '/static/templates/cahonas/static_pages/static_page.html',
controller: 'StaticPageCtrl',
resolve: {
metaTags: function (metaTagsResource, $stateParams) {
return metaTagsResource.get({
page_name: $stateParams.url.replace("//","")
}).$promise;
},
page: function (staticPageResource, $stateParams) {
return staticPageResource.get({
url: $stateParams.url.replace("//","")
}).$promise;
}
}
.factory('staticPageResource', function($resource) {
return $resource('/api/web/static_page/:url/');
})
this is my code so far. keep bumping into "//" which resolves into error and i cant figure it out. does anyone know about this?
Make sure all of dependency module you include in module declaration point (ngResource and angular-ui-router).
In declaration of factory use strict depedency injection. In configuration area its hard to find problem because it was not throw any error.
app.factroy('staticPageResource', ['$resource', function($resource) {
return $resource('/api/web/static_page/:url/');
}]);
And also try with rename state name by removing .
Related
Trying to access a service in the resolve:
angular
.module('app', ['ui.router', 'templates'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/views/home.html',
controller: 'Home as home',
resolve: {
productIndex: function (ProductService) {
debugger;
// return ProductService.getProductsIndex();
}
}
});
$urlRouterProvider.otherwise('/');
});
When the code above is run, the debugger never hits and nothing comes-up in the console. When ProductService is removed as a parameter, the debugger hits, but clearly, the service can't be called. If possible I would also prefer to only make http calls from services.
I've been looking around for a while now, and only see working examples of similar injections. Even looking back at previous (working) projects, I can't see any difference with what was done above. My guess is that something might be wrong somewhere else. Any help would be great!
For the sake of completeness:
function ProductService($http) {
this.getProductsIndex = function() {
// debugger;
// return $http.get('/products');
};
}
angular
.module('app')
.controller('ProductService', ProductService);
Right now your services is being registered as a controller. you should register it as a service instead. e.g.
angular
.module('app')
.service('ProductService', ProductService);
var app = angular.module('*****')
app.service('ProductService', function() {
return {
getData: function($q, $http) {
var defer = $q.defer();
$http.get('****').success(function(data) {
defer.resolve(data);
});
return defer.promise;
}
};
});
abou resolves
resolve takes either the string of a service or a function returning a value to be injected
resolve: {
productIndex: function (ProductService) {
// your stuff goes here.
}
}
this shouls work.. :)
I am trying to use a parameter in my templateURL. here is relative code:
a = angular.module('newmodule', []);
a.config(['$stateProvider',
function ($stateProvider, $rootScope) {
$stateProvider
.state('body.new', {
url: 'new?panelid',
params: {
'panelid': function ($rootScope) {
return $rootScope.panelid;
}
},
templateUrl: function($stateParams){
return getBaseUrl() + 'newpage.aspx?panel_id='+ $stateParams.panelid;
},
controller: 'newController'
});
}]);
The navigation to this state is done like this:
var url = $state.href('body.new');
$window.open(url, '_blank');
from another state's controller.
I am checking what's been sent to the server and see that $stateParams.panelid is undefined. But, the interesting thing is if instead of returning $rootScope.panelid I return a value like '44' then it works fine. Can someone please explain what's exactly is wrong here.
Thanks
The docs and stuff I've seen show how to use the "resolve" option but how do you get the data back?
I'm using meanjs.org v0.3.x
My route:
//Setting up route
angular.module('mymodule').config(['$stateProvider',
function($stateProvider) {
//start routing
$stateProvider.
state('some-path', {
url: '/some-url',
templateUrl: 'modules/mymodule/views/my-controller.client.view.html',
resolve: {
DataService: 'DataService',
promiseToResolve: function(DataService){
return DataService.get({});
}
}
});
}
]);
Now how exactly to I access the "promiseToResolve" data in my controller? Docs don't seem to mention this.
Also, please let me know if the above code would break when it is minified.
angular.module('mymodule').config(['$stateProvider',
function($stateProvider) {
//start routing
$stateProvider.
state('some-path', {
url: '/some-url',
templateUrl: 'modules/mymodule/views/my-controller.client.view.html',
controller: mySpecialController,
resolve: {
promiseToResolve: ['DataService', function(DataService) {
return DataService.get({});
}]
}
});
}
]);
You don't need the specific DataService line, so it's removed, and now in your controller (which you've specified in the above code) you can directly access the resolved data:
angular.module('mymodule').controller('mySpecialController', ['$scope', 'promiseToResolve',
function ($scope, promiseToResolve) {
$scope.dataResults = promiseToResolve.data;
}
]);
As for minification, here we use ngInject which is great.
I've got stuck with the following route configuration:
app.config(function ($routeProvider) {
$routeProvider
.when('/common/query/:query', {
templateUrl: 'common.html',
controller: 'UsualResultsController',
resolve: {
UsualResults: usualCntrl.performSearch
}
})
.when('/people/query/:query', {
template: 'people.html',
controller: 'PeopleResultsController',
resolve: {
PeopleResults: peopleCntrl.performSearch
}
})
.when('/people/query/:query/department/:department', {
template: people.html',
controller: 'PeopleResultsController',
resolve: {
PeopleResults: peopleCntrl.performSearch
}
})
.otherwise({
redirectTo: '/'
});
});
and it appears that every route switching is resolved with the 'resolve' object from the last definition.
Here is a simplified plunkr.
Actually, I understand that that in routing order matters and all regex paths should be defined after static paths, but couldn't apply it to my situation.
Moreover, I suppose that the last two route definitions could be combined into one, but again I couldn't grasp, how to achieve it.
I'll be grateful for your help, guys!
app.controller does not return the controller, but the module (same as angular.module).
In your example the following:
peopleCntrl.performSearch = function($timeout, $q) { ... };
Will replace the the function defined by:
usualCntrl.performSearch = function($timeout, $q) { ... };
Since both peopleCntrl and usualCntrl refer to the same module object.
While probably not the cleanest solution, it will work if you don't use the same name for the functions.
Another solution would be the following:
var usualCntrl = function UsualResultsController($scope) { ... };
app.controller('UsualResultsController', ['$scope', usualCntrl]);
usualCntrl.performSearch = function($timeout, $q) { ... };
Demo: http://plnkr.co/edit/jx6HYDXggsaq3qMOdF8c?p=preview
I am a bit confused. I am trying to get my resolve data in my controller. I read about these (and more) solutions, but can not get it working. It is all about the "spages".
http://jsfiddle.net/Avb4U/1/
http://www.jvandemo.com/how-to-resolve-angularjs-resources-with-ui-router/#
Angularjs resolve with controller as string
I hope this is not a duplicate question, because nothing did work for me from these solutions.
This is (part of all states) my state:
.state('root.search', {
url: '/search/:searchterm',
onEnter: ['$rootScope', function($rootScope) {
$rootScope.bodyclass = 'search';
}],
resolve : {
spages: ['$stateParams', 'SearchPages', function($stateParams, SearchPages) {
return SearchPages.get({'searchterm': $stateParams.searchterm});
}]
},
controller: 'searchCtrl',
views: {
'#': {
templateUrl: templateUrlFunction('search')
}
}
})
This is part of my controller:
app.controller('searchCtrl', ['$scope', 'spages', function($scope, spages) {
// spages should be already resolved and injected here
}
And this is my factory for the searchpages:
app.factory('SearchPages', ['$resource', function($resource) {
return $resource(null, {},
{
get: {
method: 'GET',
url: '/json/search/get/searchterm/:searchterm',
params: {searchterm: '#searchterm'}
}
});
}]);
Asfar as i do understand, spages should be resolved and injected in the controller now. But it is not.
The error i get is:
Error: [$injector:unpr] Unknown provider: spagesProvider <- spages
What do i do wrong? I am still learning...
Ok, what i did not realize is that i also have a controller in my template.
And i read: "You only need to specify controller once, in app.js. The second one, in the html code, is instantiated by the ngController directive, which does not know about `resolve', so it throws an exception."
Change your controller dependency from searchpages to SearchPages.
app.controller('searchCtrl', ['$scope', 'SearchPages', function($scope, searchpages) {
// searchpages should be already resolved and injected here
}