Single page web app using AngularJs

AngularJs provides ng-route and ng-view directive and by using them we can easily develop our single page web app. In this tutorial i am going to show you how to develop simple one page web application using AngularJs.

ng-route manage routing of web application. By routing i mean when you click on link in ordinary web page you get redirected to target anchor link. By using ng-route we can handle those routes.

LIVE DEMO DOWNLOAD

ng-view allow us to render different templates on particular view depending upon the router. For example, if user hits example.com/about then route will tell to load particular template for this route.

Our project:

We are building simple web app, we are consist of following files.

---- index.html ( Starting page)
---- home.html  ( template )
---- about.html ( template )
---- script.js  ( Angular code )

Here is how it works.

working

Before explanation let me show you the code. First have a look at index.html.

index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Single page web app using Angularjs</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular-route.min.js">   </script>    
<script src="script.js"></script>
</head>
<body ng-app="single-page-app">
  <div ng-controller="cfgController">
  <div>
  <nav>
         <ul>
        <li><a href="#/">Home</a></li>
        <li><a href="#/about">About us</a></li>
      </ul>
</nav>
</div>
  <br/>
  <div ng-view>
  <!--
     This DIV loads templates depending upon route.
 -->
  </div>
  </div>
</body>
</html>

Here is our angular code. Responsible for handling routes and updating view.

script.js
var app=angular.module('single-page-app',['ngRoute']);
app.config(function($routeProvider){
      $routeProvider
          .when('/',{
                templateUrl: 'home.html'
          })
          .when('/about',{
                templateUrl: 'about.html'
          });
});
app.controller('cfgController',function($scope){

    /*     
    Here you can handle controller for specific route as well.
    */

});

If you have noticed $routeProvide here we are loading home and about HTML files into view. Let’s have a look on to them too.

home.html
<h1>Hello, world!</h1>
  <p>....</p>
  <p>
    This is executed because of this code.
    <pre>
      <code>
        .when('/',{
              templateURl: 'home.html'
        })

about.html
<h1>About us page.</h1>
 <p>......</p>
 <p>
   This is executed because of this code.
   <pre>
     <code>
       .when('/about',{
             templateURl: 'about.html'
       })

Explanation:

The main code which does the magic is this.

   .when('/',{
                templateUrl: 'home.html'
          })
          .when('/about',{
                templateUrl: 'about.html'
          });

Depending upon your templates and routes you can add more in it. As you see, when particular URL hits, we simply passing our file URL and Angular automatically Loads it into ng-view.

How to run the code:

Download file, serve it using any web server, for ease you can use XAMPP package to install web server. Put directory into HTDOCS folder and run through browser.

Conclusion:

Single page web application is very intuitive and easy to use. In this, web app used to load once and then only particular part of app keeps on changing without refreshing whole page which saves bandwidth as well as no loading of external files again and again such as Images or CSS files which in most of web app is static.

Shahid (UnixRoot) Shaikh

Hey there, This is Shahid, an Engineer and Blogger from Bombay. I am also an Author and i wrote a programming book on Sails.js, MVC framework for Node.js.

Related Posts

37 Comments

  1. Please provide me best method for POST data to post the Simple HTML form Using PHP and Ajax in AngularJS

  2. Thanks a lot !!!!! It really helped me. You just shown in a very easy way. Can you post an article about lazy loading ???

  3. Excellent tutorial!!
    This is what I have been searching for for days now; a tutorial that is simple and easy to follow – showing and explaining the basics for easy understanding.

    Thanks a million!!

  4. Awesome tutorial. Question — (still very very new to angular) — is the controller meant for all your “routing” instructions? Then your view would be what the controller routes “to”?

    Fair to say it like that?

    Thanks again!

  5. what would it take to fix the nav so that the class=active changes according to what is selected rather than having home always active?

  6. what would it take to fix the navigation to update according to what is selected? currently home is always active? tx?

  7. Hi there. currently when they navigate, the Home link always remains active – how would one change that?
    tx.

  8. Hi,
    Very easy to understand tutorial you have here.
    One question though: Can one load PHP pages too. My pages are in PHP and not HTML. Is that possible ?

  9. Shahid,
    This is what I was looking for. Thank You.
    Although, your demo runs well on Firefox. It gives a cross-origin error for Chrome.
    Can you please guide me on how can I make it work on other browsers.
    Appreciate any help.

  10. Hey Thanks!
    Its very easy to understand tutorial you have here.
    i am just started learning AngularJs & so,looking for more Tutorials on AngularJs.. If possible can You help Me on this ..
    I look forward for your suggestions…

  11. Good tutorial Shahid, thanks for share !
    How to handle each controller for the views (templates). Let’s say “about_controller.js” with “AboutController” for “about.html” and “home_controller.js” with “HomeController” for “home.html” ?
    Should I load both .js inside “index.html”?
    Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *