SoFunction
Updated on 2025-04-12

Programming Guidelines for Creating Single Page Applications with AngularJS

Overview

Single-page applications are becoming more and more popular now. Websites that simulate single page application behavior can provide the feeling of a mobile/tablet application. Angular can help us create such apps easily
Simple application

We intend to create a simple app that involves home page, about and contact us pages. While Angular was created to create more complex applications than this, this tutorial shows many concepts we need in large projects.
Target

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

While the above functionality can be achieved using Javascript and Ajax, in our application, Angular can make it easier for us to handle.
Document structure

  • -              <!-- stores all our angular code -->
  • -              <!-- main layout -->
  • - pages                 <!-- the pages that will be injected into the main layout -->
  • -----
  • -----
  • -----


HTML page

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

<!--  -->
<!DOCTYPE html>
<html>
<head>
 <!-- SCROLLS -->
 <!-- load bootstrap and fontawesome via CDN -->
 <link rel="stylesheet" href="///bootstrap/3.0.0/css/" />
 <link rel="stylesheet" href="///font-awesome/4.0.0/css/" />
 
 <!-- SPELLS -->
 <!-- load angular via CDN -->
 <script src="/ajax/libs/angularjs/1.0.8/"></script>
 <script src=""></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 >
 
    <!-- angular templating -->
    <!-- this is where content will be injected -->
 
  </div>
 
  <!-- FOOTER -->
  <footer class="text-center">
    View the tutorial on <a href="/tutorials/angular-routing-and-templating-tutorial"></a>
  </footer>
 
</body>
</html>

In the page hyperlink, we use "#". We don't want the browser to think we are actually linking to and.
Angular Application
Models and controllers

At this point we are ready to set up our application. Let's create an angular model and controller first. For more information about the model and controller, please refer to the documentation.

First, we need to use javascript to create our model and controller, and we put this in:
 

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

Next let's add the model and controller to our HTML page so Angular can know how to guide our application. To test the function is effective, we will also show the value of a variable $ we created.
 

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

In the main div layer, we can now see the message we created. Knowing that our model and controller are set up and Angular can work properly, we will start using this layer to show different pages.

Inject the page into the main layout

ng-view is an angular directive used to contain the template of the current route (/home, /about, or /contact). It will get files based on a specific route and include them in the main layout ().

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

<!--  -->
...
 
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div >
 
  <!-- angular templating -->
  <!-- this is where content will be injected -->
  <div ng-view></div>
 
</div>
 
...

Configure routing and views

Since we are creating a single page application and do not want the page to be refreshed, we will use the ability of Angular routing.

Let's take a look at our Angular file and add it to our app. We will use $routeProvider in Angular to handle our routes. In this way, Angular will handle all the magical requests by taking a new file and injecting it into our layout.

AngularJS 1.2 and Routing

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

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

Now, we have defined our route through $routeProvider. By configuring you will find that you can use specified routes, template files, and even controllers. In this way, each part of our application uses the Angular controller and its own view.


Clean up URL: angular will put a pound sign into the URL by default. To avoid this, we need to use $locationProvider to enable the HTML History API. It will remove the hash and create a nice URL. Our home page will pull the files. The About and contact pages will pull the files they are associated with. Now if we view our app and click Navigation, our content will change as we want.

To complete this tutorial, we just need to define the pages that will be injected. We will also have them display messages from the controllers associated with them.
 

<!--  -->
<div class="jumbotron text-center">
  <h1>Home Page</h1>
 
  <p>{{ message }}</p>
</div>
 
<!--  -->
<div class="jumbotron text-center">
  <h1>About Page</h1>
 
  <p>{{ message }}</p>
</div>
 
<!--  -->
<div class="jumbotron text-center">
  <h1>Contact Page</h1>
 
  <p>{{ message }}</p>
</div>

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

Animation of Angular Apps

Once you have all the routes done, you can start playing with your site and animate it. To do this, you need to use the angular providedngAnimateModule. Later, you can use CSS animation to switch views using animation.
SEO on single page app

Ideally, this technology might be used in applications where users have logged in. You certainly don't really want pages of a specific user's private nature to be indexed by search engines. For example, you don't want your reader account, Facebook login page, or blog CMS page to be indexed to.

If you do SEO like you are targeting your app, how can you make SEO work on applications/sites that use js to build pages? Search engines are difficult to deal with these applications because the content is dynamically built by the browser and is invisible to crawlers.

Make your app SEO friendly

Make js single page application SEO-friendly technology need to be maintained regularly. According to the officialGoogle Recommendations, you need to create an HTML snapshot. An overview of how it works is as follows:

  • The crawler will find a friendly URL (/seofriendly#key=value)
  • Then the crawler will want the server to request the content corresponding to this URL (in a special modified method)
  • The web server will use an HTML snapshot to return the content
  • HTML snapshots will be processed by crawlers
  • Then the search results will display the original URL

For more information about this process, please check out Google'sAJAX CrawlerRelated to themCreate HTML snapshotsGuide to.