Thursday, 31 December 2015

single page application angularjs example

Here I am demonstrating a single page application (SPA) in AngularJs example.
Simple application for basic financial calculator like below; As I used it in mobile cordova application showing the sample for mobile application Screen (Single page application in AngularJs for mobile)


We should include the Some javascript file in application that you can download from below resources for single page application angularjs



Bootstrap : http://getbootstrap.com/getting-started/#download
Angular : Download from  https://code.angularjs.org/1.3.5/
angular-route :  Download from https://code.angularjs.org/1.3.5/


Follow the below steps to create a simple Single Page application:

Step 1: Place the ng-app in the Html tag of your Index.html,
<html ng-app="myApp">


Step 2 : Include your all JS and CSS in Head tag
<head>
    <meta charset="utf-8" />

    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
    <title>helloWorld</title>

    <!—Outside CSS and JS you need to download from respective source -->
        <link href="css/bootstrap.min.css" rel="stylesheet" />
    <script src="scripts/jquery.min.js"></script>
    <script src="scripts/bootstrap.min.js"></script>
    <script src="scripts/angular.min.js"></script>
    <script src="scripts/route.js"></script>

<!—Below two files not required if you are working on web -->
    <script src="cordova.js"></script>
    <script src="scripts/platformOverrides.js"></script>

    <!—Application using JS and CSS -->
    <link href="css/index.css" rel="stylesheet" />
    <script src="scripts/index.js"></script>
    <script src="scripts/application.js"></script>
</head>



Step 3: Place the menu items in the Header section of the body tag like below;
If you will see the link like  below; href=”#loan” for this we need to create a separate HTML file and with the Help of routing only it will redirect to the particular html file so there, it will work like Key and value will be your html (e.g. Loan.html) and controller of that html page.  Check step 4 for how to do the routing configuration.
<a data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" href="#Loan">Loan</a>

<body>
    <header>
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button"  class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Financial calculator</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" data-toggle="collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <!--<li><a href="#">Action</a></li>-->
                        <li><a data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" href="#Loan">Loan</a></li>
                        <li><a data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" href="#RecurringDeposit">Recurring Deposit</a></li>
                        <li><a  data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" href="#FixedDeposit">Fixed Deposit</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
    </header>

    <!-- MAIN CONTENT AND INJECTED VIEWS -->
    <div id="main">
       
        <!-- angular templating -->
        <!-- this is where content will be injected -->
        <div ng-view></div>

    </div>
</body>

Step 4: Need to include one JS file I have included scripts/application.js just initialize the ng-app and provide the routing configuration like below;
If you check in the below code there we are injecting the ngRoute on module and providing the configuration for  another page with controller name  e.g.
.when('/FixedDeposit', {templateUrl: 'FixedDeposit.html',controller: 'FixedDeposit'})

When user look for FixedDeposit than template URL load as FixedDeposit.html and load controller as Fixeddeposit.

Code Snippet for Single page application in AngularJs for routing
var app = angular.module('myApp', ['ngRoute']);

// configure our routes
app.config(function ($routeProvider) {
    $routeProvider

        // route for the FixedDeposit as default and first page
        .when('/', {
            templateUrl: 'FixedDeposit.html',
            controller: 'FixedDeposit'
        })

        // route for the FixedDeposit page
        .when('/FixedDeposit', {
            templateUrl: 'FixedDeposit.html',
            controller: 'FixedDeposit'
        })

        // route for the Loan page

         .when('/Loan', {
             templateUrl: 'Loan.html',
             controller: 'Loan'
         })

        // route for the Recurring Deposit page
        .when('/RecurringDeposit', {
            templateUrl: 'RecurringDeposit.html',
            controller: 'RecurringDeposit'
        })
        .otherwise({
            redirectTo: '/',
            templateUrl: 'FixedDeposit.html',
            controller: 'FixedDeposit'
        });
});



Step 5: Place controller for all the another page so you can perform operation for that controller and it will load for that page. You can place the below code in same page or in another page. If you want a separate file for each need to initialize module; (single page application angularjs example)
Code Snippet
// Controller for fixed deposit
app.controller('FixedDeposit', function ($scope) {
    // create a message to display in our view
        //$scope.inprinciple = 0;
        //$scope.inRateofInt = 0;
        //$scope.inTime = 0;

        $scope.Result = function () {
            P = $scope.inprinciple;
            r = $scope.inRateofInt;
            n = 4 //  number of times the interest is compounded per year
            t = $scope.inTime;
            var cal = Math.pow((1 + ((r / 100) / n)),(n * t));
            var result = P * cal;
           // var result = Math.pow(cal, power);
            return result;
        }
});

// Controller for Loan
app.controller('Loan', function ($scope) {
    $scope.message = 'Check the details about Loan.';
});

app.controller('RecurringDeposit', function ($scope) {
    $scope.message = 'Check details about recusrring deposit';
});



Step 6 : Create pages which you required in application as:

Loan.html;
Skelton for Loan.html
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body ng-controller="Loan">
    <div class="jumbotron text-center">
<!—You can place your content overe here -->

        <h1>Loan</h1>
        <p>{{ message }}</p>
    </div>
</body>
</html>

RecurringDeposit.html
Skelton for Recurring Deposit

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body ng-controller="RecurringDeposit">
    <div class="jumbotron text-center">
        <h1>Recurring Deposit</h1>

        <p>{{ message }}</p>
    </div>
</body>
</html>
FixedDeposit.html;

You can use below code it follow the bootstrap and angular JS to calculate the fixed Deposit.
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body ng-controller="FixedDeposit">
    <h1>Fixed Deposit</h1>
    <div id="home" style="margin: 4px" class="tab-pane fade in active">
        <label for="inprinciple">Principle</label>
        <div class="input-group">
            <input type="number" class="form-control" id="inprinciple" ng-model="inprinciple" placeholder="princple" aria-describedby="basic-addon1">
            <span class="input-group-addon">.00</span>
        </div>

        <label for="inprinciple">Percentage</label>
        <div class="input-group">
  <input type="number" class="form-control" id="inpercentage" placeholder="Percentage" ng-model="inRateofInt" aria-describedby="basic-addon2">
<span class="input-group-addon">%</span>
        </div>
        <label for="inprinciple">Duration Type</label>
        <div class="input-group">
            <select type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
                <option value="Days">Days</option>
                <option value="Months">Months</option>
                <option value="Year">Year</option>
            </select>
            <span class="input-group-addon">@</span>
        </div>

        <label for="inprinciple">Duration</label>
        <div class="input-group">
            <input type="number" class="form-control" placeholder="Duration" ng-model="inTime" aria-label="Amount (to the nearest dollar)">
            <span class="input-group-addon">#</span>
        </div>
       <br />

        <label for="inprinciple">Intrest</label>
        <div class="input-group">
              {{ Result() - inprinciple }}
        </div>

        <label for="inprinciple">Total Amount</label>
        <div class="input-group">
            {{ Result() }}
        </div>
        </div>
</body>
</html>


Now your application is ready you can test it;

Page with menu; (single page application angularjs example)

Page redirection to another (single page application angularjs example)



No comments:

Post a Comment