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
1 comments:
Write commentsGet Full-Course only in $40(DISCOUNT): https://www.udemy.com/toufiqelahy/?couponCode=40DOLL
Reply