I've been learning about angularjs and have been very confused about how angular manages to change pages without refreshing and yet have a completely different view.
Are they actually changing the page URL or just hiding all the elements of on page and showing the other?
This video by CodeSchool explains it quite well.
AngularJS is just a tool that allows you to build single-page web applications with relative ease. What you are looking for is actually the definition of Single-Page Application:
Single-Page Applications (SPAs) are Web apps that load a single HTML page and dynamically update that page as the user interacts with the app. SPAs use AJAX and HTML5 to create fluid and responsive Web apps, without constant page reloads. However, this means much of the work happens on the client side, in JavaScript.
Also, from http://www.johnpapa.net/:
A SPA is fully (or close) loaded on the initial page load, it’s key
resources are preloaded, and progressively downloads features as
required.
And, more specific to your particular question:
When a user clicks on a menu item, the SPA sees that url and
translates it to a View that should be displayed. If the view has not
been seen before, the application may make an HTTP request to retrieve
the HTML template for the view. Then it will compose the view, fill in
the template, and display the view in the appropriate location within
the shell. If the view has already been viewed once, the browser may
have cached it and the router will be smart enough not to make the
request. This is one way a SPA can reduce round-tripping to and from a
server, and thus improve performance.
Keep in mind that this behavior is attained with the use of JavaScript, and does NOT require any specific library or framework (such as AngularJS), although you will probably want to learn how to use one to facilitate the process.
I also recommend you check these resources:
http://johnpapa.net/building-single-page-apps-with-knockout-jquery-and-web-api-ndash-the-story-begins/
http://www.johnpapa.net/pageinspa/
If your url's are mapped with the $routeProvider, you can reload a controller invoking $route.reload().
Related
I don't know if this is a PHP or JavaScript code, but what do you call this technique about changing web content? For an instance, the MDC Web demo site. It has an empty content if you view the source, but completely contains all elements if you inspect the page.
Regarding PHP, I think it is done with a PHP code in MDC Web's case, but how exactly? Is this a common technique? I wanna know this method coz it's useful in some cases where there's actually no need to reload the page, but able to change the content and URL.
This is called Single Page Applications (a.k.a SPA).
A single-page application (SPA) is a web application or web site that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server. This approach avoids interruption of the user experience between successive pages, making the application behave more like a desktop application more.
Twitch has introduced a functionality that, when you've opened a stream page and navigate to a different part of the site, allows the video to keep playing in the bottom left corner without any interruption. This even works when pressing the back button in the browser and only breaks when closing the tab or manually typing in the URL you want to go to (e.g. https://www.twitch.tv/directory/discover).
I've been trying to figure out how this is being done. The video is embedded into a div with the class "js-player-persistent", so I assume it has something to do with a JavaScript and getting data from the session storage, but I'm unsure how much effort this requires specifically.
Twitch is built on EmberJS on the front end making it a Single Page Application (SPA). This allows them to not have to reload the page as you navigate, they simply utilize AJAX to load in the data needed to show the next page in a prescribed window. This is accomplished by the browser's pushState API or the hashbang implementation for browsers that don't utilize pushState.
Looking at their implementation of it, they likely have a hook that looks for navigation changes, before it happens, off the video player and at that time create a DOM element in that corner and put the video in it, then they proceed with changing the main page to wherever you are going.
This is fairly easily done in most SPA front ends like Angular, React, Ember, Vue, etc. and is a major bonus to them.
Twitch is an Ember app, which means it is a Single Page Application. It does not reload the whole page when you navigates between "pages". Regarding the use of the browser's navigation buttons, JavaScript routers take advantage of the browser history API to simulate a normal navigation.
After my original comment got as much popularity as it did, I figured I'd explain my presumption a bit better.
Twitch is a SPA, or Single Page Application. This means that when you go to a new "page" on the Twitch website you aren't actually going to a new webpage, you are loading a new view. Each of these views are basically sections of content that seem like pages but don't reload the entire page. This is commonly used with cross platform mobile apps.
The pros of Twitch doing this is that they communicate with their back-end constantly and the site handles that well with the streams. (They recently switched from a Flash to HTML5 video player.) This as well as having your current stream constantly playing even though you are exploring different sections of the website is a major plus for them.
The cons of all this is that your browser has to do more rendering meaning it is more intensive for your computer. And it is worth mentioning SEO can be harder with SPAs.
In my web app I keep part of the pages fully rendered on the server side (to make them easily indexed by google) and some of the pages should be rendered partially with AngularJS. Rendering full pages is straightforward, however, I'm confused when I want to mix it with partially rendered pages.
The problem I see is how to make it possible to navigate from a fully rendered page to partially rendered? Let's say that I have a fully rendered page at the following url: fakedomain.com/products/all Now, I want to allow users to edit their profiles and this would be a partially rendered page (available at fakedomain.com/#/user/profile).
How should I do all the routing and rendering?
I mean, when user clicks the option to edit his/her profile should I render index.html where I have ui-view declared? If yes, how do I make sure that correct partial is used?
btw. I'm using NodeJS on the server side and I'm pretty new to the client side stuff.
You can use AngularJS html5 mode https://docs.angularjs.org/guide/$location which takes away the hashbang. Then you need to route all requests to your app to the index.html (which loads angularjs).
You need to add exceptions for your static pages routes on your nodeJS app or your webserver, so that the requests for the static pages get handled correctly.
That should work allright and keep it an integrated experience for your users.
In traditional web application i generally write JSP which renders html code to browser and communicate to server using form submit or through Java script. This generally involves page transition from one to another using browser refresh many times.
Now with the improved HTML5 i still can use the same approach but i want to achieve more of a desktop application look and feel which means no browser refresh. But i am really confused how it can be achieved.
Do i need to write a big single html5 file which contains all the web application code and show or hide divisions using java script that we need to show at that point of time. Communicate to server using java script.
Or, Just have a minimal first html5 page where user lands for the first time. Later on create all the HTML5 content dynamically using java script and communicate to server using java script. This looks more difficult.
Or, is there a way we can move from one page to other without the effect of page loading/refresh etc.
In general using HTML5 what should be the approch?
For example of a shopping cart, the first view to the user is list of items to purchase. Then user moves to next view such as details of an item. The next view can be payment.
If you have some resource or example to explain it, it would be great.
I'm working on a web app which uses Backbone's HTML5 History option. In order to avoid having to code everything on the client and on the server, I'm using this method to route every request to index.html
I was wondering if there is a way to get Twitter Cards to work with this setup, as currently it can't read the page as everything is loaded in dynamically with Javascript.
I was thinking about using User Agents to detect whether it's the TwitterBot, and if it is, serving a static version of the page with the required meta-tags. Would this work?
Thanks.
Yes.
At one job we did this for all the SEO/search/facebook stuff etc.
We would sniff the user-agent, and if it was one of the following sniffers
Facebook Open Graph
Google
Bing
Twitter
Yandex
(a few others I can't remember)
we would redirect to a special page that was written to dump all the relevant data about the page for SEO purposes into a nicely formatted (but completely unstyled) page.
This allowed us to retain our google index position and proper facebook sharing even though our site was a total single-page app in backbone.
Yes, serving a specific page for Twitterbot with the right meta data markup will work.
You can test your results while developing using the card's preview tool.
https://dev.twitter.com/docs/cards/preview (with your static URL or just the tags).