Asp.Net, C#.Net, Angularjs, Entity Framework, JQuery, MVC, Interview Question: 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,

Step 2 : Include your all JS and CSS in Head tag

<head>

<title>helloWorld</title>

<!—Outside CSS and JS you need to download from respective source -->

<!—Below two files not required if you are working on web -->

<!—Application using JS and CSS -->

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

<body>

<span class="sr-only">Toggle navigation</span>

</button>

<a class="navbar-brand" href="#">Financial calculator</a>

</div>

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

</div>

</nav>

</header>

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

</head>

<!—You can place your content overe here -->

<p>{{ message }}</p>

</div>

</body>

</html>

RecurringDeposit.html

Skelton for Recurring Deposit

<!DOCTYPE html>

<html>

<head>

</head>

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

</head>

<h1>Fixed Deposit</h1>

<label for="inprinciple">Principle</label>

</div>

<label for="inprinciple">Percentage</label>

</div>

<label for="inprinciple">Duration Type</label>

<option value="Months">Months</option>

</select>

</div>

<label for="inprinciple">Duration</label>

</div>

<br />

<label for="inprinciple">Intrest</label>

</div>

<label for="inprinciple">Total Amount</label>

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

Labels

Thursday 31 December 2015

single page application angularjs example

No comments:

Post a Comment