Breeze/Angular 템플릿

작성 자: Mads Kristensen

브리즈 /Angular MVC 템플릿은 워드 벨에 의해 작성되었습니다

Breeze/Angular MVC 템플릿 다운로드

AngularJS는 SPA(단일 페이지 애플리케이션)를 빌드하기 위한 Google의 오픈 소스 라이브러리입니다. 데이터 바인딩, 종속성 주입 및 화면 관리를 제공합니다. 데이터 모델링 및 데이터 관리를 위한 또 다른 오픈 소스 라이브러리인 BreezeJS와 결합하면 훌륭한 HTML/JavaScript 클라이언트 앱을 위한 필수 요소가 있습니다.

Breeze/Angular SPA 템플릿은 ASP.NET 및 Web Tools 2012.2 업데이트에 포함된 KnockoutJS SPA 템플릿의 변형입니다. Visual Studio가 있는 경우 60초 이내에 SPA를 시작하고 실행하는 예제가 있습니다.

외부적으로 애플리케이션은 KnockoutJS SPA 템플릿과 매우 유사합니다. 그러나 그것은 후드에서 매우 다르다. KnockoutJS 템플릿은 데이터 바인딩에 Knockout을 사용하고 데이터 액세스를 위해 원시 AJAX를 사용합니다. Breeze/Angular 템플릿은 데이터 바인딩에 Angular 사용하고 데이터 액세스를 위해 Breeze를 사용합니다. 이러한 라이브러리를 사용하면 페이지 탐색 및 기록을 비롯한 추가 기능을 사용할 수 있습니다.

애플리케이션의 정보 페이지에는 다음을 포함하여 현재 사용자 세션 중에 실행 중인 이벤트 로그가 표시됩니다.

• 페이징. Todo 컨트롤러 만들기를 확인합니다.
• 원격 쿼리 및 로컬 캐시 쿼리.
• 새 엔터티 및 수정된 엔터티 저장.
• 변경 내용이 클라이언트에서 유효성을 검사하므로 사용자가 데이터베이스에 변경 내용을 커밋하기 전에 실수를 수정할 수 있습니다.

이 템플릿에는 다음을 포함하여 더 많은 것을 살펴볼 수 있습니다.

• HTML 보기 템플릿의 동적 로드.
• Angular "지시문"을 통한 사용자 지정 데이터 바인딩
• 모듈성 및 종속성 주입.
• 관련 엔터티의 필터, 정렬, 페이징, 프로젝션 및 포함을 쿼리합니다.
• 여러 화면에서 데이터를 공유합니다.
• 여러 변경 내용을 단일 트랜잭션으로 저장합니다.
• 유효성 검사 규칙은 서버에서 JavaScript 클라이언트로 자동으로 전파됩니다.

이제 시작하겠습니다.

Breeze/Angular 템플릿 프로젝트 만들기

위의 다운로드 단추를 클릭하여 템플릿을 다운로드하고 설치합니다. 템플릿은 VSIX(Visual Studio 확장) 파일로 패키지됩니다. Visual Studio를 다시 시작해야 할 수 있습니다.

템플릿 창에서 설치된 템플릿을 선택하고 Visual C# 노드를 확장합니다. Visual C#에서 웹을 선택합니다. 프로젝트 템플릿 목록에서 MVC 4 웹 애플리케이션 ASP.NET 선택합니다. 프로젝트 이름을 지정하고 확인을 클릭합니다.

새 프로젝트 마법사에서 브리즈 Angular SPA를 선택합니다.

Ctrl-F5를 눌러 디버깅하지 않고 애플리케이션을 빌드하고 실행하거나 F5 키를 눌러 디버깅으로 실행합니다.

애플리케이션이 처음 실행되면 로그인 화면이 표시됩니다. "등록" 링크를 클릭하면 사용자 이름과 암호를 입력할 수 있는 새 페이지가 표시됩니다. (로그인 및 등록 페이지는 ASP.NET MVC를 사용하여 빌드됩니다.) 등록 양식을 제출하면 서버는 계정에 대한 두 개의 항목이 있는 TodoList를 생성합니다. 그런 다음 노란색 메모에 표시합니다.

이제 SPA의 땅에 있습니다. Todos를 조작하는 동안 보고 경험하는 모든 것은 녹아웃과 브리즈(Breeze)의 도움으로 클라이언트에서 렌더링되고 관리됩니다. 사용자로 앱을 탐색 ... 개발자의 시선으로 브라우저에서 개발자 도구를 사용하여 네트워크 트래픽을 캡처합니다. (인터넷 Explorer: F12 키를 누르고 네트워크 탭을 선택한 다음 캡처 시작을 클릭합니다.) 이제 다음을 시도합니다.

• 새 Todo 항목을 추가합니다.
• 레이블을 클릭하고 Todo 항목 제목을 편집합니다.
• 완료된 항목을 표시하려면 확인란을 선택합니다. 텍스트 상자가 비활성화되어 있으므로 제목을 더 이상 편집할 수 없습니다.
• 레이블 오른쪽에 있는 'x'를 클릭합니다. 항목이 사라지고 데이터베이스에서 삭제됩니다.
• 다른 항목을 선택하고 제목을 지웁다. 타이틀이 필요하다는 유효성 검사 오류가 발생합니다. 잠시 일시 중지한 후 이전 타이틀이 복원됩니다.
• 터무니없이 긴 제목을 입력합니다. 타이틀이 너무 길다는 다른 유효성 검사 오류가 발생합니다.
• "할 일 목록 추가" 단추를 클릭합니다. 새 목록이 이전 목록의 왼쪽에 나타납니다.
• TodoList 제목으로 재생하여 필수 및 길이 유효성 검사를 트리거합니다.
• 제목 텍스트 상자를 클릭하여 오류 메시지를 지웁다.
• 오른쪽 위 모서리에 있는 원에서 "x"를 클릭하여 TodoList 및 해당 할일을 삭제합니다.
• 오른쪽 위에 있는 "정보" 링크를 클릭하여 이러한 활동의 로그를 확인합니다.

유효성 검사 논리는 Breeze에서 클라이언트 쪽으로 수행됩니다. 서버 모델 클래스의 유효성 검사 특성은 클라이언트에 전파되고 클라이언트가 서버에 연결하기 전에 자동으로 실행됩니다.

네트워크 트래픽을 검토합니다. Breeze에서 오류를 감지했을 때 서버에 대한 호출이 없었습니다. 유효한 각 변경으로 인해 POST 요청이 "/api/Todo/SaveChanges"로 변경되었습니다. Breeze는 변경 내용을 번들로 묶고 Web API 컨트롤러의 SaveChanges 메서드에 단일 요청으로 함께 보냅니다. 이는 각 항목에 대해 PUT, POST 및 DELETE 요청을 개별적으로 만드는 KnockoutJS SPA 템플릿과 다릅니다.

또한 TodoList와 정보 페이지 간에 전환할 때 네트워크 트래픽이 없음을 확인합니다. 쿼리가 로컬 Breeze 캐시로 제한되었기 때문입니다.

내부 피킹

이 애플리케이션에는 클라이언트 쪽과 서버 쪽이 있습니다. 클라이언트 쪽 스택은 약간의 HTML과 애플리케이션 JavaScript 모듈("앱" 폴더)과 타사 JavaScript 라이브러리("스크립트" 폴더)의 조합으로 구성됩니다.

UI 아키텍처는 보기의 HTML 위젯을 컨트롤러의 지원 프레젠테이션 코드와 분리합니다. Angular 데이터 바인딩 시스템은 뷰와 컨트롤러를 조정하여 서로에 대한 친밀한 지식 없이도 작업을 수행할 수 있도록 합니다.

컨트롤러는 데이터 컨텍스트에 모델 엔터티를 획득하고 저장하도록 요청합니다. 데이터 컨텍스트는 대부분의 작업을 Breeze에 위임하여 JSON 쿼리 결과에서 자체 추적 모델 개체를 생성합니다.

서버 쪽 스택은 일부 개발자 코드와 세 가지 주요 .NET 라이브러리인 Web API, Entity Framework 및 Breeze.NET 구성됩니다.

기본 아키텍처는 KnockoutJS SPA 템플릿과 동일합니다. 그러나 구현은 훨씬 간단합니다. DTO가 삭제되고 대부분의 Entity Framework 세부 정보가 Breeze.NET 위임되었습니다.

다음 단계

Breeze 웹 사이트에서 클라이언트와 서버 스택에 대한 광범위한 논의를 통해 코드를 탐색하는 것이 좋습니다.

Breeze 클라이언트 쪽 쿼리를 사용해 볼 수 있습니다. 필터를 추가하고 정렬합니다. 종단 간 SPA 개발을 위해 더 나은 느낌을 얻기 위해 더 많은 모델 속성과 더 많은 엔터티를 추가할 수 있습니다. 디자인을 확신하는 경우 Todo 기능을 제거하여 사용자 고유의 기능으로 바꿀 수 있습니다.

즐거운 코딩 작업이 되길 바랍니다!