React

Single Page Application (SPA) with React

Let’s talk about ReactJS today and how we can easily create a Single Page Application (SPA) with React. For routing , I will use a library called react-router . For this post, I will use v3.x . I will write another article based on v4.x.

ReactJS is really popular now a days , and developers are using ReactJS and react-router for creating SPAs .

react spa

I will use 4 Routes for my sample SPA with React. For this , I created 4 Components which represent 4 different routes.
Then we can import 4 Components on index.js file like below-

import App from './App/Components/App.jsx';
import Profile from './App/Components/Profile.jsx';
import Contact from './App/Components/Contact.jsx';
import Error from './App/Components/404.jsx';

Our `404.jsx` is actually for 404 or not found route.

We can use those Components to create out SPA routing with react-router-

<Router history={hashHistory}>
    <Route path="/" component={App}>
        <Route path="/profile" component={Profile}/>
        <Route path="/contact" component={Contact}/>
        <Route path="*" component={Error}/>
    </Route>
  </Router>

The full Code is available here https://github.com/destromas1/react-spa

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