![<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
<html ng-app="MyAngularModule" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://code.angularjs.org/1.2.2/angular.js"></script>
<script>
angular.module('MyAngularModule', [])
.controller('myAngularController', function (
$scope
) { });
</script>
</head>
<body ng-controller="myAngularController">
<table> <tbody ng-repeat="Numbers in [1, 2, 3, 4,5,6,7,8,9,10] ">
<tr>
<td> {{Numbers}} </td>
</tr>
</tbody>
</table>
<table>
<tbody ng-repeat="Names in ['Shanu','Afraz','Raja','Afreen','Mak','Albert'] ">
<tr>
<td> {{Names}} </td>
</tr>
</tbody>
</table>
</body>](https://image.slidesharecdn.com/azerbaijantechnicalunivweb-161206071234/85/ASP-NET-MVC-AngularJS-CRUD-for-Azerbaijan-Technical-University-7-320.jpg)
![<html ng-app="MyAngularModule" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://code.angularjs.org/1.2.2/angular.js"></script>
<script>
angular.module('MyAngularModule', [])
.controller('myAngularController', function (
$scope
) {
$scope.todayDate = new Date();
$scope.Names=[{name:'Shanu'}, {name:'Afraz'}, {name:'Afreen'},
{name:'Vijay'}, {name:'Mak'}, {name:'Raja'}]; });
</script>
</head>
<body ng-controller="myAngularController" >
Date : {{todayDate}}
<br/> Filter By Name : <input type="text" ng-model="myNameFilters">
<table border=1>
<td ng-click="predicate = 'name'; reverse=!reverse">
<b>Toy Code</b> </td> </tr>
<tbody ng-repeat="nme in Names | filter:myNameFilters |
orderBy:predicate:reverse">
<tr> <td> {{nme.name}} </td>
</tr> </tbody>
</table>
</body> </html>
<html ng-app="MyAngularModule" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"> <title></title>
<script src="http://code.angularjs.org/1.2.2/angular.js"></script>
<script>
angular.module('MyAngularModule', [])
.controller('myAngularController', function (
$scope ) { }); </script>
</head>
<body ng-controller="myAngularController" ng-init="Names = [{name:'Shanu'},
{name:'Afraz'}, {name:'Afreen'}, {name:'Vijay'},
{name:'Mak'}, {name:'Raja'}]">
Filter By NAme : <input type="text" ng-model="myNameFilters">
<table border=1>
<tr>
<td ng-click="predicate = 'name'; reverse=!reverse"> <b>Toy Code</b>
</td>
</tr>
<tbody ng-repeat="nme in Names | filter:myNameFilters |
orderBy:predicate:reverse">
<tr>
<td> {{nme.name}} </td>
</tr>
</tbody>
</table> </body> </html>](https://image.slidesharecdn.com/azerbaijantechnicalunivweb-161206071234/85/ASP-NET-MVC-AngularJS-CRUD-for-Azerbaijan-Technical-University-8-320.jpg)
![ Create Web API Controller
Note: Refer this website to get SQL Script
and study in depth to create this website
http://www.c-
sharpcorner.com/UploadFile/asmabegam/mvc-
angularjs-crud-using-web-api-2-with-stored-
procedure/
public class studentsController : ApiController
{
studentDBEntities objapi = new studentDBEntities();
// to Search Student Details and display the result
[HttpGet]
public IEnumerable<USP_Student_Select_Result> Get(string StudentName, string StudentEmail)
{
if (StudentName == null)
StudentName = "";
if (StudentEmail == null)
StudentEmail = "";
return objapi.USP_Student_Select(StudentName, StudentEmail).AsEnumerable();
}
// To Insert new Student Details
[HttpGet]
public IEnumerable<string> insertStudent(string StudentName, string StudentEmail, string Phone, string Address)
{
return objapi.USP_Student_Insert(StudentName, StudentEmail, Phone, Address).AsEnumerable();
}
//to Update Student Details
[HttpGet]
public IEnumerable<string> updateStudent(int stdID,string StudentName, string StudentEmail, string Phone, string Address)
{
return objapi.USP_Student_Update(stdID,StudentName, StudentEmail, Phone, Address).AsEnumerable();
}
//to Update Student Details
[HttpGet]
public string deleteStudent(int stdID)
{
objapi.USP_Student_Delete(stdID);
objapi.SaveChanges();
return "deleted";
}
}](https://image.slidesharecdn.com/azerbaijantechnicalunivweb-161206071234/85/ASP-NET-MVC-AngularJS-CRUD-for-Azerbaijan-Technical-University-16-320.jpg)
![ Creating AngularJs
Controller
Note: Refer this website to get SQL Script
and study in depth to create this website
http://www.c-
sharpcorner.com/UploadFile/asmabegam/mvc-
angularjs-crud-using-web-api-2-with-stored-
procedure/
Add Module first
Module as a container for the different
parts of your app – controllers, services,
filters, directives, etc
Most applications have a main method that
instantiates and wires together the different
parts of the application.
Angular apps don't have a main method.
Instead modules declaratively specify how
an application should be bootstrapped.
// <reference path="../angular.js" />
/// <reference path="../angular.min.js" />
/// <reference path="../angular-animate.js" />
/// <reference path="../angular-animate.min.js" />
var app;
(function () {
app = angular.module("RESTClientModule", ['ngAnimate']);
})();](https://image.slidesharecdn.com/azerbaijantechnicalunivweb-161206071234/85/ASP-NET-MVC-AngularJS-CRUD-for-Azerbaijan-Technical-University-18-320.jpg)
ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University
- 1. Azerbaijan Technical University ASP.NET MVC, ANGULARJS CRUD USING WEB API, EF WITH STORED PROCEDURE Date : 2017/12/01 By : SYED SHANU Email: [email protected]
- 2. My Name is Syed Shanu From Madurai, Tamil Nadu, India Microsoft MVP Code Project MVP Csharp Corner MVP 10+ years of Experience as Software Engineer Working as a Senior Software Engineer at Zemax Solution ,Seoul ,Korea Blogger | Author | Speaker
- 4. Introduction to MVC Introduction to AngularJs Introduction to SQL Server Introduction to WEB API Entity Framework Simple CRUD web application using MVC,AngularJs,Web API ,EF and SQL Server
- 7. <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> </script> <body> <div ng-app=""> <p>Name: <input type="text" ng-model="name"></p> <p ng-bind="name"></p> </div> </body> </html> <html ng-app="MyAngularModule" xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="http://code.angularjs.org/1.2.2/angular.js"></script> <script> angular.module('MyAngularModule', []) .controller('myAngularController', function ( $scope ) { }); </script> </head> <body ng-controller="myAngularController"> <table> <tbody ng-repeat="Numbers in [1, 2, 3, 4,5,6,7,8,9,10] "> <tr> <td> {{Numbers}} </td> </tr> </tbody> </table> <table> <tbody ng-repeat="Names in ['Shanu','Afraz','Raja','Afreen','Mak','Albert'] "> <tr> <td> {{Names}} </td> </tr> </tbody> </table> </body>
- 8. <html ng-app="MyAngularModule" xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="http://code.angularjs.org/1.2.2/angular.js"></script> <script> angular.module('MyAngularModule', []) .controller('myAngularController', function ( $scope ) { $scope.todayDate = new Date(); $scope.Names=[{name:'Shanu'}, {name:'Afraz'}, {name:'Afreen'}, {name:'Vijay'}, {name:'Mak'}, {name:'Raja'}]; }); </script> </head> <body ng-controller="myAngularController" > Date : {{todayDate}} <br/> Filter By Name : <input type="text" ng-model="myNameFilters"> <table border=1> <td ng-click="predicate = 'name'; reverse=!reverse"> <b>Toy Code</b> </td> </tr> <tbody ng-repeat="nme in Names | filter:myNameFilters | orderBy:predicate:reverse"> <tr> <td> {{nme.name}} </td> </tr> </tbody> </table> </body> </html> <html ng-app="MyAngularModule" xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="http://code.angularjs.org/1.2.2/angular.js"></script> <script> angular.module('MyAngularModule', []) .controller('myAngularController', function ( $scope ) { }); </script> </head> <body ng-controller="myAngularController" ng-init="Names = [{name:'Shanu'}, {name:'Afraz'}, {name:'Afreen'}, {name:'Vijay'}, {name:'Mak'}, {name:'Raja'}]"> Filter By NAme : <input type="text" ng-model="myNameFilters"> <table border=1> <tr> <td ng-click="predicate = 'name'; reverse=!reverse"> <b>Toy Code</b> </td> </tr> <tbody ng-repeat="nme in Names | filter:myNameFilters | orderBy:predicate:reverse"> <tr> <td> {{nme.name}} </td> </tr> </tbody> </table> </body> </html>
- 10. Work with Multiple Browsers like Chrome, IE, Firefox, Safari and Opera Database API
- 12. Using Note: Refer this website to get SQL Script and study in depth to create this website http://www.c- sharpcorner.com/UploadFile/asmabegam/mvc- angularjs-crud-using-web-api-2-with-stored- procedure/
- 13. Create Database and Table Create SQL Stored Procedure for performing CRUD operations Note: Refer this website to get SQL Script and study in depth to create this website http://www.c- sharpcorner.com/UploadFile/asmabegam/mvc- angularjs-crud-using-web-api-2-with-stored- procedure/
- 14. Create MVC Web Application in Visual Studio 2015 Note: Refer this website to get SQL Script and study in depth to create this website http://www.c- sharpcorner.com/UploadFile/asmabegam/mvc- angularjs-crud-using-web-api-2-with-stored- procedure/
- 15. Note: Refer this website to get SQL Script and study in depth to create this website http://www.c- sharpcorner.com/UploadFile/asmabegam/mvc- angularjs-crud-using-web-api-2-with-stored- procedure/ Create Entity framework in our MVC Application
- 16. Create Web API Controller Note: Refer this website to get SQL Script and study in depth to create this website http://www.c- sharpcorner.com/UploadFile/asmabegam/mvc- angularjs-crud-using-web-api-2-with-stored- procedure/ public class studentsController : ApiController { studentDBEntities objapi = new studentDBEntities(); // to Search Student Details and display the result [HttpGet] public IEnumerable<USP_Student_Select_Result> Get(string StudentName, string StudentEmail) { if (StudentName == null) StudentName = ""; if (StudentEmail == null) StudentEmail = ""; return objapi.USP_Student_Select(StudentName, StudentEmail).AsEnumerable(); } // To Insert new Student Details [HttpGet] public IEnumerable<string> insertStudent(string StudentName, string StudentEmail, string Phone, string Address) { return objapi.USP_Student_Insert(StudentName, StudentEmail, Phone, Address).AsEnumerable(); } //to Update Student Details [HttpGet] public IEnumerable<string> updateStudent(int stdID,string StudentName, string StudentEmail, string Phone, string Address) { return objapi.USP_Student_Update(stdID,StudentName, StudentEmail, Phone, Address).AsEnumerable(); } //to Update Student Details [HttpGet] public string deleteStudent(int stdID) { objapi.USP_Student_Delete(stdID); objapi.SaveChanges(); return "deleted"; } }
- 17. Creating AngularJs Controller Note: Refer this website to get SQL Script and study in depth to create this website http://www.c- sharpcorner.com/UploadFile/asmabegam/mvc- angularjs-crud-using-web-api-2-with-stored- procedure/
- 18. Creating AngularJs Controller Note: Refer this website to get SQL Script and study in depth to create this website http://www.c- sharpcorner.com/UploadFile/asmabegam/mvc- angularjs-crud-using-web-api-2-with-stored- procedure/ Add Module first Module as a container for the different parts of your app – controllers, services, filters, directives, etc Most applications have a main method that instantiates and wires together the different parts of the application. Angular apps don't have a main method. Instead modules declaratively specify how an application should be bootstrapped. // <reference path="../angular.js" /> /// <reference path="../angular.min.js" /> /// <reference path="../angular-animate.js" /> /// <reference path="../angular-animate.min.js" /> var app; (function () { app = angular.module("RESTClientModule", ['ngAnimate']); })();
- 19. Creating AngularJs Controller Note: Refer this website to get SQL Script and study in depth to create this website http://www.c- sharpcorner.com/UploadFile/asmabegam/mvc- angularjs-crud-using-web-api-2-with-stored- procedure/ Add Controller AngularJS applications are controlled by controllers. The ng-controller directive defines the application controller. A controller is a JavaScript Object, created by a standard JavaScript object constructor. app.controller("AngularJs_studentsController", function ($scope, $timeout, $ro otScope, $window, $http) { $scope.date = new Date(); $scope.MyName = "shanu"; $scope.stdName = ""; $scope.stdemail = ""; $scope.showStudentAdd = true; $scope.addEditStudents = false; $scope.StudentsList=true; $scope.showItem = true; //This variable will be used for Insert/Edit/Delete Students details. $scope.StdIDs = 0; $scope.stdNames = ""; $scope.stdEmails = ""; $scope.Phones = ""; $scope.Addresss = "";
- 20. Student Search Note: Refer this website to get SQL Script and study in depth to create this website http://www.c- sharpcorner.com/UploadFile/asmabegam/mvc- angularjs-crud-using-web-api-2-with-stored- procedure/
- 21. Angular CRUD Method Note: Refer this website to get SQL Script and study in depth to create this website http://www.c- sharpcorner.com/UploadFile/asmabegam/mvc- angularjs-crud-using-web-api-2-with-stored- procedure/ //to get all Student Details selectStudentDetails($scope.stdName, $scope.stdemail); function selectStudentDetails(StudentName, StudentEmail) { $http.get('/api/students/', { params: { StudentName: StudentName, StudentEmail: StudentEmail } }).success(function (data) { $scope.Students = data; $scope.showStudentAdd = true; $scope.addEditStudents = false; $scope.StudentsList = true; $scope.showItem = true; }) .error(function () { $scope.error = "An Error has occured while loading posts!"; }); } //Search $scope.searchStudentDetails = function () { selectStudentDetails($scope.stdName, $scope.stdemail); } // New Student Add Details $scope.showStudentDetails = function () { cleardetails(); $scope.showStudentAdd = true; $scope.addEditStudents = true; $scope.StudentsList = true; $scope.showItem = true; } //Edit Student Details $scope.studentEdit = function studentEdit(StudentID, Name, Email, Phone, Address) { cleardetails(); $scope.StdIDs = StudentID; $scope.stdNames = Name $scope.stdEmails = Email; $scope.Phones = Phone; $scope.Addresss = Address; $scope.showStudentAdd = true; $scope.addEditStudents = true; $scope.StudentsList = true; $scope.showItem = true; } //Delete Dtudent Detail $scope.studentDelete = function studentDelete(StudentID, Name) { cleardetails(); $scope.StdIDs = StudentID; var delConfirm = confirm("Are you sure you want to delete the Student " + Name + " ?"); if (delConfirm == true) { $http.get('/api/students/deleteStudent/', { params: { stdID: $scope.StdIDs } }).success(function (data) { alert("Student Deleted Successfully!!"); cleardetails(); selectStudentDetails('', ''); }) .error(function () { $scope.error = "An Error has occured while loading posts!"; }); } }
- 22. Add New Student Note: Refer this website to get SQL Script and study in depth to create this website http://www.c- sharpcorner.com/UploadFile/asmabegam/mvc- angularjs-crud-using-web-api-2-with-stored- procedure/
- 23. Edit New Student Note: Refer this website to get SQL Script and study in depth to create this website http://www.c- sharpcorner.com/UploadFile/asmabegam/mvc- angularjs-crud-using-web-api-2-with-stored- procedure/
- 24. Angular CRUD Method Note: Refer this website to get SQL Script and study in depth to create this website http://www.c- sharpcorner.com/UploadFile/asmabegam/mvc- angularjs-crud-using-web-api-2-with-stored- procedure/ //clear all the control values after insert and edit. function cleardetails() { $scope.StdIDs = 0; $scope.stdNames = ""; $scope.stdEmails = ""; $scope.Phones = ""; $scope.Addresss = ""; } //Form Validation $scope.Message = ""; $scope.IsFormSubmitted = false; $scope.IsFormValid = false; $scope.$watch("f1.$valid", function (isValid) { $scope.IsFormValid = isValid; }); //Save Student $scope.saveDetails = function () { $scope.IsFormSubmitted = true; if ($scope.IsFormValid) { //if the Student ID=0 means its new Student insert here i will call the Web api insert method if ($scope.StdIDs == 0) { $http.get('/api/students/insertStudent/', { params: { StudentName: $scope.stdNames, StudentEmail: $scope.stdEmails, Phone: $scope.Phones, Address: $scope.Addresss } }).success(function (data) { $scope.StudentsInserted = data; alert($scope.StudentsInserted); cleardetails(); selectStudentDetails('', ''); }) .error(function () { $scope.error = "An Error has occured while loading posts!"; }); } else { // to update to the student details $http.get('/api/students/updateStudent/', { params: { stdID: $scope.StdIDs, StudentName: $scope.stdNames, StudentEmail: $scope.stdEmails, Phone: $scope.Phones, Address: $scope.Addresss } }).success(function (data) { $scope.StudentsUpdated = data; alert($scope.StudentsUpdated); cleardetails(); selectStudentDetails('', ''); }) .error(function () { $scope.error = "An Error has occured while loading posts!"; }); } } else { $scope.Message = "All the fields are required."; } }
- 25. Delete Student Details Note: Refer this website to get SQL Script and study in depth to create this website http://www.c- sharpcorner.com/UploadFile/asmabegam/mvc- angularjs-crud-using-web-api-2-with-stored- procedure/