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
Related
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.
I tried to integrated sails.js as a route controller and api management, using angular.js as frontend, but I found the problem when using angular to modify URL
For an example /
Original URL : http://localhost
after modify by $location.search({'lang':destLanguage});
Modified URL : http://localhost#?lang=fr
Then I am using $window.location.reload(); to reload the page to send the GET parameter to the sails controller, but when I debug at the page controller, I found that sails couldn't read the parameter from request.
req.param('lang') == undefined
I am not sure how to solve this issue. I tried to solve these issue for a whole few days.
Thanks,
After the hash are not query params for the server. It would need to be before the hash, or remove the hash all together.
http://localhost?lang=fr
instead just create function to incorporate into your app
var updateLang = function(lang){
window.location = 'http://localhost?lang=' + lang
}
The rest of the answer depends on if your angular is setup to use html5Mode = true. If so, then you can use angular's $location.search() to retrieve your values. If not, then you will need to find a plain javascript to grab that value either on page load or when / where you need it.
I've used UI router in the past in single page applications and found it prefect for loading new views and syncing them with the URL. However, I now have a normal multi-page ecommerce site which uses Angular a lot on various pages. Including te search results page.
I need to use ui-router only on this page to do ajax paging. Basically the content is already loaded onto the page and I have an ng-repeat for the results. It's a very simple set up.
What I want to do is change the state/url when the user hits the next/previous buttons and watch the stateParams to look for the new page number, then manually reload the new results and re-bind the ng-repeat to show the new results. Obviously I could load new search results without using ui-router at all but I want the back button to work so that you can go back through the pages.
Now, as far as I can see none of this requires any ui-view tags, or templates or controllers. I simply want to update the URL when a button is clicked and watch for changes. Is this possible with UI-router and if it is then what routes (if any) do I put into $stateProvider config?
Any help would be greatly appreciated.
I need to refresh the current page with new get variables. I've read that you need to inject $route and use the reload method, but this only reloads the current url.
I would like to essentially do something akin to PHP:
header('Location:currenturl?get1=value1&get2=value2')
In AngularJS, NOT send an http.get request, but force the browser to load a new URL in the same window (in this case the modified get url). How can I do this in AngularJS? Does reload accept a parameter for a custom URL?
*I've just began to learn AngularJS and JS a few days ago, sorry if this is an obvious question, but I can't seem to find an answer that doesn't open a new tab
$window.location.href
https://docs.angularjs.org/guide/$location
Why no plain old window.location?
I'm implementing something where the view changes based on the selected value of a select dropdown. I'm doing this using ng-include="mySelectedValue", which is attached to <select ng-model="mySelectedValue" ng-options="..."></select> tags.
Just wondering what happens under the hood, because this is essentially a SPA with no routes that is being loaded inside one of my Rails apps.
When the app gets loaded, does it just load all the views in the browser somehow? I don't get how angular works so magically. Would love to know how views are popping up when there are no server calls.
I assume mySelectedValue is a src.
According to Angular Docs:
By default, the template URL is restricted to the same domain and
protocol as the application document. This is done by calling
$sce.getTrustedResourceUrl on it.
$sce.getTrustedResourceUrl is basically an ajax request to fetch the corresponding template. So your server call is here :)
After that, there goes the $compile for the template, and renders the view.