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 a 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.


ng-view allow us to render different templates on particular view depending upon the router. For example, if user hits 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.


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


<html lang="en">
  <meta charset="UTF-8">
  <title>Single page web app using Angularjs</title>
  <script src="//"></script>
  <script src="//">   </script>    
<script src="script.js"></script>
<body ng-app="single-page-app">
  <div ng-controller="cfgController">

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

var app=angular.module('single-page-app',['ngRoute']);
                templateUrl: 'home.html'
                templateUrl: 'about.html'

    Here you can handle controller for a 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.

<h1>Hello, world!</h1>
    This is executed because of this code.
              templateURl: 'home.html'

<h1>About us page.</h1>
   This is executed because of this code.
             templateURl: 'about.html'


The main code which does the magic is this.

                templateUrl: 'home.html'
                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.


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.

37 thoughts on “Single page web app using AngularJs”

  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!
    Explains stuff in an intuitive way. Very convenient to follow.

  4. 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!!

  5. 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!

  6. 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?

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

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

  9. Can you please write an article on pagination or infinite scroll in Angular JS ?

  10. How can we add an page preloading effect……can we show a loader animation before the page loads…

  11. 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 ?

  12. 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.

  13. nagarjuna tamarada

    i m unable to view in single page site in google chrome browser remaining browsers it’s looking fine. how can i solve it. and also how to add active css in these navigation bar.

  14. 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…

  15. It’s a nice tutorial regarding Angular JS. Now I am able to work directly on the production website.

    Thanks lot!!!!

  16. 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”?

    1. Shahid (UnixRoot) Shaikh

      Yes you need to load both files when page loads or another way is to inject it dynamically, that’s little tricky.

  17. Hi,
    I am learning Angularjs science last 6 month, you have given very useful and understandable example hope it will help me.
    Thanks for given examples.

Comments are closed.