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
Related
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'm creating a web application in which the bulk of the functionality is deployed as an AngularJS single-page application, but there are also a few static content pages that are served in the traditional way.
Navigation within the SPA employs Angular UI Router and seems to be working correctly, as does the serving of the static pages.
However, the code architecture is such that all scripts are referenced from within the main site template and are thus served with every page, including the static pages. This is a deliberate decision, as there are some scripted features that need to accessible from everywhere, even from within the static pages.
For example, the header region of every page contains a search box with typeahead, that allows users to navigate to a view within the SPA, populated to reflect the selected content.
If a search is invoked from within the SPA, everything works as expected, and the routing mechanism correctly executes the required state transition to render the selected content. However, if the same search is conducted from within one of the static pages, although UI Router correctly processes the state transition, the content is not rendered because the static page does not contain the <ui-view> element that is usually targeted by rendering.
Although I can see what's causing the problem, I'm not sure how best to resolve it. From a novice perspective, it seems that I need to intercept the content search/selection process and execute different logic, depending on whether or not the search was invoked from within the SPA or a static page. I anticipate something like this:
if ($state.current.name) {
// The search was invoked from within the SPA, so only a state change is required.
$state.go("render", { key: selected_key });
} else {
// The search was invoked from a static page, so an SPA page load is required
What can we do here to bypass routing and issue a
server request for the corresponding SPA deep-linked page?
}
But I'm willing to guess that there is a more elegant way of dealing with this issue, maybe one that's baked into Angular UI Router.
Any suggestions please?
Many thanks,
Tim
For anyone facing a similar problem, the solution is actually very simple.
Instead of attempting to intercept and coerce the state transition, the desired behavior can be achieved through a simple modification to the main page template, enabling all pages, including static pages, to participate in Angular view rendering.
In my original implementation only the SPA page used the <ui-view> element, which resulted in the static pages ignoring the rendering that typically occurs during a state transition.
To solve the problem, I eliminated the <ui-view> element from the SPA page and, instead, added a ui-view attribute to the containing element in the main page template:
<html ng-app="myApp">
<head>
... page head content goes here ...
</head>
<body ng-controller="myController">
<div ui-view>
... server-generated page content is injected here ...
</div>
... page scripts are referenced here ...
</body>
</html>
With this change in place, every page is now effectively an SPA and capable of re-rendering to reflect state transitions (albeit that most of the time this never occurs, since the user simply views the pre-rendered content that was delivered by the server).
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/
I saw in many websites like twitter.com when you navigate between views by clicking navigation bar menus, then views loaded only one time and the loading spinner appear only for the first time the view has been loaded. If you back to the view again,it loaded directly and the loading spinner does not appear again.
I wonder, how can i do something like that using AngularJS ?. I need any tutorials to help me doing this or put me on the road.
This is already a core part of angular. Have a read of the $templateCache documentation. Here is a simple excerpt:
The first time a template is used, it is loaded in the template cache for quick retrieval. You can load templates directly into the cache in a script tag, or by consuming the $templateCache service directly.
So when using something like ng-include to grab a remote template via a file, it will only be loaded once, and automatically placed into this cache and reused when necessary.
If instead you are wondering how you go about only reloading part of the page, then you need to look at ng-view (which is part of the basic route module), or ui-router for more complex hierarchical view layouts.
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