I'm currently using directives in my ionic app, there directives are normally bind to a angular controller. So my problem is, when I navigate through the app, my controllers are not loading (loads for the first time) and hence I cannot setup some initial values.
Following is an example
I navigate to users screen/page
users controller loads (When I check with Chrome dev tools)
I navigate to home screen
I navigate back to users screen
At this point I expect users controller to load again, to setup my initial values, but it's not happening
I'm not sure if this is the default behavior, or am I missing something?
if you are using nested states, parent.child1, parent.child2, parent only loads 1 for the entire hierarchy, changing from child1 to child 2 will not reload the parent controller, thats one of the pros of using ui-router.
also note that with ionic latest version they introduced view caching so, the controller is only instanciated once for each view, to prevent that you need to use
cache-view="false"
in your ion-view
http://ionicframework.com/docs/api/directive/ionNavView/
Related
I developed a single page application with index.html file and 2 views view1.html and view2.html and configured 2 states for the above views but when I'm browsing between the states I'm losing the data I just stored in $rootScope because the browser loading the app.js again.
Should it be like that? how can I store data inside the $rootscope and preserve it while browsing from state 1 to state 2?
If app.js is the code which contains your main app, it should ideally be loaded only once when you first time load the page, and after that all your page transitions should be replacing some data container through ajax.....thus ensuring the $rootScope remains preserved.
If this is not your structure and you are refreshing the page regularly you are not following the basic tenet of SPA
I just found that i had to write the links as:
<a ui-sref="testa()">View2</a>
instead of
View2
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.
so I've written an app, there is a few routes:
1) one that shows chat messages, users list, etc and is kept up to date via the controller
2) game page
3) help page
it works fine, but when click the link for #/game-page, it actually disposes of the chat view, controller, etc. when I click the link for #/chat, it reloads it, but now has to reload all the views and data, which makes it slow and flickery..
I'd really like to just maybe hide the views for the pages that aren't active, so when I switch between them, its instant and everything is still there.
Can anyone recommend a way forward?
Thanks
The views are cached, so they are not reloaded. If you want data to persist between changing views then don't attach that data to the scopes of the views but to an outside scope or an object in an outside scope.
The views would still be compiled, though, every time you switch between them. If that's a concern then I suggest to use ngSwitch.
it's normal behaviour to reload the views and controllers for ngRoute.
probably for your case you could create your own router, catch rout param and hide/show needed bloc with ng-hide
I am I new to Angular and UI Router.
Plunk http://plnkr.co/edit/1wfyrGryfGG5RtXozPFY?p=preview
Setup I have three top level application nav buttons Home, Projects, Help. They load different views home.html, projects.html and help.html using the Angular UI Router ui-view directive. This works good.
The Projects.html view has a tab bar with each tab corresponding to a project: D1, D2 D3 etc., I show the corresponding project tab using url router attributes.
Every time I click the Projects button it is reloading the tab bar completely. I loswe the current tab and hopefully if any nested views inside it. Basically the page contents of Project.html, invoking the controller as well.
I read through the wiki documents and couldnt figure out how to implement my required functionality. I am sure I am missing something. Will it always reload the view?
Question: How to avoid reloading the projects view contents so that I can retain the selected tab and all the contents as-is before switching to Home. Because I would have a lot of nested views and models on each project.
I wanted similar functionality too, but ui-router doesn't yet support it. I forked ui-router to support "parallel states" and submitted it to the project for comment. The gist of the conversation is that ui-router will eventually support some form of parallel states but not yet. In the meantime, you can try my fork of 0.2.10 which provides the parallel states that you want.
Read the conversation here: https://github.com/angular-ui/ui-router/issues/894
View the sample parallel tabs plunk here: http://plnkr.co/edit/YhQyPV?p=preview
Here is the fork; build it with grunt: https://github.com/christopherthielen/ui-router
One option would be to implement a service that can be used to maintain the previous state. Services persist over controller changes, thus they can be used to maintain the previous page state and updated when the route changes. something similar to this would work.
app.factory('persitDataService', [function(currentStateData){
var stateService = {
state:{
//your object data set to passed in data
}
//other functions here
};
return stateService
});
then in the controllers just inject the service and assign to a scope value. When the route changes just reset the data in service to new state and inject into new controller
This should work for the previous page state. If you are wanting to save the states of all previous pages then this becomes a larger problem but should be accomplished in much the same way only with a more complicated service setup.
This could also be combined with local and session storage
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.