Sharing Top Content from the Angular-sphere.

Single Page Apps with AngularJS Routing and Templating – Hell’s Kitchen

Single Page Apps with #AngularJS Routing and Templating

  • Let’s add the module and controller to our HTML so that Angular knows how to bootstrap our application.
  • Since we have our module and controller set up and we know that Angular is working properly, we will start working on using this layout to show the different pages.
  • is an Angular directive that will include the template of the current route (/home, /about, or /contact) in the main layout file.
  • Since we are making a single page application and we don’t want any page refreshes, we’ll use Angular’s routing capabilities.
  • This way, each part of our application will use its own view and Angular controller.

Single page apps are becoming increasingly popular. Sites that mimic the single page app behavior are able to provide the feel of a phone/tablet application. Angular helps to create applications like this easily.

@Alonso_Ricard: Single Page Apps with #AngularJS Routing and Templating

Single page apps are becoming increasingly popular. Sites that mimic the single page app behavior are able to provide the feel of a phone/tablet application. Angular helps to create applications like this easily.

We’re just going to make a simple site with a home, about, and contact page. Angular is built for much more advanced applications than this, but this tutorial will show many of the concepts needed for those larger projects.

While this can be done with just Javascript and AJAX calls, Angular will make this process easier as our app starts growing.

 file and we’ll add a simple layout with a navigation bar.

. We don’t want the browser to think we are actually travelling to about.html or contact.html.

We’re going to setup our application. Let’s create the angular module and controller. Check out the docs for more information on each.

 variable that we created.

 div, we will now see the message that we created. Since we have our module and controller set up and we know that Angular is working properly, we will start working on using this layout to show the different pages.

 to tell Angular where to place our rendered pages.

Since we are making a single page application and we don’t want any page refreshes, we’ll use Angular’s routing capabilities.

Let’s look in our Angular file and add to our application. We will be using $routeProvider in Angular to handle our routing. This way, Angular will handle all of the magic required to go get a new file and inject it into our layout.

Now we have defined our routes with $routeProvider. As you can see by the configuration, you can specify the route, the template file to use, and even a controller. This way, each part of our application will use its own view and Angular controller.

 file. About and contact will pull their respective files. Now if we view our app, and click through the navigation, our content will change just how we wanted.

To finish off this tutorial, we just need to define the pages that will be injected. We will also have them each display a message from its respectiive controller.

Once you have all the routing done, you can start to get really fancy with your site and add in animations. To do this, you will need the ngAnimate module provided by Angular. After that you can animate your pages into view with CSS animations.

Ideally, this technique would be used for an application after a person has signed in. You wouldn’t really want those pages indexed since they are personalized to that specific user. For example, you wouldn’t want your Reader account, Facebook logged in pages, or Blog CMS pages indexed.

If you did want SEO for you application though, how does SEO work for applications/sites that get their pages built with Javascript? Search engines have a difficult time processing these applications because the content is built dynamically by the browser and not visible to crawlers.

Techniques to make Javascript single page applications SEO friendly require regular maintenance. According to the official Google suggestions, you would create HTML snapshots. The basic overview of how it would work is that:

For more information on this process, be sure to look at Google’s AJAX Crawling and their guide on creating HTML snapshots.

Single Page Apps with AngularJS Routing and Templating – Hell’s Kitchen