Thursday, January 04, 2018

Unknown

How to Create Single Page Application using AngularJs - Programing Project

How to Create Single Page Application using AngularJs - Programing Project

Hello Friends, I am here going to develop dynamic website single page application (SPA) with AngularJs.

I earlier post Introduction of angularJs. If you don’t know what is AngularJs please refer that.
Here I want get all records from .json file database. And suppose we have number of records we must have filter for that, we can able to search, filter, and sort with particular criteria.

Agenda: Making Simple page application which get all records from .json file database, and which has search filter with option criteria and sorting with dynamic given field using AngularJs only.
Steps:
  • Create Json Database OR fetch it json format from MySql server (here I am using json file as my database)
  • Create html view
  • Creating angularjs script logic for our requirement.

1.  Creating Json Database

Now create json database file from excel sheet.
Save your excel sheet file Save as .csv format.
Open .csv file and select records within it.
Open this link
in your browser, paste it here
Click “Convert” button.
Now copy all converted data from browser and paste it notepad.
Save as this file named with gr-centers.json
Note: while saving select “Save as Type” to All Files.

Done: You successfully created gr-centers.json Database.

2. Create spa.html file




<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

    <script src="app.js"></script>
 <style>

.table-striped>tbody>tr:nth-of-type(odd)
    {
        background: #AAD4FF !important;
    }

    .table-striped>tbody>tr:nth-of-type(even)
    {
        background: AAAAFF !important;
    }
    .tblHead{
        color: darkblue !important;
         }


table {
    border: 1px solid #ccc;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    width: 100% !important;
    table-layout: auto !important;
}


table tr {
    background: #f8f8f8;
    border: 1px solid #ddd;
  /*  padding: .1em; */
}
table th,
table td {
  /*  padding: .1em;
    text-align: center;  */
}
table th {
    font-size: .75em;
    letter-spacing: .1em;
    text-transform: uppercase;
}

@media screen and (max-width: 850px) {
    table {
        border: 0;
    }
    table caption {
        font-size: 1.3em;
    }
    table thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }
    table tr {
        border-bottom: 3px solid #ddd;
        display: block;
        margin-bottom: .8em;
    }
    table td {
        border-bottom: 1px solid #ddd;
        display: block;
        font-size: .1em;
        text-align: right;
    }
    table td:before {
        /*
        * aria-label has no advantage, it won't be read inside a table
        content: attr(aria-label);
        */
        content: attr(data-label);
        float: left;
        font-weight: bold;
        text-transform: uppercase;
    }
    table td:last-child {
        border-bottom: 0;
    }
}
</style>

</head>
<body>
 <br /><br />
<h3 class="heading-agileinfo yellow-w3ls">List of Branches  <strong style="color:darkblue;">XYZ Company</strong> </h3>
<div class="container" ng-app="myApp" ng-controller="DemoCtrl">
<div   ng-init="displayUsers()">


<label>By District</label>
<select ng-model="search.District" >
<option value="" >--All District--</option>

<option>Ahmadnagar</option>
<option>Akola</option>
<option>Amravati</option>
<option>Aurangabad</option>
<option>Bhandara</option>
<option>Beed</option>
<option>Buldana</option>
<option>Chandrapur</option>
<option>Dhule</option>
<option>Gadchiroli</option>
<option>Gondiya</option>
<option>Hingoli</option>
<option>Jalgaon</option>
<option>Jalna</option>
<option>Kolhapur</option>
<option>Latur</option>
<option>Mumbai City</option>
<option>Mumbai Suburban</option>
<option>Nagpur</option>
<option>Nanded</option>
<option>Nandurbar</option>
<option>Nashik</option>
<option>Osmanabad</option>
<option>Parbhani</option>
<option>Pune</option>
<option>Raigarh</option>
<option>Ratnagiri</option>
<option>Sangli</option>
<option>Satara</option>
<option>Sindhudurg</option>
<option>Solapur</option>
<option>Wardha</option>
<option>Washim</option>
<option>Yavatmal</option>


</select>



<label> By Sector</label>
<select ng-model="search.Sector" >
<option value="" >--All Sector--</option>
<option ng-repeat="x in res">{{x.Sector}}</option>
</select>

<label>Order By</label>
<select ng-model="order" >
<option value="" >--None--</option>
<option >Sector</option>
<option >District</option>
</select>

<br/>
<br/>

<table class="table table-striped" >

 <thead style="border: 1px solid;">
  <tr >
 <th scope="col">Sr No</th>
    <th scope="col">VTP Name</th>
    <th scope="col">Sector</th>
 <th scope="col">Address</th>
    <th scope="col">Contact No</th>
 <th scope="col">City</th>
  </tr>
 </thead>
 <tbody>
  
 </tbody>
 
 <tr ng-repeat=" x in res | filter:search | orderBy:order " >
 <td scope="row" data-label="Sr No">#{{$index + 1}}</td>
 <td data-label="VTP Name">{{ x.CenterName }}</td>
    <td data-label="Sector">{{ x.Sector }}</td>
 <td data-label="Address">{{ x.Address }}</td>
    <td data-label="Contact No">{{ x.ContactNo }}</td>
 <td data-label="City">{{ x.District }}</td>
  </tr>
 </table> 


</div>
</div>
</body>
</html>


In the above code we added ng-model="search.CenterName” for search filter and ng-model="order" for order by content.
We must add those filters within ng-repeat
ng-repeat= " x in res | filter:search | orderBy:order "


3. Create angularjs script

If you want use angular js first you must add its library within your project.
You can add angular js library from cdn ->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
OR Download and place to js folder
<script src= "js/angular.min.js"></script>

  • Now create angular file app.js and place it named js folder


var app = angular.module('myApp', []);

app.controller('DemoCtrl', function($scope, $http) {
 $scope.displayUsers = function() {
 
   $http.get('gr-centers.json').then(function (response) {
   $scope.res = response.data;
   
    },function(error){   
   $scope.err = error.data;
   
   });
   }
});


Download Complete Source Code
SPA-with-AnularJs.rar

Unknown

About Unknown -

I am Founder of Programming Project Blog,I have 6+ year's experience in Web Development and IT. I am working in software Field from 2011, I was worked so many projects related Desktop software's application or websites. While development phases I have faced so many little or big issues so I am decided now here after I will posting my all project issues in my development which are helpful for IT graduates, newbie software developer, website developer, or freelancer. I am Esak Shaikh, passionate about IT industry; I am computer application developer and website developer.

Subscribe to this Blog via Email :

1 comments:

Write comments
Unknown
AUTHOR
January 18, 2018 at 1:46 AM delete

Get Full-Course only in $40(DISCOUNT): https://www.udemy.com/toufiqelahy/?couponCode=40DOLL

Reply
avatar