Tag Archives: Single Page Application

AngularJS, ASP.Net, HTML5, HTTP & HTTPS, JavaScript, jQuery, jQuery AJAX

How HTTPS Works : Part1

I wanted to write a basic article on How HTTPS works , then I got this below article , so am gonna share his Article here . Hope , all will enjoy this one .

http://blog.hartleybrody.com/https-certificates/

And I will write more on HTTPS in Part2,3… etc …

Cheers 🙂

Standard
AngularJS, HTML5

AngularJS Routing : Part 2 – make # (Hash) invisible from URL in SPA

Before reading this Article , Please check out AngularJS Routing : Part 1 Create a Single Page Application (SPA) first .

Every AngularJS Dev likes the way that the routing of AngularJS works . It uses # (Hash) in the URL like below –

###

But Its not very readable for Public User , non Tech people , mass people of the world , so its better to make the # invisible from the URL . And Yes, Its real EASY !!!

First Set the Html5Mode to true in LocationProvider . Now the app.js file will be like :::

spaApp.config(function ($routeProvider, $locationProvider) {

    $locationProvider.html5Mode(true);

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

});

And my index.html code will be like below now :::

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

My SPA Site is now without that # …

#less

Standard
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

Standard