I'm trying to figure out how I can get query parameters in the url using UI Router and AngularJS UI Bootstrap Typeahead fully working.
I have it working (well... kind of). What happens is that you have to search twice, once puts the query in the url and twice gives you results. Not ideal.
After doing some more searching and reading, I found this answer and it seems that using an $http service would be a good way to go. However, I'm only using ONE controller with 2 views. Will that still work?
UPDATE
The answer in the link provides an answer based on having 2 controllers, whereas I only have one controller.
So my question(s) is would using an $http service to store my query in enable me to put the query parameter in the url using UI Router and AngularJS UI Bootstrap Typeahead? Is this SOLEY a UI Router issue or is UI Bootstrap Typeahead play a role in this?
Code:
In my controller I initialize the relevant code like this:
$scope.searchTerms = $stateParams.searchTerms || '';
and use $state.go in my search function like this:
$state.go('search', {q: $scope.searchTerms});
It works like I said, but only after submitting the search query twice. Trying to figure how to get it working normally.
Related
I am trying to run angular next to our old angularjs application. Before we try to go the ngUpgrade (a lot of refactoring needed before possible) route I'd like to try and run them independent from each other. I thought I would be able to achieve this by just rendering the tag and the associated script files that get generated (by angular-cli) on the specified routes that I want to upgrade to our new application.
I do this by adding a state to my angular-ui-router. With *param as last url value so all subsequent routes go to the same route.
img-link
But now I have an issue that when I redirect from an angularjs(e.g. /user) route to a new route( e.g. /subscription/2) the application breaks because angular can't resolve the previous route.
I thought this could work if I could intercept the routeChange in angular but can't find a way to do this.
Is this even possible?
In order for angular to intercept and handle routes you need to use an UrlHandlingStrategy. Please check the example here.
If we are using "ui.router" of angular JS module, will that module take control of all the URL navigation in the entire page?
I am using the $stateProvider.state method to register the mappings of URLs and States but as I am using it, I am observing that the state provider is taking control of routing all URL patters. For example, if I am having a jquery tabs pane in the same page somewhere, it is not working. The reason being, the jquery tabs are based on the HREF of the Anchors and this ui-router is taking charge of mapping them as well, to some states.
Can someone please confirm if it really is supposed to work like this?
No, as per I know, it should work fine with HREF,for example
link
In your case, for tabs you are specifying #(hash) in href and thats why its going through ui-router, I would suggest you to use <uib-tab> instead of simple jQuery tabs and thing will work as you needed.
If you are using # in anchor tag then it will always try to match it with url and if not found then it will redirect to defualt one but you can actually intercept url change request in run function and use preventDefault function for specific request which will stop url change request
I generated one application using JHipster V3. I am trying to modify the search functionality and adding some kind of filter where user select some filter and hit search button and my angular search controller will make a POST call to my API.I did modification on server side to support filter search and return data.
Now I want to modify pagination link so that they also make a POST call with selected filter data instead of GET.
I did some investigation and found that when user click on link call goes to 'ui-bootstrap-tpls.min.js' [selectPage] function.
I dont want to make any changes on this js as it is global and will work for other UI screen.
Is there any better approach to implement such requirements?
I am learning what logic to put in Angular's various components, but am left unsure of the Angular-way to handle manipulation of the $location.
I have some code that I would like to convert to Angular. It takes the document.referrer and based on various factors, may scroll to an anchor in the page (/page#scrollTo).
Where would one put the logic for this in Angular? It does not seem suitable for a controller.
For your anchor scroll example, Angular provides an $anchorScroll service: https://docs.angularjs.org/api/ng/service/$anchorScroll. In the docs example, $anchorScroll is used within a $controller. This would be a simple solution when using angular-route.js.
If instead using angular-ui-router.js, then scrollTo's would likely be handled by the $urlRouteProvider. This SO answer: What is the difference between angular-route and angular-ui-router? provides good info about the added functionality of ui-router.
Can be used AngularJS for the following scenario?
a php back end based on a framework like Laravel or Codeigniter which is used to manage MySQL Data.
On the Frontend AngularJS which shows Data via API (Angular -> <- Codeigniter, Laravel).
The user has the possibility to filter back end data with option Boxes and here is the thing on what I'm not sure about.
On each option I would like to deeplink the result of filtered. How would I do that with angular. I read about routing and I'm not really sure if this would be the workaround.
You could try $location.search() to change URL when updating the current filter. And on page load, read the $location.search() and preset the filters. If you are using ngRoute, you may want to set the reloadOnSearch to false for the route which contains the data so that the controller and view aren't recreated when you set the search.
Perhaps the below question and answer could also help
AngularJS Paging with $location.path but no ngView reload