ASP.NET MVC 및 Entity Framework에서 AngularJS를 사용하는 방법
요즘에는 모두가 AngularJS와 ASP.NET MVC에 대해 이야기하는 것 같습니다. 따라서 이 게시물에서는 ASP.NET MVC 애플리케이션에서 AngularJS를 사용하는 방법을 시연하여 두 세계의 장점을 결합하고 ASP.NET MVC AngularJS의 장점을 사용하는 방법을 배웁니다.
요즘에는 모두가 AngularJS와 ASP.NET MVC에 대해 이야기하는 것 같습니다. 따라서 이 게시물에서는 ASP.NET MVC 애플리케이션에서 AngularJS를 사용하는 방법을 시연함으로써 두 세계의 장점을 결합하고 ASP.NET MVC AngularJS의 장점을 사용하는 방법을 배웁니다.
ASP.NET MVC에서 AngularJS를 사용하는 방법에 대해 배우기 전에 웹 애플리케이션을 더 빠르게 작성하고 실행하는 데 도움이 되는 ' jQuery 라이브러리, Ignite UI for JavaScript Infragistics 확인하십시오. Ignite UI for JavaScript 라이브러리를 사용하여 HTML5, jQuery, Angular, React 또는 ASP.NET MVC에서 복잡한 LOB 요구 사항을 빠르게 해결할 수 있습니다. 지금 바로 Ignite UI 무료 평가판을 다운로드하세요.
시작하려면 ASP.NET MVC 응용 프로그램을 만들고 MVC 프로젝트를 마우스 오른쪽 버튼으로 클릭합니다. 상황에 맞는 메뉴에서 Manage Nuget Package를 클릭합니다. AngularJS 패키지를 검색하여 프로젝트에 설치합니다.

AnngularJS 라이브러리를 성공적으로 추가한 후 Scripts 폴더 내에서 해당 파일을 찾을 수 있습니다.
참조: AngularJS 라이브러리
프로젝트에 AngularJS 라이브러리 참조를 추가하는 두 가지 옵션, 즉 MVC 축소 및 번들링 또는 개별 뷰의 스크립트 섹션에 AngularJS를 추가하는 옵션이 있습니다. 번들링을 사용하면 전체 프로젝트에서 AngularJS를 사용할 수 있습니다. 그러나 특정 뷰에서도 AngularJS를 사용할 수 있는 옵션이 있습니다.
홈 컨트롤러의 특정 뷰(Index.cshtml)에서 AngularJS를 사용한다고 가정해 보겠습니다. 먼저 아래와 같이 scripts 섹션 내의 AngularJS 라이브러리를 참조해야 합니다.
@section scripts{ <script src="~/Scripts/angular.js"></script> }
그런 다음 아래와 같이 HTML 요소에 ng-app 지시문 및 기타 필수 지시문을 적용합니다.
<div ng-app="" class="row"> <input type="text" ng-model="name" /> {{name}} </div>
응용 프로그램을 실행하면 인덱스 보기에서 AngularJS가 실행 중임을 알 수 있습니다. 이 접근 방식에서는 AngularJS 라이브러리가 인덱스 보기에서만 참조되기 때문에 다른 보기에서 AngularJS를 사용할 수 없습니다.
전체 MVC 응용 프로그램에서 AngularJS를 사용해야 할 수도 있습니다. 이 경우 레이아웃 수준에서 MVC 및 모든 AngularJS 라이브러리의 번들링 및 축소를 사용하는 것이 좋습니다. 이렇게 하려면 App_Start 폴더에서 BundleConfig.cs 열고 아래와 같이 AngularJS 라이브러리에 대한 번들을 추가합니다.
public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/bundles/angular").Include("~/Scripts/angular.js"));
BundleConfig 파일에 번들을 추가한 후 아래에 나열된 대로 _Layout.cshtml에 AngularJS 번들을 추가해야 합니다.
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@ViewBag.Title - My ASP.NET Application</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") @Scripts.Render("~/bundles/angular") @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @RenderSection("scripts", required: false) </head>
AngularJS 번들을 만들고 _Layout.cshtml에서 참조한 후에는 전체 애플리케이션에서 AngularJS를 사용할 수 있어야 합니다.
데이터베이스 및 AngularJS의 데이터
지금까지 특정 보기 수준과 전체 애플리케이션 수준에서 AngularJS를 설정하는 방법을 살펴보았습니다. 이제 다음 작업을 수행할 종단 간 MVC 응용 프로그램을 만들어 보겠습니다.
- EF 데이터베이스 우선 접근 방식을 사용하여 데이터베이스에서 데이터 가져오기
- MVC 컨트롤러에서 JSON 반환
- $http 사용하여 데이터를 가져오는 AngularJS 서비스 만들기
- Create an AngularJS controller
- MVC 뷰에서 AngularJS 뷰를 만들어 테이블에 데이터를 표시합니다.
ef Database First 접근 방식을 사용하여 데이터베이스에 연결
EF 데이터베이스 우선 접근 방식을 사용하여 데이터베이스에 연결하려면 MVC 애플리케이션을 마우스 오른쪽 단추로 클릭하고 새 항목을 선택합니다. 데이터 탭에서 아래 이미지와 같이 Entity Model(엔티티 모델) 옵션을 선택해야 ADO.NET.

다음 화면에서 "데이터베이스의 EF 디자이너" 옵션을 선택합니다.

다음 화면에서 새 연결 옵션을 클릭합니다. 데이터베이스에 대한 새 연결을 만들려면:
- Provide the database server name
- 드롭다운에서 데이터베이스를 선택합니다. 여기서는 "School" 데이터베이스로 작업하고 있으므로 드롭다운에서 선택했습니다.

다음 화면에서 연결 문자열의 기본 이름을 그대로 두고 다음을 클릭합니다.

다음 화면에서 모델의 일부로 유지하려는 테이블과 다른 엔터티를 선택합니다. 간단하게 유지하기 위해 모델에서 "Person"테이블 만 사용하고 있습니다.

현재 데이터베이스와의 연결을 생성했으며 모델이 프로젝트에 추가되었습니다. edmx 파일이 프로젝트의 일부로 추가된 것을 볼 수 있습니다.
MVC 컨트롤러에서 json 반환
Person 데이터를 JSON으로 반환하기 위해 반환 유형 JsonResult를 사용하여 컨트롤러에 작업을 추가해 보겠습니다. JSON 데이터를 반환하는 웹 API를 쉽게 작성할 수 있습니다. 그러나이 게시물의 목적은 AngularJS로 작업하는 방법을 보여주는 것이므로 JSON 데이터를 반환하는 작업을 만드는 가장 간단한 옵션을 고수하겠습니다.
public JsonResult GetPesrons() { SchoolEntities e = new SchoolEntities(); var result = e.People.ToList(); return Json(result, JsonRequestBehavior.AllowGet); }
$HTTP 사용하여 데이터를 가져오는 AngularJS 서비스 만들기
여기에서는 이러한 AngularJS 용어에 대한 지식이 이미 있다고 가정하지만 주요 개념에 대한 간략한 검토 / 소개는 다음과 같습니다.
Controller
컨트롤러는 데이터와 비즈니스 로직을 포함하는 JavaScript 생성자 함수입니다. 컨트롤러와 뷰는 $scope 개체를 사용하여 서로 통신합니다. 뷰에서 컨트롤러를 사용할 때마다 인스턴스가 생성됩니다. 따라서 10 번 사용하면 생성자의 10 개의 인스턴스가 생성됩니다.
서비스
서비스는 응용 프로그램 수명 주기당 한 번씩 인스턴스가 생성되는 JavaScript 함수입니다. 컨트롤러에서 공유되는 모든 항목은 서비스의 일부여야 합니다. 서비스는 다섯 가지 방법으로 만들 수 있습니다. 가장 널리 사용되는 방법은 서비스 방식 또는 팩토리 방식을 사용하는 것입니다. 예를 들어, $http 서비스는 Angular 앱에서 HTTP 기반 서비스를 호출하는 데 사용할 수 있지만 서비스를 사용하기 전에 서비스를 주입해야 합니다.
Modules
모듈은 서비스 또는 컨트롤러와 같은 다른 기능을 포함하는 JavaScript 함수입니다. Angular 앱당 하나 이상의 모듈이 있어야 합니다.
참고 : 이것들은 이러한 AngularJS 개념에 대한 가장 간단한 정의입니다. 웹에서 더 자세한 정보를 찾을 수 있습니다.
이제 모듈 생성을 시작하겠습니다! 먼저 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 JavaScript 파일을 추가합니다. 원하는 대로 부를 수 있지만 이 예에서는 StudentClient.js라고 부르겠습니다.
StudentClient.js에서 모듈과 간단한 컨트롤러를 만들었습니다. 나중에 MVC 작업에서 데이터를 가져오도록 컨트롤러를 수정합니다.
var StudentApp = angular.module("StudentApp", []); StudentApp.controller("StudentController", function ($scope) { $scope.message = "Infrgistics"; });
먼저 보기에서 모듈과 컨트롤러를 사용하려면 StudentClient.js에 참조를 추가한 다음 ng-app 지시문의 값을 모듈 이름 StudentApp으로 설정해야 합니다. 방법은 다음과 같습니다.
@section scripts{ <script src="~/StudentClient.js"></script> } <div ng-app="StudentApp" class="row"> <div ng-controller="StudentController"> {{message}} </div> </div>
이 시점에서 응용 프로그램을 실행하면 뷰에서 렌더링된 Infragistics 찾을 수 있습니다. 서비스를 만드는 것부터 시작하겠습니다. 공장 방식을 사용하여 맞춤 서비스를 만듭니다. 서비스에서 $http 내장 서비스를 사용하면 컨트롤러의 작업 메서드가 호출됩니다. 여기서는 서비스를 동일한 StudentService.js 파일에 넣습니다.
StudentApp.factory("StudentService", [ "$http", function ($http) { var StudentService = {}; StudentService.getStudents = function () { return $http.get("/Home/GetPersons"); }; return StudentService; }, ]);
서비스가 만들어지면 다음으로 컨트롤러를 만들어야 합니다. 컨트롤러에서 사용자 지정 서비스를 사용하고 반환된 데이터를 $scope 개체에 할당합니다. 아래 코드에서 컨트롤러를 만드는 방법을 살펴보겠습니다.
StudentApp.controller("StudentController", function ($scope, StudentService) { getStudents(); function getStudents() { StudentService.getStudents() .success(function (studs) { $scope.students = studs; console.log($scope.students); }) .error(function (error) { $scope.status = "Unable to load customer data: " + error.message; console.log($scope.status); }); } });
여기에서 컨트롤러, 서비스 및 모듈을 만들었습니다. 모든 것을 합치면 StudentClient.js 파일은 다음과 같아야 합니다.
var StudentApp = angular.module("StudentApp", []); StudentApp.controller("StudentController", function ($scope, StudentService) { getStudents(); function getStudents() { StudentService.getStudents() .success(function (studs) { $scope.students = studs; console.log($scope.students); }) .error(function (error) { $scope.status = "Unable to load customer data: " + error.message; console.log($scope.status); }); } }); StudentApp.factory("StudentService", [ "$http", function ($http) { var StudentService = {}; StudentService.getStudents = function () { return $http.get("/Home/GetPersons"); }; return StudentService; }, ]);
보기에서 아래와 같이 컨트롤러를 사용할 수 있지만 Index.cshtml에 AngularJS 보기를 만들고 있다는 점을 명심하십시오. 보기는 아래와 같이 생성할 수 있습니다.
@section scripts{ <script src="~/StudentClient.js"></script> } <div ng-app="StudentApp" class="container"> <br/> <br/> <input type="text" placeholder="Search Student" ng-model="searchStudent" /> <br /> <div ng-controller="StudentController"> <table class="table"> <tr ng-repeat="r in students | filter : searchStudent"> <td>{{r.PersonID}}</td> <td>{{r.FirstName}}</td> <td>{{r.LastName}}</td> </tr> </table> </div> </div>
뷰에서 ng-app, ng-controller, ng-repeat 및 ng-model 지시문을 "filter"와 함께 사용하여 텍스트 상자에 입력 된 입력에서 테이블을 필터링합니다. 기본적으로 다음은 ASP.NET MVC 응용 프로그램에서 AngularJS로 작업하는 데 필요한 단계입니다.
결론
이 게시물에서는 AngularJS와 ASP.NET MVC 함께 작업하기 위한 간단하지만 중요한 몇 가지 단계에 중점을 두었습니다. 또한 몇 가지 주요 AngularJS 구성 요소, EF 데이터베이스 우선 접근 방식 및 MVC의 기본 정의에 대해서도 설명했습니다. 이후 게시물에서 이 주제에 대해 더 자세히 설명하겠지만 이 게시물이 ASP.NET MVC에서 AngularJS를 시작하는 데 도움이 되기를 바랍니다.
또한 HTML5, Angular, React 및 ASP.NET MVC와 함께 사용하여 풍부한 인터넷 응용 프로그램을 만들 수 있는 JavaScript용 Ignite UI 확인하는 것을 잊지 마십시오. 모든 JavaScript 컨트롤의 평가판을 무료로 다운로드할 수 있습니다.
