AngularJS is a open source high level javascript framework written by google for make web development easy and efficient . It Mainly follows MVC design pattern for development . It is highly efficient framework and most popular also . In Starting it impresses every user who uses it because of its digest cycle . When ever you make changes to ng-models in html it is automatically and spontaneously shows output in javascript and HTML page also in other places . But later it is understood that because of this digest cycle application becomes slow As the data increases in the modals .Many of them will ask as Angular 5 is out why i am writing about angularJS . AngularJS is now also used by many big companies round the world it will take some time to switch to Angular 2 . Dont worry we will also learn Angular 2 in details in coming sessions . You can get a good job in angularJS . So dont stop learning .
AngularJS is Mainly Divided into Three Parts Controllers , Directives , Services .
Controllers :
AngularJS Controls the data of the component for which it is defined . It is mainly initiated by $scope object which is update after any event is fired in the dom . It contains information of models and its data . Lets take an example of $scope in controller
<input ng-model="Name" placeholder="Name" />
In JS you can access this ng-model Name any time you want
console.log($scope.Name);
Directives:
AngularJS lets you extend HTML with new attributes called Directives. It has a set of built-in directives which offers functionality to your applications and also lets you define your own directives. It Gives your HTML Tag new power . You can change , Append , Remove DOM through this directive . It makes your application fully responsive. Many inbuilt Directives are
ng-model = To Bind your input to the modal
ng-init = It is used to initiate modals with specific values
ng-app = It is used to initiate application
ng-repeat= It is used iterate over an array and repeat all html tags coming inside it
and many more every directives have different functionalities .You can also create your own custom diretives
Services:
In AngularJS, a service is a function, or object, that is available for, and limited to, your AngularJS application. AngularJS has about 30 built-in services. For many services, like the $location service, it seems like you could use objects that are already in the DOM, like the window.location object, and you could, but it would have some limitations, at least for your AngularJS application. AngularJS constantly supervises your application, and for it to handle changes and events properly, AngularJS prefers that you use the $location service instead of the window.location object. Inbuilt Services contains $http ,$timout etc
You Can also Create your own custom service to complete your needs . You can create different filter services for your application . Which services can be used to filter your output .
To learn more about AngularJS you can prefer there official website
Example
We Will be completing task of your student details system . You can find task here .
Requirements :
- Visual Studio Code . you can find help here .
- PHP Api for consuming You can find here how to develop PHP api .
- Basic knowledge of angularJS . from here.
- W3.css for beautification of HTML Copy this link in headers (<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">)
- AngularJS CDN copy this link in the end of body (<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>)
We need to write two files in for making angular Application
- HTML file (here we will write our template )
- App.js here we will write application logic in details by using Angular JS Framework
FULL Code of HTML Website is here with AngularJS directives
<html ng-app="StudentApp" ng-cloak> <head > <title>Student Angular App</title> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> </head> <body ng-controller="StudentController"> <div style="width:100%;text-align:center"> <h1> Student Detail System</h1> </div> <div style="width:100%;align-content: center"> <div style="margin:10px;display: inline-block;"> Name :<input name="Name" type="text" ng-model="Name" ></div> <div style="margin:10px;display: inline-block;"> Address :<input name="Address" type="text" ng-model="Address"></div> <div style="margin:10px;display: inline-block;"> Telephone :<input name="Telephone" type="text" ng-model="Telephone"></div> <div style="margin:10px;display: inline-block;"> Standard :<input name="Standard" type="text" ng-model="Standard"></div> <div style="margin:10px;display: inline-block;" > Roll Number :<input name="RollNumber" type="text" ng-model="RollNumber"></div> </div> <div class="w3-cell-row w3-center w3-padding"> <input name="submit" ng-click="Insert()" class="w3-btn w3-blue w3-border w3-margin" type="submit" value="Insert"/> <input name="Update" ng-click="Update()" class="w3-btn w3-blue w3-border w3-margin" type="submit" value="Update"/> <input name="Delete" ng-click="Delete()" class="w3-btn w3-blue w3-border w3-margin" type="submit" value="Delete"/> </div> <table class="w3-table-all w3-small "> <tr > <td ng-hide="true">Student_ID</td> <td>Name</td> <td>Address</td> <td>Telephone</td> <td>Standard</td> <td>Roll Number</td> <td>Update / Delete</td> </tr> <tr ng-repeat="item in items" class='w3-hover-blue' style='cursor:pointer;'> <td ng-hide="true">{{item.student_id}}</td> <td>{{item.Name}}</td> <td>{{item.Address}}</td> <td>{{item.Telephone}}</td> <td>{{item.Standard}}</td> <td>{{item.Roll_Number}}</td> <td><button ng-click="Select($index)" >Select</button></td> </tr> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> <script src="app.js"></script> </body> </html>
Here Points to be noted:
- Firstly we have initiated ng-app with name . Which we declare in App.JS after ward
- Then We have initiated our ng-controller . With which we will modifying in app.js
- Then We have assign ng-models with modals so that we can access its value behind code.
- Then we have used ng-repeat to iterate to the array and show data in table format
- We have put events on Insert, Update and Delete
Insert Operation:
Code For Insert Operation
$scope.Insert=function() { if(CheckData()) { var payload = new FormData(); payload.append("Type", "Insert"); payload.append("Name", $scope.Name); payload.append("Address", $scope.Address); payload.append("Telephone", $scope.Telephone); payload.append("Standard", $scope.Standard); payload.append("Roll_Number", $scope.RollNumber); $http({ method: 'POST', url: url, data: payload, headers : { 'Content-Type': undefined }, }).success(function (data) { alert(data.msg); $scope.clear(); $scope.getData(); }); } }
To do insert Operation you need to append all Models to form data and then call Web API to submit data and Insert records . Here URL is your local machine wamp server url . here our url will http://localhost/StudentApi . Where we have written our api . We will also provide Type here as Insert because in our API we are doing operation regarding this type only .We are using here $http Service to send data and receives its response in terms of json . We have written two more function as $scope.clear() and $scope.getData() . We have written these to function to clear all our inputs and reset our table data . Code for these to functions are given below
$scope.getData=function() {var payload = new FormData(); payload.append("Type", "GetAllRecords"); $http({ method: 'POST', url: url, data: payload, headers : { 'Content-Type': undefined }, }).success(function (data) { $scope.items= data.data; });}
Here We are taking User Information from tables using GetAllRecords Type and Populated array which we have showed in html table format
$scope.clear=function() { $scope.Name= ""; $scope.Address= ""; $scope.Telephone= ""; $scope.Standard= ""; $scope.RollNumber= ""; $scope.Student_ID ="0"; }
Here we are clearing all our models . So that we can accept other modals
Update Operation:
Code For Update Operation
$scope.Update=function() { if(CheckData() && $scope.Student_ID != "0") { var payload = new FormData(); payload.append("Type", "Update"); payload.append("Name", $scope.Name); payload.append("Address", $scope.Address); payload.append("Telephone", $scope.Telephone); payload.append("Standard", $scope.Standard); payload.append("Roll_Number", $scope.RollNumber); payload.append("student_id", $scope.Student_ID); $http({ method: 'POST', url: url, data: payload, headers : { 'Content-Type': undefined }, }).success(function (data) { alert(data.msg); $scope.clear(); $scope.getData(); }); } }
For Update you need first select records from table by clicking on select button . All modals will be populated with selected data then for performing Update Operation you need to append all Models to form data along with student_id for which we want to update record and then call Web API to submit data and Update records . Here URL is your local machine wamp server url . here our url wil bel http://localhost/StudentApi . Where we have written our api . We will also provide Type here as Update because in our API we are doing operation regarding this type only .We are using here $http Service to send data and receives its response in terms of json .
Select Record :
$scope.Select=function(index) { console.log("Checker"); $scope.Name= $scope.items[index].Name; $scope.Address= $scope.items[index].Address; $scope.Telephone= $scope.items[index].Telephone; $scope.Standard= $scope.items[index].Standard; $scope.RollNumber= $scope.items[index].Roll_Number; $scope.Student_ID =$scope.items[index].student_id; }
To Select Record You need to just pass index and assign Arrays row of that index to modals it will populate modals
Delete Operation:
Code For Delete Operation
$scope.Delete=function() { if(CheckData() && $scope.Student_ID != "0") { var payload = new FormData(); payload.append("Type", "Delete"); payload.append("student_id", $scope.Student_ID); $http({ method: 'POST', url: url, data: payload, headers : { 'Content-Type': undefined }, }).success(function (data) { alert(data.msg); $scope.clear(); $scope.getData(); }); } }
For Delete you need first select records from table by clicking on select button . All modals will be populated with selected data then for performing Delete Operation you need to append student_id to form data and then call Web API to submit data and Delete records . Here URL is your local machine wamp server url . here our url wil bel http://localhost/StudentApi . Where we have written our api . We will also provide Type here as Update because in our API we are doing operation regarding this type only .We are using here $http Service to send data and receives its response in terms of json .
Full App.js code is available here .
var app= angular.module('StudentApp',[]); app.controller('StudentController',['$scope','$http',function($scope,$http){ var url = 'http://localhost/StudentApi/'; $scope.Student_ID="0"; $scope.getData=function() {var payload = new FormData(); payload.append("Type", "GetAllRecords"); $http({ method: 'POST', url: url, data: payload, headers : { 'Content-Type': undefined }, }).success(function (data) { $scope.items= data.data; });} $scope.getData(); function CheckData() { if($scope.Name == "" || $scope.Name == undefined || $scope.Address == "" || $scope.Address == undefined || $scope.Telephone == "" || $scope.Telephone == undefined || $scope.Standard == "" || $scope.Standard == undefined || $scope.RollNumber == "" || $scope.RollNumber == undefined) { alert("Kindly enter All Fields"); return false; }else return true } $scope.Insert=function() { if(CheckData()) { var payload = new FormData(); payload.append("Type", "Insert"); payload.append("Name", $scope.Name); payload.append("Address", $scope.Address); payload.append("Telephone", $scope.Telephone); payload.append("Standard", $scope.Standard); payload.append("Roll_Number", $scope.RollNumber); $http({ method: 'POST', url: url, data: payload, headers : { 'Content-Type': undefined }, }).success(function (data) { alert(data.msg); $scope.clear(); $scope.getData(); }); } } $scope.Update=function() { if(CheckData() && $scope.Student_ID != "0") { var payload = new FormData(); payload.append("Type", "Update"); payload.append("Name", $scope.Name); payload.append("Address", $scope.Address); payload.append("Telephone", $scope.Telephone); payload.append("Standard", $scope.Standard); payload.append("Roll_Number", $scope.RollNumber); payload.append("student_id", $scope.Student_ID); $http({ method: 'POST', url: url, data: payload, headers : { 'Content-Type': undefined }, }).success(function (data) { alert(data.msg); $scope.clear(); $scope.getData(); }); } } $scope.Select=function(index) { console.log("Checker"); $scope.Name= $scope.items[index].Name; $scope.Address= $scope.items[index].Address; $scope.Telephone= $scope.items[index].Telephone; $scope.Standard= $scope.items[index].Standard; $scope.RollNumber= $scope.items[index].Roll_Number; $scope.Student_ID =$scope.items[index].student_id; } $scope.Delete=function() { if(CheckData() && $scope.Student_ID != "0") { var payload = new FormData(); payload.append("Type", "Delete"); payload.append("student_id", $scope.Student_ID); $http({ method: 'POST', url: url, data: payload, headers : { 'Content-Type': undefined }, }).success(function (data) { alert(data.msg); $scope.clear(); $scope.getData(); }); } } $scope.clear=function() { $scope.Name= ""; $scope.Address= ""; $scope.Telephone= ""; $scope.Standard= ""; $scope.RollNumber= ""; $scope.Student_ID ="0"; } }]);
You can just and paste to visual studio code both index.html and app.js data your application will work.
Leave a Comment
No Comments Yet