I am working on a Single Page Application. Page A , Page B are partials.
We have a button "btnA" on "Page A" rendered using "controllerA". At click of "btnA" we need to perform "serviceA.somework()" and at successful completion, load "Page B" using "controllerB" with some params.
Is following the best way to achieve this?
within controllerA.onClickBtnA() { $location.path(PageB).search({param:'value'})}
$routeProvider is the best choice for your scenario. You should not load the controller manually in any way. The Angular router does the job for you.
A simple example from the angular official API page: http://plnkr.co/edit/foLnNL7koXzUYavnYFFw?p=preview.
Update
Your proposal is basically doing what $routeProvider does. $routeProvider provides:
RegExp in path definition
Browsing history
A resolve function to control access to current path
Place to define your controller and template for each path
Mechanism to deal with path parameters
...
And it is well tested and supported. You'd better have a try.
Related
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
On one page I load content via ajax according to user picks (filters), to ensure that loaded content stays in place if user reloads or lands on the page, I put the picked filters into the url query string. Since I load the content via ajax on this particular page I don't need to reload the entire page every time a new filter is picked by the user, so I prevent browser to react on url change with the following config:
app.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode(true);
}]);
However this affects the entire app and prevents all other pages from reloading on url change, the behavior I don't want. How can I make this configuration to affect only one particular controller within my app?
If your goal is to prevent reloading the page when the query string changes, html5Mode is entirely the wrong tool for the job. You want reloadOnSearch: false which can be applied globally or to individual routes:
$routeProvider
.when('/foo', {
controller: 'fooCtrl',
templateUrl: 'foo.html',
reloadOnSearch: false
},
...
);
https://docs.angularjs.org/api/ngRoute/provider/$routeProvider
From Angular's documentation on $locationProvider, maybe the cause of that behavior is by design:
rewriteLinks - {boolean} - (default: true) When html5Mode is enabled,
enables/disables url rewriting for relative links.
If your app is reacting to the url to make a change as a sort of RESTful api I would recommend using ngRoute or even better uiRouter.
Hope that helps.
This is a tricky situation, and you might not like my suggestion; heck I don't even like this suggestion because it breaks the whole awesomeness of a single page application.
But what you could do, is to create a separate html file (lets call it pick-filters.html). On that new html file, have a new ng-app and therefore a separate app.js file for this particular page. In this new app.js file (lets call it pick-filters-app.js), you can use the app.config snippet that you have shown here. This should fix your problem of all pages not reloading because only pick-filters.html is referencing pick-filters-app.js which has this config snippet.
IONIC has a very good feature to "cache" the state by using ion-nav-view, when user access the state in history, it will not reload the page -- Controller won't be called, and we could enable the cache globally or by page.
While working on a web site, I tend to use Angular JS directly instead of IONIC since IONIC is mainly for the mobile hybrid APP development. However, I really like the way IONIC handle the "history" and page reload. I know that we could leverage Angular Service to keep page data and achieve the similar function. But I feel it's not convenient to code and we have to put everything into service instead of controller.
Take an example here, we have a pagination search on Page A, by clicking each item to navigate to page B for the detailed item information, if we go back to Page A, we do not want to re-execute the pagination search again. I feel this is a very common requirement for most web site, IONIC's ion-nav-view could achieve this function easily without moving data to service, I wonder is there any angular JS plugins or directive which could help to achieve this function, it's something very similar as what IONIC's ion-nav-view does?
I am looking for the answer too, no lucky.
One answer is
http://www.tivix.com/blog/dont-forget-the-back-button-in-your-single-page-ap
the author mentioned ngRouter's [reloadOnSearch] option, but i doubt this answer.
From ui-router v0.2.5, there's reloadOnSearch option too, but it's not for our purpose.
another answer is
http://www.bennadel.com/blog/2801-revisiting-routing-nested-views-and-caching-with-ngroute-in-angularjs-1-x.htm
I think there's no simple way now, you have to keep controller's status, and restore controller's status on popstate event, and reproduce all controller's actions.
The other way is cache rendered-html, but how can angular touch the restored-html still?
you can use $window.history.back()
History is a consequence of navigation. So I think you are actually asking about AngularJS routing which is responsible for navigation and history management features. Angularjs has built-in router but ui-router seems to be more main stream because of its additional capabilities.
I also need the same feature and I found this lib:
http://christopherthielen.github.io/ui-router-extras/#/sticky
I think It can solve the problem but it make a problem on performance
because every opened state still working in background and use memory and cpu. (as I think)
Edit
ui-router added stiky feature please see this link:
ui-router/sticky-states
Here how you can use it
1) Add Plugin
import {StickyStatesPlugin} from "ui-router-sticky-states";
angular.module('myapp', ['ui.router']).config(function($uiRouterProvider) {
$uiRouterProvider.plugin(StickyStatesPlugin);
});
2) Mark a state as sticky
let adminModule = {
name: 'admin',
sticky: true,
views: {
admin: { component: AdminComponent }
}
}
I have a SPA that uses angular routing. I would like to have a certain link that will open a specific page (not using a template) when clicked.
In other words I would to have some links that simply act as regular links and redirect the user to a new page. I don't want these links load inside of the template.
Surely this has to be possible right?
Many Thanks,
Kiran
If I understood your question right, you wanna replace the enitre current page with a redirect to a new external page?
If that so, you can definately do that using $location service just a s follows:
$window.location.href = 'http://www.google.com';
Just put that into an ng-click, then inject the $location service into your controller and you are good to go.
Further documentation on :
https://docs.angularjs.org/guide/$location
similar question on :
Redirect to new Page in AngularJS using $location
I am absolutely novice to angular.js and i have some confusion, is it compulsory to define ngRoute on the angular module, as far as i think that it is require to include if we want to change the view on the basis of URl change.
Or is it also possible to define the route and return the view manually by calling some controller and on button click and it will return a view that i can use in the my index page.
You can create a app without using ngRoute. In that case you do not use the nv-view directive in html and the app does not respond to url change.
Also in that case if you want to change any part of the site, you use ng-include which takes parameter as the view name on server and it can be dynamically changed based on some logic.
Said that, you should use the view segregation and loading based on route as it makes your application a truly single page app, where views are update without any page refresh and each of the individual views can be bookmarked.