I'm new to Angular and it's my first time using the ng-view directive. I'm developing a Phonegap application and I noticed that, upon clicking many consecutive links which do a:
$location.path('/somePath') //this is illustrative - path depends on link clicked
the new loaded view is stacked. This means: I have to click the back-arrow in my android device N+1 times to leave the program, if I followed N links (or N calls to $location.path). Althought this behavior is not expected for me (I'm a n00b here), looks good in the base user experience I need for my app (is it related to the history stack?) - but also I have a "go to main menu" button, and I want that button "clearing such stack", rolling back to the first screen.
Why do I need it? Because I was navigating in my app back-and-forth (currently my "go to main menu" button does $location.path('/'), which STACKS again a main-menu view) and when I tried to close my application using the back-arrow button I had to hit that button an annoying amount of times.
So: how do I clear the stack when I click the main-menu button? (instead of doing $location.path('/'))
If you are building a phonegap app then I am assuming the actual URL doesn't matter to you? You may want to look at the ui-router module instead of ng-route as it focuses more on states than simple routes. You can easily move to/from states, with transitions if necessary, without changing the $location at all (avoiding your problem). Additionally, ui-router supports named views and nested views so you can split your templates up into smaller pieces if that fits your project.
Sorry not a direct answer to your question, but it sounds like ui-router is a better tool for what you are trying to do.
https://github.com/angular-ui/ui-router
Related
Is there a possible way to automate the click event of angularjs button, which navigates to a new page in turn.
Something like following is what the original browser code is.
"data-ng-click="services.urls.openPageUrlWithId(plusPageId)"
I am able to get to the point where the click event comes into picture, but it is not getting navigated to a different screen.
Any solution to this problem ? Thanks.
Is this for end-to-end testing purposes?
If so, the angular team themselves maintain a fantastic tool called protractor https://angular.github.io/protractor/#/
It provides smart abstractions on top of WebDriverJS/Selenium to allow you to easily find elements by their angular bindings and click through as you have described.
I'm building a project with angularJS. I use ui-router for views, and nested views.
So I have a index.html with just the header, the footer and a "general" ui-view where I load asychronously the Home-view, Contacts-view, About-view, etc.
On the "home" page and on the "about" page there are two different Adobe Edge animations.
They work like charm when I load them for the first time, but when I navigate through the website and then I come back to the home or the about page nothing appears.
I've tried loading the edge scripts in different ways
in the index.html head with the script tags
in a angular directive
in the controller
during the routing processes via the resolve option of ui-router
None of this strategies fixed the problem. The animations still play just once.
Finally I decided diving in the js code crafted automatically by Adobe Edge (I'm not a designer, I have no idea on how to create animation with Edge).
I found that Edge create an AdobeEdge object and bind it to the window... then call the animation throught an event handler in a jQuery anonymous function
(function($, Edge, compId){
....
$(window).ready(function() {
Edge.launchComposition(compId);
});
})(jQuery, AdobeEdge, "EDGE-123456");
On the official Adobe documentation (really bad!) there are some methods to call on the AdobeEdge object...
I tryied to insert in the home-controller the following line
$window.AdobeEdge.getComposition("EDGE-123456").getStage().play();
but doesn't work.
After a wasted whole day I'm frustrated, I hate who ho conceived Adobe Edge scripting and overall I need an help to fix it the right way (beofore implementing horrible workaround).
Thank you
Try using playAll(). I imagine this plays all the Symbol timelines at once (it's difficult to know for sure since the documentation is so vague), but I've found it works for my purposes.
$window.AdobeEdge.getComposition("EDGE-123456").getStage().playAll();
I have a silverlight navigation application where I load and initialize a lot of things in the MainPage.aspx loading.
All the Pages (views) are dependent on the loading of that data.
But really often my users add an internet shortcut on their desktop for my application. but the link often points to a specific page like that :
http://myServer/MyApp/default.aspx#/TheView
I want to force the users to go to the "Default" view (and ignore the #/view parameter) when the application Starts up.
Whats the best way I can do that?
I don't think it's a good idea to 'avoid' links. You should construct the application in a way when it's not a problem.
For example you can send a message from your main logic when everything loaded, and until that message you can disable the appropriate UI (while waiting for data). Messenger (or EventAggregator in Prism) is a publisher-subscriber pattern to achive communication between components without reference to each other. If you don't know it yet, take a look at MVVMLight Messenger or Prism EventAggregator
But if the first option is not okay for you, you can play with the Frame control's JournalOwnership property:
http://msdn.microsoft.com/en-us/library/system.windows.controls.frame.journalownership(v=vs.95).aspx
http://msdn.microsoft.com/en-us/library/system.windows.navigation.journalownership(v=vs.95).aspx
OwnsJournal is your value, because it does not integrate with the browser journal and the url stays the original so your users can't bookmark a 'sub page'.
You can also implement your own journal mechanism.
Another :), but pretty ugly option would be if you track the first page load (in OnNavigatedTo Page events for example), and at the very first request you manually navigate to the main page. Or in the App.xaml.cs, when application starts up you forward the page request.
But I recommend the first one.
I want to have two separate interfaces to my website, one that is silverlight, and one that is normal html for people who don't have Silverlight, and for search engines. They would have exactly the same content, the Silverlight one would just be a richer experience.
If someone with Silverlight copies the URL to a certain page, it will have a '#' in it (app#page1). If they then want to link to that page on their blog or something, it will have the # in it, and a search engine probably wouldn't consider it as a separate page from app#page2.
Is there any way to make the navigation from within Silverlight update the URL with a '/' instead of a '#', without actually loading a separate page? This way the URLs in the address bar appear like a normal websites' URLs ('app/page1', 'app/page2').
Is there any way to make the navigation from within Silverlight update the URL with a '/' instead of a '#', without actually loading a separate page? This way the URLs in the address bar appear like a normal websites' URLs ('app/page1', 'app/page2').
Unfortunately, no. The reason that Silverlight navigation URLs use # is that you can move around within a page by moving to an anchor location. If you used a full URL with '/' separators, it would cause the browser to navigate to a new page, which would reload your Silverlight application. This would basically unload your Silverlight application, and load a new one with the new URL.
The reason they use the # sign is because this is interpreted by the browser as moving to a location in the page, otherwise would reload the page.
As far as search engine implications I'm not sure either way. Maybe someone more experienced with SEO can chime in on that.
However I'm sure you can get the behavior you're looking for, just may take some trickiness on your end. Another way pass information to the Silverlight client runtime is using Query String parameters. You can access query string params using the System.Windows.Browser.HtmlPage.Document.QueryString collection, you could then load the Page or User control with the content you desire based on that parameter.
As far as mimicking a folder structure using '/'s. I know there are ways to do this using custom web server settings / HTTPModules. I assume you're using IIS/ASP.Net, I would look into this from Guthrie:
http://weblogs.asp.net/scottgu/archive/2007/02/26/tip-trick-url-rewriting-with-asp-net.aspx
Takes a bit of hackery, but if you're really set on doing it I'm sure you could. You will also face the things the above poster mentioned, if you attempt to do use the same logic during a session. This may work though for just the deep linking aspect you're looking for.
I'm trying to improve the user perception of page load time of some web pages. These web pages take about 5 seconds to complete loading and rendering. The overall time is fine; but on clicking a link to load a page, nothing happens for about 4.5 seconds and then the whole page appears in one shot. This spoils the user experience, since the user is left wondering if anything is happening or not after clicking the link.
As I understand it, browsers are supposed to progressively render web pages as and when the resources available to render portions of the page become available to it. One thing I've seen recommended (by YSlow for eg:) is to put the css in the head and the javascript near the ending body tag - or as near the end of the page as possible. I've done this, but I don't see the initial part of the page rendering and then pausing for the javascript to load. The theory, as I understand it, is that the page will begin rendering progressively once all the CSS is loaded. I also understand that the page will pause rendering when any javascript is being executed/downloaded.
What else can affect progressive rendering on IE, especially on IE7?
I found out that javascript (specifically, some jQuery selectors) were slowing things down and preventing the page from rendering. We first optimized the jQuery code by removing some code which was repeatedly selecting the same elements. Then moved the code down to $.ready so that it executes after the page has loaded.
Overall, this has given us a 2 second boost in page load times as well as allowing more pages to load progressively.
A first step may be to understand what's going on on the network side, a tool like Fiddler will help you. In your case, Timeline display should be a good starting point.
Why not show notifications to users when a link is clicked that the page is currently in loading state.
You can do this:
window.onbeforeunload = function(e){ document.body.innerHTML='loading...';/*or even a better content/* };
I'm having the same load problems because of flash videos on a page. Will somebody tell me why oh my God why can't ie just load pages as nicely as firefox does???
If ie went out of business today, all the hours and days and nights I've wasted would be over.
I think it's about time that ie get with the demands of web maasters in 2009 and change the way they load pages.
If java script is used, people without java will see blank spaces.
Check for unclosed tags.
Check all images have width and height attributes.