Programming guidelines for creating single-page applications using AngularJS

Overview

Single page apps are becoming more and more popular nowadays. Any website that emulates the behavior of a single-page application can provide the feel of a mobile/tablet application. Angular can help us create such applications easily
Simple application

We are going to create a simple app involving home, about and contact us pages. Although Angular is designed for creating more complex applications than this, this tutorial demonstrates many of the concepts we'll need in larger projects.
Goal

Single page application
No refresh page changes
Each page contains different data

Although the above functions can be achieved using Javascript and Ajax, in our application, Angular can make it easier for us to handle.
Document Structure

- script.js
- pages
----- home.html
----- about.html
----- contact.html

HTML page
This part is relatively simple. We use Bootstrap and Font Awesome. Open your index.html file, and then we use the navigation bar to add a simple layout.

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
 <!-- SCROLLS -->
 <!-- load bootstrap and fontawesome via CDN -->
 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
 
 <!-- SPELLS -->
 <!-- load angular via CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
 <script src="script.js"></script>
</head>
<body>
 
  <!-- HEADER AND NAVBAR -->
  <header>
    <nav class="navbar navbar-default">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="/">Angular Routing Example</a>
      </div>
 
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
        <li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
        <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
      </ul>
    </div>
    </nav>
  </header>
 
  <!-- MAIN CONTENT AND INJECTED VIEWS -->
  <div id="main">
 
    <!-- angular templating -->
    <!-- this is where content will be injected -->
 
  </div>
 
  <!-- FOOTER -->
  <footer class="text-center">
    View the tutorial on <a href="http://scotch.io/tutorials/angular-routing-and-templating-tutorial">Scotch.io</a>
  </footer>
 
</body>
</html>

Copy after login

In page hyperlinks, we use "#". We don't want the browser to think that we are actually linking to about.html and contact.html.

Angular Application
Models and Controllers
At this point we are ready to set up our application. Let's create the angular model and controller first. Regarding models and controllers, check out the documentation for more information.

First, we need to create our model and controller in javascript, we put this operation in script.js:

// script.js
 
// create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', []);
 
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
 
  // create a message to display in our view
  $scope.message = 'Everyone come and see how good I look!';
});

Copy after login

Next let’s add models and controllers to our HTML page so Angular knows how to bootstrap our application. To test that the functionality works, we will also display the value of a variable we created called $scope.message.

<!-- index.html -->
<!DOCTYPE html>
 
<!-- define angular app -->
<html ng-app="scotchApp">
<head>
 <!-- SCROLLS -->
 <!-- load bootstrap and fontawesome via CDN -->
 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
 
 <!-- SPELLS -->
 <!-- load angular via CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js"></script>
 <script src="script.js"></script>
</head>
 
<!-- define angular controller -->
<body ng-controller="mainController">
 
...
 
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
  {{ message }}
 
  <!-- angular templating -->
  <!-- this is where content will be injected -->
</div>

Copy after login

In the main div layer, we can now see the message we created. Now that our models and controllers are set up and Angular is running properly, we're going to start using this layer to display different pages.

Inject the page into the main layout

ng-view is an angular directive used to include the template of the current route (/home, /about, or /contact). It will get the file based on the specific route and put it into the main layout (index.html ).

We will add ng-view code to the site in div#main to tell Angular where to place the page we render.

<!-- index.html -->
...
 
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
 
  <!-- angular templating -->
  <!-- this is where content will be injected -->
  <div ng-view></div>
 
</div>
 
...

Copy after login

Configure routes and views

Since we are creating a single-page application and do not want the page to refresh, we will use Angular routing capabilities.

Let’s take a look at our Angular files and add them to our app. We will use $routeProvider in Angular to handle our routing. This way, Angular will handle all the magic requests by fetching a new file and injecting it into our layout.

AngularJS 1.2 and Routing

After version 1.1.6, the ngRoute model is no longer included in Angular. You need to use the model by declaring it at the beginning of the document. This tutorial has been updated for AngularJS1.2:

// script.js
 
// create the module and name it scotchApp
  // also include ngRoute for all our routing needs
var scotchApp = angular.module('scotchApp', ['ngRoute']);
 
// configure our routes
scotchApp.config(function($routeProvider) {
  $routeProvider
 
    // route for the home page
    .when('/', {
      templateUrl : 'pages/home.html',
      controller : 'mainController'
    })
 
    // route for the about page
    .when('/about', {
      templateUrl : 'pages/about.html',
      controller : 'aboutController'
    })
 
    // route for the contact page
    .when('/contact', {
      templateUrl : 'pages/contact.html',
      controller : 'contactController'
    });
});
 
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
  // create a message to display in our view
  $scope.message = 'Everyone come and see how good I look!';
});
 
scotchApp.controller('aboutController', function($scope) {
  $scope.message = 'Look! I am an about page.';
});
 
scotchApp.controller('contactController', function($scope) {
  $scope.message = 'Contact us! JK. This is just a demo.';
});

Copy after login

Now, we have defined our route through $routeProvider. Through configuration, you will find that you can use specified routes, template files and even controllers. With this approach, each part of our application uses an Angular controller and its own view.

Clean URL: Angular will put a pound sign into the URL by default. To avoid this, we need to enable the HTML History API using $locationProvider. It will remove hashes and create beautiful URLs. Our homepage will pull the home.html file. The About and contact pages will pull their associated files. Now if we view our app and click on the navigation, our content will change as we wish.

To complete this tutorial, we only need to define the pages that will be injected. We will also make each of them display messages from the controller associated with them.

Run locally: Angular routing will only work in the environment you set for it. You need to make sure you are using http://localhost or some type of environment. Otherwise angular will say that cross-domain requests support HTTP.

Animation for Angular applications

Once you have all the routing done, you can start playing with your site and adding animations to it. To do this, you need to use the ngAnimate module provided by angular. Later you can Use CSS animation to switch views animatedly.
SEO on Single Page App

Ideally, this technique might be used in an application where the user is logged in. You certainly don’t really want pages that are private to a specific user to be indexed by search engines. For example, you wouldn’t want your reader account, Facebook login page, or blog CMS page to be indexed.

If you do want to do SEO for your app, then how do you make SEO effective on apps/sites that use js to build pages? Search engines have a hard time processing these apps because the content is dynamically built by the browser, and Invisible to crawlers.

Make your app SEO friendly

The techniques that make js single page applications SEO-friendly require regular maintenance. According to the official Google recommendations, you need to create HTML snapshots. An overview of how it works is as follows:

The crawler will find a friendly URL (http://scotch.io/seofriendly#key=value)
Then the crawler will request the server for the content corresponding to this URL (in a special modified way)
The web server will use an HTML snapshot to return the content
HTML snapshots will be processed by crawlers
Then the search results will show the original URL

For more information on this process, check out Google's AJAX Crawler and their guide on Creating HTML Snapshots.

Programming guidelines for creating single-page applications using AngularJS_AngularJS