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
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 navigate to my state with providing some parameters to it.
Here is my code:
State:
a = angular.module('app.panel', []);
a.config(
function ($stateProvider) {
$stateProvider
.state('body.new', {
url: 'new',
templateUrl:function($stateParams){
return 'http://localhost/' + 'new.aspx?panel_id=' + $stateParams.panel_id
},
controller: 'newController'
});
});
I am navigating to this state like this:
var url = $state.href('body.new', { parameter: $scope.parameters });
$window.open(url, '_blank');
In the state $stateParams is undefined. If I am doing it in a wrong way what the correct way might be?
Thanks for help.
Update 1.
I have modified my code to this:
url: 'new/:panel_id',
params: {
parameter: null,
},
But my problem is that I am still getting $stateParams undefined.
Just cutting the code down a little bit, it needs altering to this:
a.config(
function ($stateProvider, $stateParams) {
$stateProvider ...
It's complaining about $stateParams because you weren't stating it as a dependency.
EDIT:
Or, try this:
a.config(
function ($stateProvider, $state) {
$stateProvider ...
Then you could access it via $state.params.id
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 want to resolve some value before I load the first page of my application, but it kept telling me
Unknown provider: programClassSummaryProvider <- programClassSummary <- HomeCtrl
I pretty sure I did it correctly, because I did the same thing for any other controller and routing. but it is not working for my homepage controller.
It seems like it load the controller first, before it is resolved in the routing. Anything wrong with my code?
In routing.js
$stateProvider
.state('home', {
url: '/home',
controller: 'HomeCtrl',
controllerAs: 'vm',
templateUrl: 'index_main.html',
resolve: {
programClassSummary: ['GroupDataFactory', function (groupDf) {
return groupDf.getProgramClassSummary();
}]
},
ncyBreadcrumb: {
skip: true
}
});
in controller.js
angular
.module('issMccApp')
.controller('HomeCtrl', homeCtrl);
homeCtrl.$inject = ['$scope', '$location', '$state', '$auth', 'programClassSummary'];
/* #ngInject */
function homeCtrl($scope, $location, $state, $auth, programClassSummary) {
var vm = this;
vm.isAuthenticated = isAuthenticated;
vm.programClassSummary = programClassSummary;
if (!$auth.isAuthenticated()) {
$state.go('login');
return;
}
function isAuthenticated() {
return $auth.isAuthenticated();
}
}
in factory.js
function getProgramClassSummary(showAll) {
var query = "";
if (showAll)
query = APIConfigObj.base_url + '/api/group/infor/programclasssummary?all=1';
else
query = APIConfigObj.base_url + '/api/group/infor/programclasssummary';
return $http.get(query)
.success(function (result) {
return result;
})
.error(function (err) {
return err;
})
}
I'd say, we really have to distinguish the UI-Router state world, and angular itself. Reason why is clearly defined here (extracted $resolve from UI-Router API documentation):
$resolve
resolve(invocables, locals, parent, self)
Resolves a set of invocables. An invocable is a function to be invoked via $injector.invoke(), and can have an arbitrary number of dependencies. An invocable can either return a value directly, or a $q promise. If a promise is returned it will be resolved and the resulting value will be used instead. Dependencies of invocables are resolved (in this order of precedence)
from the specified locals
from another invocable that is part of this $resolve call
from an invocable that is inherited from a parent call to $resolve (or recursively
from any ancestor $resolve of that parent).
There is a wroking plunker, which uses this index.html
<body ng-controller="RootCtrl">
a summary for a root:
<pre>{{summary}}</pre>
<ul>
<li>home
<li>other
</ul>
<div ui-view=""></div>
So, here we use some RootCtrl, which won't go through state machine UI-Router, it is angular basic stuff
The root controller must be defined as
.controller('RootCtrl', ['$scope', 'GroupDataFactory', function ($scope, groupDf) {
$scope.summary = groupDf.getProgramClassSummary();
}])
For a state home, we can use different approach, in fact the same as above (simplifed version below)
.state('home', {
url: "/home",
templateUrl: 'tpl.home.html',
resolve: {
programClassSummary: ['GroupDataFactory', function (groupDf) {
return groupDf.getProgramClassSummary();
}]
},
controller: 'HomeCtrl',
})
And its controller is now able to consume the locals
.controller('HomeCtrl', ['$scope', 'programClassSummary', function ($scope, summary) {
$scope.summaryForHome = summary;
}])
Check it in action here
I need to pass a route parameter to the server responding with a template, so I'm trying to use a templateProvider per several articles/other stack overflow docs.
I'm not getting any javascript errors, but the following templateProvider method is never even executed. When the templateUrl property is not commented out, this route works fine.
$stateProvider
.state('org.contacts.add', {
url: '/add',
views: {
'org#': {
// templateUrl: '/templates/issues/add',
controller: 'ContactsAddController',
templateProvider: function($route, $templateCache, $http) {
var url = '/templates/' + $route.current.params.org + '/contacts/add';
$http.get(url, {cache: $templateCache}).then(function(html){
return html;
});
}]
}
}
})
After some experimentation, it seems the $route was causing trouble. Taking that out and using $stateParams at least fires this code/controller.
However, while I see the ajax call firing and the proper html response, it's never loaded to the view.
templateProvider: function ($stateParams, $http, $templateCache) {
var url = '/templates/contacts/add';
$http.get(url, {cache: $templateCache}).then(function(html){
return html;
});
}
I'm guessing you need to return a $promise for this to work. Check out the example used on the UI-Router wiki:
$stateProvider.state('contacts', {
templateProvider: function ($timeout, $stateParams) {
return $timeout(function () {
return '<h1>' + $stateParams.contactId + '</h1>'
}, 100);
}
})
Notice the line that begins with return $timeout(.... Have you tried returning the $promise that is created by doing $http.get()?