Hi i'm trying to pass a parameter from page A to B.let's say you get a name from user in page A and want to show it in page B.
I Googled a lot but there is not a working result so i can see how all parts work together.
Q :I know i need to use $stateParams here but how it's unclear for me.
Thanks is advance.
Below is an example of state params being used:
var app = angular.module('app', [])
app.config(function($stateProvider){
$stateProvider
.state('sample', {
url: '/sample/:name',
templateUrl: '.sampleView.html',
controller: 'SampleController'
})
app.controller('SampleController', function($stateParams) {
//access params by using $stateParams.<param name>
var name = $stateParams.name;
}
The scenario you described sounds more like something where you would want to use a factory/service or maybe even some browser caching.
Related
So, I have an HTML page, /profile#IDGoesHere which is tied an an ng-app. The ng-app has three columns (with Bootstrap) and the middle of which is utilising Angular's ng-view.
So it's something like this:
/profile#IDGoesHere (and within it):
All Activity
Posts
Likes
Dislikes
etc
The href links are set on the HTML page outside of the ng-view so when I go into the /profile#IDGoesHere page, I set the userID into a variable using a service. Like below:
profileApp.service('globalParams', function() {
var profileID = '';
var user = {};
return {
getProfileID: function() {
return profileID;
},
setProfileID: function(value) {
profileID = value;
}
};
});
I pass the 'globalParams' service into each controller as I need to access the profileID in order to make further calls to get the specific data for the user.
My Angular Router looks like this:
$routeProvider
.when('/profile:id', {
templateUrl : 'partial/profile/feed.html',
controller : 'mainController',
resolve:{
myData: ['$http', function($http){
return $http.get('/session');
}]
}
})
.when('/posts', {templateUrl: 'partial/profile/posts.html', controller: 'postsController'})
.when('/agreed', {templateUrl: 'partial/profile/likes.html', controller: 'likesController'})
.when('/disagreed', {templateUrl: 'partial/profile/dislikes.html', controller: 'dislikesController'})
.when('/comments', {templateUrl: 'partial/profile/comments.html', controller: 'commentsController'});
});
Now the problem, the links to Posts, Likes, Dislikes etc do not have the profileID in them as they are set when you go to the main route, /profile#IDGoesHere.
This works when I am on the page and keep navigating by using the 'globalParams' service however, if I were to refresh the page when I was on one of the sub-pages, the data is lost.
Note: I can't make the whole page to reload which is why I used the ng-view. I could fix this by doing that but it will defeat the purpose of a single page application.
Does anyone have a good idea on this? Been pulling my hair but feel I am missing something very obvious.
Thanks in advance
Edit: as it was causing some confusion, I have added a screenshot to demonstrate how it looks like:
Got it fixed by attaching the whole < body > to a parent controller and under that controller, I used the $window.location.href and split the ID from URL and then added it to the service, which I could then add to the outer hrefs for my sub-pages, essentially making the sub-pages to have a routeParam as well
I have a link on my page (inside the scope of angular app 1) which changes the hash location
/app/#/location
I have another angular app (2) which is not reacting to the hash location change in the way I expect it to (ie by firing locationChangeStart, and changing state). I don't fully understand why. Anybody can explain this to me?
Edit 1: yes, there are two angular apps on the page, of different angular versions, both bootstrapped (sigh, don't ask). The ui-router configuration looks like this:
$urlRouterProvider.otherwise(($injector) => {
let $state = $injector.get("$state");
[... snip ...]
$state.go('list');
});
// Now set up the states
$stateProvider
.state('messaging', {
url: "/messaging/{param}",
templateUrl: "messaging.html",
controller: 'MessagingController'
})
.state('list', {
url: "/list",
templateUrl: "list.html",
controller: 'ListController'
});
Nothing really too fancy here, and before anybody asks, yes, I do need to check on a state in the otherwise.
The bootstrapping looks like this:
angular.element(document).ready(function() {
angular.element(document.getElementById('app-bootstrap')).prepend('<div ui-view></div>');
angular.bootstrap(document.getElementById('app-bootstrap'), ['app']);
});
Edit 2: this seems like it may be not an angular-related issue at all, as using the window 'hashchange' event directly doesn't seem to fire either; I've confirmed that window.onhashchange is the correct function.
(angular 1.4.7)
I use ui-router to be the route,but when I use $state.go(),I can redirect but cannot get the params I've passed,like this
.....
$state.go('detail',{people_id : people_id});
In official APIs,it says that I can pass a map as parameter which will populate $stateParams,but it doesn't work in my app
angular.module('xx').controller('aaaa',['$scope','$stateParams', function($scope, $stateParams){
console.log($stateParams); //empty obj
}])
So what the problem probably is? Thanks
In configuration you need to define url property to accept parameter
$stateProvider.state('detail', {
url: 'people/detail/:id'
...
});
Hi friends i know how to go to an another page in jquery, I need the same in angular js.
$('#leaderboar').on('click',function(){
document.location.href='HomeScreen.html';
});
Can any one help me out in this.
Thanks
If you just want to redirect to a page(as in your jQuery code above) you can use :-
$location.path('/home');
You can also use $window as below :-
$window.location.href = 'HomeScreen.html'
From Angular documentation :-
$location does not cause a full page reload when the browser URL is changed. To reload the page after changing the URL, use the lower-level API, $window.location.href.
$location.path('/other-page');
...
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/other-page', { templateUrl: 'other-page.html', controller: 'PageCtrl' })
I think the title indicates what I want to achieve quite well. As an example, say, I have a route parameter:
$routeProvider.when("/:id/page", {
controller: "pageCtrl",
templateUrl: "page.html"
});
And in the controller, I want to change it and refresh the page. Is there such a way? For example:
$routeParams.id=12;
$route.reload();
Thanks for any help in advance...
Note:
Currently I use this way:
var pathArray = $location.path().split("/");
pathArray[1] = 12;
$location.path(pathArray.join("/"));
But I'm looking for a more generic way.