I have a plunker at here , which includes a form on the left. When the form is submitted, I wish to display the results as a ui-view on the right column. I use the ui-router to do this in the vm.search() function associated to the search button:
$state.href('/results');
however, the results page does not get loaded when the form is submitted. Could someone point me to the right direction for research or give me some quick hints/answers? I appreciate it
The problem was with the href usage, if you use go it works:
$state.go('formResult'); //display the results page
$state.href -
A url generation method that returns the compiled url for the given
state populated with the given params.
Example:
$state.href("about.person", { person: "bob" }) == "/about/bob"
Related
I have a page for editing existing pages by populating input forms and creating a JSON file for the page template/partial.
Essentially, it consists of: <input ng-model="model.page_title" /> and $http.post('edit_json_file.php', JSON.stringify(model))
However, to edit a page I need to load its (existing) JSON first, so that I can populate those models for input forms. I'm doing that with another input:
<input ng-model="url_of_page_to_edit" />
This clearly requires the user to manually type the URL of existing page (to load corresponding JSON file) for its modification. I want to change that.
It would be better to have an Edit button on each page that I want to edit. After clicking the button it should redirect me to my page editor, which will load the required JSON and fill in the inputs as usual. For that I need to know which JSON to load (if the page is /page.html, JSON will be page.json). That's why I'm thinking of passing URL as a parameter to my page editor, for example as:
website.com/edit_pages?url=page_to_edit
or as
website.com/edit_pages/page_to_edit
Assuming I have these links, what is the best practice to retrieve those URLs?
I am using ui.router and so my config has something like this:
$stateProvider.
state("editPages", {
title: "Edit",
url: "/edit_pages",
templateUrl: "/partials/edit_pages.html",
controller: "editPagesCtrl"
})
I still want to edit pages by manually typing their URLs
If I need to use $stateParams with a link in form of /edit_pages/page_to_edit then how do I handle an empty case /edit_pages/?
If I need to pass URLs as parameters (like in PHP) in a form /edit_pages?url=page_to_edit/ then what do I need to change in my config for this to work?
Getting the Page Link
var url = $state.href($state.current.name, $state.params, {absolute: true})
This will give the absolute url of the current page. Then you can do a $location("edit_pages?url="+url).
Passing URL as Query String
For passing in query string format (PHP format) you cause something like this:
.state('editPages', {
url: "/edit_pages?url",
...
})
Then /edit_pages?url=page_to_edit will work as expected.
After clicking a button make use of $state.go();
put a mapping(if required) and depends on the input entered change the state.
$state.go('editPages')
I'm developing a site in angular and suppose I have navigated to iphone detail page and its current url is "localhost:8080/iphone/details" .
Now I have to implement a new functionality of applying coupons.In this suppose user clicks on some hyperlink from external site,
"localhost:8080/iphone/details?promotionalCode=12345"
User will land on that page(page will load after that modal will pop up) and a modal pop's up . And here details of promo code i will fetch from query parameter.
But my requirement is if i click cross (dismiss modal) ,and modal closes and state of url should be changed to localhost:8080/iphone/details .
What i have done till now .
I have used $location.search().promocode to fetch promocode if this is valid than modal will pop up and on dismiss modal i'm calling function in which i'm resetting state using $window.location.href , but this is making the whole page getting refreshed. Any suggestion on this ?
You will need to use $location.search().
To get the query parameter ?promotionalCode=12345, you will need to do $location.search('promotionalCode',12345).
Please see: AngularJS Documentation for $location
You can use $stateProvider for this just give the state
Example: .state('app.page', {
url: 'iphone/details',
title: 'Coupon Applied', })
Trying to figure out how to pass a value in service from one direction to another? I'm building a small search app using Elasticsearch and AngularJS. It has 2 pages, home and results. On home, only functionality is autocomplete (using AngularJS UI Bootstrap Typeahead), on results page, display results and search box. I'm trying to use a custom directive to do this.
I basically have everything working EXCEPT, that when on the homepage, pressing the search button just goes to the results page, no search processing is done. AND everything works on the results page, autocomplete and search functions...
I recently put the ng-model(searchTerms) into its own service, but I DI that service into both my controllers. The only thing I can think of is that somehow my ng-model ISN'T getting passed to the directive? I'm stumped... still learning AngularJS directives.
Basically all the service does for searchTerms is
this.searchTerms = null;
Any ideas?
UPDATE I'm on v1.47 and using ngRoute for now.
UPDATE 2 I have 2 way data binding working now. So when a query is submitted on the home page, the searchTerms variable now displays on the results page. However, there is still no results being displayed and no processing being performed. So just 2 way data binding is working.
UPDATE 3
'use strict';
angular.module('searchengine.query-service', [])
.service('queryService', function() {
var searchTerms;
this.searchTerms = null;
});
You can consider these 2 pages 'components', in the more update to date Angular jargon, and you want to navigate between them, passing your search term as a variable.
In your search page, you will need some code along the lines of
$router.navigate(['ResultsPage', {searchTerm: yourSearchTermGoesHere}]);
When the results component activates, it should check for the existence of a search term and perform whatever search processing is done when the search term subsequently changes.
Router docs - https://docs.angularjs.org/guide/component-router. Have a look specifically at the 'Extra Parameters' and 'Lifecycle hooks' section
How can I have an index page accept search input and then return the result in different page (view) with angularjs?
All the tutorials I have gone through on the internet shows search box that accepts the query and instantly prints results beneath it on the same page (or say "view" in MVC language?). I want a separate page to just hold the search box, let user type what it wants and then hit go button which then return results on a separate page (which does not have the search box).
You need to store the search box value somewhere before going to the second page. You can do this in several ways.
One way would be to use a service to store the value, then the result page can retrieve it from there.
The service:
.service('CommonService', function(){
this.value = '';
});
The search controller:
.controller('search', function(CommonService){
$scope.goToResult = function(searchBoxValue){
CommonService.value = searchBoxValue;
// Redirect to result view
};
});
This function could be on the ng-submit of the search form.
The result controller:
.controller('result', function(CommonService){
// Receive value of search box
$scope.receivedValue = CommonService.value;
});
Another way would be to send the value along the URL, like GET params:
http://google.com/q?SearchBoxValue=something-i-wrote-before
are you implementing single page application (SPA)? you can do this multiple way with partial view and override partial view on search page with result page.
search page (partial) hit send request to get data.
receive data from service
redirect to result (partial view).
you done.
hope this help you.
I am writing something like a registration process containing several steps, and I want to make it a single-page like system so after some studying Backbone.js is my choice.
Every time the user completes the current step they will click on a NEXT button I create and I use the router.navigate method to update the url, as well as loading the content of the next page and doing some fancy transition with javascript.
Result is, URL is updated which the page is not refreshed, giving a smooth user experience. However, when the user clicks on the back button of the browser, the URL gets updated to that of a previous step, but the content stays the same. My question is through what way I can capture such an event and currently load the content of the previous step and present that to the user? Or even better, can I rely on browser cache to load that previously loaded page?
EDIT: in particular, I'm trying something like mentioned in this article.
You should not use route.navigate but let the router decide which form to display based on the current route.
exemple :
a link in your current form of the registration process :
<a href="#form/2" ...
in the router definition :
routes:{
"form/:formNumber" : "gotoForm"
},
gotoForm:function(formNumber){
// the code to display the correct form for the current url based on formNumber
}
and then use Backbone.history.start() to bootstrap routing