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

Monday, December 04, 2017

Unknown

Making Simple Dynamic Website With AngularJs - Programing Project

Let me introduce What is AngularJs?

Making Simple Dynamic Website With AngularJs - Programing Project

AngularJS is a JavaScript framework for building dynamic web apps with easy way. You can use Angular within HTML. AngularJS's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it ideal partner with any server technology. 

Main Features of AngularJs
  • Two Way Data-Binding
  • MVC
  • Dependency Injection
  • Directives
  • Testing
 
What you should  Know:
1. HTML
2. CSS
3. Java Script

Environment Setup AngularJs 

It can be added to an HTML page with a <script> tag, you can use cdn or simply download from their official Sitehttps://angularjs.org/
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

Key Concept About AngularJs 
AngularJS extends HTML with ng-directives.
The ng-app directive defines an AngularJS application. 
The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
The ng-bind directive binds application data to the HTML view.

AngularJs Hello World Program

<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<head/>  
<body>

<div ng-app="">
  <p>Say Hi to Angular: <input type="text" ng-model="hellovar"></p>
  <p ng-bind="hellovar"></p>
</div>

</body>
</html>

 

Let run this code on your PC
Read More

Thursday, November 01, 2012

Unknown

How to Lock hide folder

How to Lock hide folder


Hello Friends.....
   
Friends you have some sensitive data on your PC and you people want to protect him your brother, sister and other friends. So you people going to use some folder lock software.

    But simple way you can hide your private data using this tip.....
    Let us try.............
  1. Create Folder where you want in your PC, in my case D drive D:\private.
  2. Keep your data into your folder
  3. Type -> attrib +s +h D:\private press enter.
   Now you done the job. Your folder is absolutely hidden, if you checked option "show hidden folders" still nobody can view your folder.
   If you want to view your folder, let us type
  1. Type -> attrib -s -h D:\private press enter.
Protect Your Data.


Read More