Offshore AngularJS- development- Hire-AngularJS-Developers- Outsource-AngularJS-Development
ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University
-
Upload
syed-shanu -
Category
Education
-
view
120 -
download
1
Transcript of ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University
![Page 1: ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University](https://reader035.fdocuments.net/reader035/viewer/2022081604/589ee6ee1a28abe97f8b4bf3/html5/thumbnails/1.jpg)
Azerbaijan Technical University
ASP.NET MVC, ANGULARJS CRUD US-ING WEB
API, EF WITH STORED PROCEDURE
Date : 2017/12/01
By : SYED SHANUEmail: [email protected]
![Page 2: ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University](https://reader035.fdocuments.net/reader035/viewer/2022081604/589ee6ee1a28abe97f8b4bf3/html5/thumbnails/2.jpg)
About Me
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
![Page 3: ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University](https://reader035.fdocuments.net/reader035/viewer/2022081604/589ee6ee1a28abe97f8b4bf3/html5/thumbnails/3.jpg)
Session Prerequisites
Visual Studio 2015
SQL Server 2014
![Page 4: ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University](https://reader035.fdocuments.net/reader035/viewer/2022081604/589ee6ee1a28abe97f8b4bf3/html5/thumbnails/4.jpg)
Agenda
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
![Page 5: ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University](https://reader035.fdocuments.net/reader035/viewer/2022081604/589ee6ee1a28abe97f8b4bf3/html5/thumbnails/5.jpg)
MVC (Model View Controller)
Database
Controller
Model
View
User
![Page 6: ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University](https://reader035.fdocuments.net/reader035/viewer/2022081604/589ee6ee1a28abe97f8b4bf3/html5/thumbnails/6.jpg)
ANGULARJS
Data Binding
Providers
Validators
Directives
Controllers
Modules
Expressions
Services
Dependency Injection
Filters
Scope
ANGULARJS
Factories
![Page 7: ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University](https://reader035.fdocuments.net/reader035/viewer/2022081604/589ee6ee1a28abe97f8b4bf3/html5/thumbnails/7.jpg)
<!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>
ANGULARJS<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>
Data Bind
ng-repeat
![Page 8: ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University](https://reader035.fdocuments.net/reader035/viewer/2022081604/589ee6ee1a28abe97f8b4bf3/html5/thumbnails/8.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>
ANGULARJS<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>
Filter Scope
![Page 9: ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University](https://reader035.fdocuments.net/reader035/viewer/2022081604/589ee6ee1a28abe97f8b4bf3/html5/thumbnails/9.jpg)
SQL SERVERhttp://www.c-sharpcorner.com/UploadFile/asmabegam/basic-sql-queries-for-beginners/
DBMSSoftwareDatabase
![Page 10: ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University](https://reader035.fdocuments.net/reader035/viewer/2022081604/589ee6ee1a28abe97f8b4bf3/html5/thumbnails/10.jpg)
Web API
Work with Multiple Browsers like Chrome, IE, Firefox, Safari and Opera
Database API
![Page 11: ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University](https://reader035.fdocuments.net/reader035/viewer/2022081604/589ee6ee1a28abe97f8b4bf3/html5/thumbnails/11.jpg)
Entity Framework
Entity FrameworkEDM
Application
ADO.NET
Database
![Page 12: ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University](https://reader035.fdocuments.net/reader035/viewer/2022081604/589ee6ee1a28abe97f8b4bf3/html5/thumbnails/12.jpg)
Simple CRUD web Application
① SQL Server 2014
② ASP.NET MVC③ Entity
Framework④ Web API⑤ AngularJS
Using
Note: Refer this website to get SQL Script and study in depth to create this websitehttp://www.c-sharpcorner.com/UploadFile/asmabegam/mvc-angularjs-crud-using-web-api-2-with-stored-procedure/
![Page 13: ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University](https://reader035.fdocuments.net/reader035/viewer/2022081604/589ee6ee1a28abe97f8b4bf3/html5/thumbnails/13.jpg)
Simple CRUD web Application
① SQL Server 2014 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 websitehttp://www.c-sharpcorner.com/UploadFile/asmabegam/mvc-angularjs-crud-using-web-api-2-with-stored-procedure/
![Page 14: ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University](https://reader035.fdocuments.net/reader035/viewer/2022081604/589ee6ee1a28abe97f8b4bf3/html5/thumbnails/14.jpg)
Create MVC Web Application in Visual Studio 2015
Simple CRUD web Application Note: Refer this website to get SQL Script and study in depth to create this websitehttp://www.c-sharpcorner.com/UploadFile/asmabegam/mvc-angularjs-crud-using-web-api-2-with-stored-procedure/
![Page 15: ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University](https://reader035.fdocuments.net/reader035/viewer/2022081604/589ee6ee1a28abe97f8b4bf3/html5/thumbnails/15.jpg)
CRUD web Application Note: Refer this website to get SQL Script and study in depth to create this websitehttp://www.c-sharpcorner.com/UploadFile/asmabegam/mvc-angularjs-crud-using-web-api-2-with-stored-procedure/
Create Entity framework in our MVC Application
![Page 16: ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University](https://reader035.fdocuments.net/reader035/viewer/2022081604/589ee6ee1a28abe97f8b4bf3/html5/thumbnails/16.jpg)
Create Web API Controller
CRUD web Application Note: Refer this website to get SQL Script and study in depth to create this websitehttp://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"; } }
![Page 17: ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University](https://reader035.fdocuments.net/reader035/viewer/2022081604/589ee6ee1a28abe97f8b4bf3/html5/thumbnails/17.jpg)
Creating AngularJs Controller
CRUD web Application Note: Refer this website to get SQL Script and study in depth to create this websitehttp://www.c-sharpcorner.com/UploadFile/asmabegam/mvc-angularjs-crud-using-web-api-2-with-stored-procedure/
![Page 18: ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University](https://reader035.fdocuments.net/reader035/viewer/2022081604/589ee6ee1a28abe97f8b4bf3/html5/thumbnails/18.jpg)
Creating AngularJs Controller
CRUD web Application Note: Refer this website to get SQL Script and study in depth to create this websitehttp://www.c-sharpcorner.com/UploadFile/asmabegam/mvc-angularjs-crud-using-web-api-2-with-stored-procedure/
Add Module firstModule as a container for the different parts of your app – controllers, services, filters, directives, etcMost 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']);})();
![Page 19: ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University](https://reader035.fdocuments.net/reader035/viewer/2022081604/589ee6ee1a28abe97f8b4bf3/html5/thumbnails/19.jpg)
Creating AngularJs Controller
CRUD web Application Note: Refer this website to get SQL Script and study in depth to create this websitehttp://www.c-sharpcorner.com/UploadFile/asmabegam/mvc-angularjs-crud-using-web-api-2-with-stored-procedure/
Add ControllerAngularJS 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, $rootScope, $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 = "";
![Page 20: ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University](https://reader035.fdocuments.net/reader035/viewer/2022081604/589ee6ee1a28abe97f8b4bf3/html5/thumbnails/20.jpg)
Student Search
CRUD web Application Note: Refer this website to get SQL Script and study in depth to create this websitehttp://www.c-sharpcorner.com/UploadFile/asmabegam/mvc-angularjs-crud-using-web-api-2-with-stored-procedure/
![Page 21: ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University](https://reader035.fdocuments.net/reader035/viewer/2022081604/589ee6ee1a28abe97f8b4bf3/html5/thumbnails/21.jpg)
Angular CRUD Method
CRUD web Application Note: Refer this website to get SQL Script and study in depth to create this websitehttp://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!"; }); } }
![Page 22: ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University](https://reader035.fdocuments.net/reader035/viewer/2022081604/589ee6ee1a28abe97f8b4bf3/html5/thumbnails/22.jpg)
Add New Student
CRUD web Application Note: Refer this website to get SQL Script and study in depth to create this websitehttp://www.c-sharpcorner.com/UploadFile/asmabegam/mvc-angularjs-crud-using-web-api-2-with-stored-procedure/
![Page 23: ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University](https://reader035.fdocuments.net/reader035/viewer/2022081604/589ee6ee1a28abe97f8b4bf3/html5/thumbnails/23.jpg)
Edit New Student
CRUD web Application Note: Refer this website to get SQL Script and study in depth to create this websitehttp://www.c-sharpcorner.com/UploadFile/asmabegam/mvc-angularjs-crud-using-web-api-2-with-stored-procedure/
![Page 24: ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University](https://reader035.fdocuments.net/reader035/viewer/2022081604/589ee6ee1a28abe97f8b4bf3/html5/thumbnails/24.jpg)
Angular CRUD Method
CRUD web Application Note: Refer this website to get SQL Script and study in depth to create this websitehttp://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."; } }
![Page 25: ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University](https://reader035.fdocuments.net/reader035/viewer/2022081604/589ee6ee1a28abe97f8b4bf3/html5/thumbnails/25.jpg)
Delete Student Details
CRUD web Application Note: Refer this website to get SQL Script and study in depth to create this websitehttp://www.c-sharpcorner.com/UploadFile/asmabegam/mvc-angularjs-crud-using-web-api-2-with-stored-procedure/
![Page 26: ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University](https://reader035.fdocuments.net/reader035/viewer/2022081604/589ee6ee1a28abe97f8b4bf3/html5/thumbnails/26.jpg)
More Resources
https://mvp.microsoft.com/en-us/PublicProfile/5001980?fullName=Syed%20%20Shanu
http://www.c-sharpcorner.com/members/syed-shanu
http://www.codeproject.com/Articles/syed-shanu
![Page 27: ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University](https://reader035.fdocuments.net/reader035/viewer/2022081604/589ee6ee1a28abe97f8b4bf3/html5/thumbnails/27.jpg)
Questions ?
![Page 28: ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University](https://reader035.fdocuments.net/reader035/viewer/2022081604/589ee6ee1a28abe97f8b4bf3/html5/thumbnails/28.jpg)
Contact Me
@syedshanu3
https://www.facebook.com/syed.shanu.9
http://www.c-sharpcorner.com/members/syed-shanu