AngularJS, HTML5

AngularJS Routing : Part 1 – Create a Single Page Application (SPA)

A single-page application (SPA), also known as single-page interface (SPI), is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application.

And developing SPA has been so easier with AngularJS Route Service .

Application routes in Angular are declared via the $routeProvider, which is the provider of the $route service. This service makes it easy to wire together controllers, view templates, and the current URL location in the browser. Using this feature we can implement deep linking, which lets us utilize the browser’s history (back and forward navigation) and bookmarks.

I am gonna show how to build simple SPA within 1 hour 🙂

Here is my index.html Code ::: (ASP.Net developers can think this index.html as MasterPage)

<!DOCTYPE html>
<html ng-app="SpaApp">
<head>
    <meta charset="utf-8" />
    <title>My SPA Site</title>
    <script src="lib/angular.min.js" type="text/javascript"></script>    
    <script src="app/app.js" type="text/javascript"></script>
    <link href="styles/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div>
        <a href="/">
            <h1>My SPA Site</h1>
        </a>
        <br />
        <table>
            <tr>
                <td>
                    <a href="/">Home <i class="icon-arrow-down"></i></a>
                </td>
                <td>
                    <a href="#/profile">Profile <i class="icon-arrow-down"></i></a>
                </td>
                <td>
                    <a href="#/contact">Contact <i class="icon-arrow-down"></i></a>
                </td>
            </tr>
        </table>
        <br />
         <div ng-view></div>
    </div>
</body>
</html>

The $route service is usually used in conjunction with the ngView directive. The role of the ngView directive is to include the view template for the current route into the layout template, which makes it a perfect fit for our index.html template.

(This ngView directive can be compared as Main ContentPlaceHolder of ASP.Net , just saying for .Net Devs )

My app.js code is like below :::

var spaApp = angular.module('SpaApp', []);

spaApp.config(function ($routeProvider) {

    $routeProvider.when("/", { templateUrl: "/partials/home.html" }).
                   when("/profile", { templateUrl: "/partials/profile.html" }).
                   when("/contact", { templateUrl: "/partials/contact.html" }).
                   otherwise({ redirectTo: '/' });

});

In this RouteProvider we can define URL and HTML Template .

And For this App , I have 3 Partial Views . The codes of these views are like below :::

home.html
———-

<div>
    <h2>This is Home Page</h2>
</div>

profile.html
————-

<div>
    <h2>This is Profile Page</h2>
</div>

contact.html
————-

<div>
    <h2>This is Contact Page</h2>
</div>

So Here , you are done with the simple SPA Site 🙂

The Site will look like – >

#

To Read Part 2 -> Please Click AngularJS Routing : Part 2 – make # (Hash) invisible from URL in SPA

Advertisements
Standard

3 thoughts on “AngularJS Routing : Part 1 – Create a Single Page Application (SPA)

  1. Pingback: AngularJS Routing : Part 2 – make # (Hash) invisible from URL in SPA | Shahjada Talukdar MasooM

  2. sushant saraswat says:

    Hi Shahjada, Awesome post. You have explained very clearly about Angular JS. I thoroughly enjoyed and gained valuable knowledge from your post.

    In my quest to learn more about the SPA, I have registered for a webinar on Benefits of developing Single Page Web Applications using AngularJS, it looks a promising one http://j.mp/1a9aK6t

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s