I am new to AngularJS. I am trying to rewrite my site that use JQuery.
In my existing site I use
$(document).on("click",".movieposter",function(){
window.open("moviedetail.html?id="+this.id);
}); to open a detail page of current page.
I am trying to use AngularJS route to get same function. I did my research, but I cold not figure out how to do it. I am stuck in following code.
.state('moviedetail', {
url: "/moviedetail?id",
templateUrl: "views/moviedetail.html",
controller: function ($stateParams) {
alert($stateParams.id); //*** Exists! ***//
}
})
I got url that has id of a movie that is going to use to get movie detail information. How can I pass that movie id to view template that will display detail view. Thanks in advance.
Use state params to pass an object.
ui-sref="movielist({movie: movieDetails})"
Thanks for your answers Vinay and charlietfl. I learned some new knowledge by doing research based on your answer. Using state params to pass an object is a good idea. And I found out about resolve statement too. Nevertheless, I decided to use localStorage instead of passing an object as parameter. I only use state param to pass id of a movie.
Here is html:
<a class="moreInfo" ng-click="save({{movie}})" ui-sref="moviedetail({id: {{movie.id}}})"> Find Out More </a>
Here is save method in movie controller:
$scope.save = function (movie) {
localStorage.setItem(movie.id, JSON.stringify(movie));
}
Here is how I get data in MovieDetail Controller:
var movie = JSON.parse(localStorage.getItem(id));
Related
I am new to angular js and I am trying to add the custom filter to alter the dynamic url inside a state provider.
can't get it to work though,
can anyone let me know where am i going wrong or is the approach correct
I have attached the code for my state provider where I have tried to add the filter
.state('app.gotoPropertyDetails', {
url: 'property-details/:property_id/(:seo_details | camelCaseToHyphens)',
templateUrl: 'views/propertyDetails.html',
controller: 'propertyDetailsCtrl',
params: {property_id: null,seo_details:null}
})
I'm a newbie to Angular. Currently I've a challenge I'm been working for hours. I thought of posting here. The problem is how can I preserve the query string value when the route changes in Angular. I'm using the ui router. The querystring has an uid that will be send in each request which I could able achieve through httpinterceptor. But I really got struck up in preserving the uid in querystring whenever the route changes. Can anyone give some insights on this please?
When using ui router you (usually) specify the url, template and controller for that state:
.state('mystate', {
url: "/mystate",
template: "<p>Some template content using scope: {{title}}</p>",
controller: function($scope) {
$scope.title = "State 1";
}
});
To preserve the query string between states you can add a state param to your states:
.state('mystate', {
url: "/mystate?myParam",
...
...
},
You can then access the parameter in the state controller with $stateParams.myParam.
Note: You have to pass myParam when changing state:
$state.go("mystate", {myParam: "yourValueGoesHere"});
Read more in ui router doc
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.
Basically, this is a social sort of application that I am working on.
So, for this app to work, the '/home' state shows a list of users. The 'friends/X' (X being user id) shows the profile of that user.
So, here is my app with the ng controller in the element:
ng-click="profile({{friend.id}})"
This hooks up and sends a function call to my controller "HomeController" which is currently in "/home". My problem is, how do I open a new state and pass a variable, the friend.id in this case to the state?
Thank you :)
EDIT:
Basically I want to know how a function "profile" can capture the id, then call the new state and send it the variable id of friend.id
EDIT 2:
Basically, in the profile function which is in the "HomeController" it will accept a ID as a perameter, so for example "1", and it will use the value it received and send the application to a NEW state for example now the new state is going to be "ProfileController" and it will be "/home/profile" or something like that, and it will pass along the "1" into the url, like so: "/home/profile/1".
If you want to do this inside a function, you should use the $location service to change the URL. Then the route will update, and the profile controller can take over.
<a ng-click="profile(friend.id)">{{friend.name}}</a>
... And in the controller:
$scope.profile = function(id) {
$location.url('/home/profile/' + id);
};
However, unless you need to do something with the click before changing the route, you can probably just do it with an href:
<a ng-href="#/home/profile/{{friend.id}}">{{friend.name}}</a>
If you stick to this method and leave it to the routing mechanism to choose the right controller, then your user will be able to copy/bookmark/jump to that URL directly, and use the back/forward buttons in the browser.
Use the $routeProvider service to tell AngularJS which controller to use based on the URL. For example (this should go in your module's .config):
$routeProvider
.when('/home/profile/:friendId', {
templateUrl: 'profile.html',
controller: 'ProfileController'
})
...etc
Then you can use $routeParams in ProfileController to get the current friendId parameter.
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.