April 19, 2014

Introduction to HTML5 dynamic navigation and AngularJS

Everyday the number of devices with internet access it's increasing and with the arrival of new technologies, most businesses now has a website (at least) so the market of website development it's becoming more competitive and now proper UX it's becoming a standard instead of a plus.

The devices are becoming more powerful, most are even HD capable and HTML5 it's opening more possibilities everyday as web technologies evolve. HTML5 applications are becoming so powerful and flexible, that they are replacing the "good-old" native applications.

Google Docs it's a great example of  a modern web apps, it offers all you expect from a text editor for example, without the need to install it plus all the collaborative, web and cloud added capabilities. This technologies also benefit from the fact that they are always updated.

A very important aspect of modern web app is that when you browse from one section to the other, the whole page doesn't reload, but only a specific section changes. This not only makes the experience more convenient, it's also much faster.

Another reason that modern web apps are faster than old ones it's the addition of Async capabilities to HTML, allowing to display elements as they finish loading instead of always waiting for one to finish before starting the next one, along with smart programming the page becomes functional and visually correct long before it actually finishes loading.

AngularJS it's a great and convenient way to add both, Async loading and Dynamic navigation to a website or web app, and you don't need to be an AngularJS guru to start using it, and actually makes web development easier.

All the examples are hosted Free using Google Drive HTML hosting capabilities, if you haven't tried it already, it's probably the easiest way to publish and update your web sites and apps, plus it's completely free.

Let's hit the code!

First we need the "static" part, all you actually need is a title and a simple navigation menu like this:

Live Demo

It's remarkable the simplicity of the HTML5 markup. Now it's time to load the AngujarJS library and add the necessary HTML markup additions.

Let's take a look at the differences:

Awesome! It's curious how little code is required right? One of the ideas behind AngularJS and HTML5 is to keep things simple, modular and recyclable.

First I assigned "MyFirstDynamicNavigation" as the proyect's name, it is important to assign a name for your AngularJS project so that your code will be able to properly bind to the DOM.

Then I simply called the AngularJS libraries, conveniently stored on Google server's and in a minified version. I also load the Javascript file where we're going to store the Angular configuration.

For the links, all you need to do is to write "#/" plus any name you wish to assign to that section, this will be shown in the URL instead of the actual name of the file, this makes your site's nav bar clean and clear for the users.

Finally I declared the "article" tag as the container of my Templated HTML, you can use any tag you prefer.

Now we need to write the logic, let's see at the Javascript needed for this.

It is important to note that there are many ways to initualize your AngularJS app, I prefer this one for it's easy to scale and it keeps all it's data and functions safely inside a single scope, this avoids different Angular apps from getting mixed when running on the same browser at the same time. This also helps recycling the same pieces of code in different applications without the risk of errors when they run together.

The advantage of declaring your app this way becomes evident when you add the $routeProvider configuration. You can see how all the code it's contained in a single logical place, but it can be easily called to add more functions as needed.

$routeProvider keeps an eye on the last part of the browsers URL and uses it to choose which file (And controllers if you are using them) should be loaded. It depends on the "ngRoute" service The templateUrl should point to the file we want loaded for every particular location. It's common to assign the "/" address as the "welcome" screen. Note at the end a simple "otherwise" declaration tells the app to load a default template when the URL is unknown, we usually point back to the welcome screen or a special "Unknown URL" template.

Anything contained inside the pointed files will be loaded inside the ng-view tagged section while keeping the rest untouched, so it doesn't interrupt videos or animations.

For this example I created 4 HTML templates:


And that's it! You can see it working right here:

Live Demo

Don't forget to share your thoughts at the bottom of this article, also if you're coming to the Google I/O 2014, feel free to say hi, I'd love to meet you.

Happy coding!