AngularJS 클라이언트 MVC 패턴?

AngularJS 클라이언트 MVC 패턴?

---

내가 주로 사용 된 지금까지 Struts 2, Spring, JQuery웹 애플리케이션 구축을위한 기술 스택. 요점은 언급 된 스택이 서버 측 MVC패턴을 사용한다는 입니다. 웹 브라우저의 주요 역할은 요청 / 응답주기 (+ 클라이언트 측 유효성 검사)로 제한됩니다. 데이터 검색, 비즈니스 로직, 연결 및 유효성 검사는 주로 서버 측의 책임.

내가 읽은 다음 인용문에서 영감을 얻은 AngularJS와 -frame 워크 에, 대한 몇 가지 질문 이 있습니다.

---

로부터 AngularJS와와 튜토리얼 :

Angular 앱의 경우 MVC (Model-View-Controller) 디자인 패턴을 사용하여 코드를 분리하고 문제를 분리하는 것이 좋습니다.

로부터 위키 백과 모델-뷰-컨트롤러 :

MVC (Model-View-Controller)는 정보 표현과 사용자의 상호 작용을 분리하는 아키텍처입니다. 모델은 애플리케이션 데이터와 비즈니스 규칙으로 구성 컨트롤러 는 입력을 중재하여 모델 또는보기에 대한 명령으로 변환합니다.

---

AngularJS 는 클라이언트 측 MVC패턴을 사용합니다 . 그래서 어떤 식 으로든 클라이언트 측에도 유효성 검사 논리를 포함하는 다른 옵션이 있습니다.

강력한 AngularJS 애플리케이션을 작성하는 가장 좋은 방법은 무엇입니까? 측 클라이언트의 MVC와 서버 측의 언급 MC (모델, 컨트롤러)?

이것은 MODEL과 CONTROLLER가 한 방향으로 복제를 의미하고 (클라이언트 / 서버)?

내 질문이 다소 이상하다고 생각합니다. 그 이유는 그것이 서버 측 MVC 패턴에 익숙해 있기 때문이라고 생각합니다. 나는 이미 같은 전환을 한 누군가가 확신합니다.

---

전혀 이상한 질문은 아닙니다. 저는 Angular를 많은 자바 개발자들에게 팔려고 노력 해왔고 그들이 묻습니다. 배우고있을 때 직접 물어 봤어 (아직 배우고있어, btw)

먼저 '기존의'자바 웹앱을 사용하고 Angular-ize하면 먼저 서버를 가져와 RESTful API로 관리합니다. JSP 등을 제거합니다. 이것은 Angular 앱을 작성하는 데있어 어려운 부분 인 IMO입니다. REST API를 가져옵니다. 서버에 필요한 것이 결정하는 열쇠 는 순수한 API로 생각하고 프론트 엔드가 것을 버리 버리는 것이 었습니다 .

그 질문은 정말 저를도 있습니다. 어떤 리소스에 유효한 데이터가 있는지 그들에게 주어진 리소스를 저장했습니다. API를 직접 쳐서 API가 거부해야합니다. 따라서 백엔드는 심층 유효성 검사를 담당합니다. 이것은 비즈니스에도 적용됩니다. 누군가가 API 만 사용하고 검증 가정 하면 서버에서 수행해야하는 작업이 명확 해집니다.

서버는 (아마도) json 형식으로 데이터를 제공해야 할 때 (나는 Spring MVC + Jackson을 사용함) 모델을 Angular에 노출하고 데이터베이스와의 통신을 담당합니다.

Angular 쪽에서 MVC는 무엇입니까?

• 모델 : REST API에서 다양한 데이터입니다. API가 JSON을 판매하는 경우 객체는 이미 1 급 자바 펼쳐입니다.
• 보기 : HTML 및 DOM 조작이 필요한 경우 지시문
• 컨트롤러 (및 컨트롤러에서 인수 한 user-지정 서비스 ..)
  • REST API를 쿼리하고 $ scope에 View에 필요한 것을 넣습니다.
  • 지시문이 서버를 다시 호출해야하는 이벤트에 응답 할 수 있습니다.
  • 유효성 검사 : 일반적으로 지시문에 대한 복수를 통해.
    윌 가능성이 이미 서버에 넣어 한 검증의 일부를 중복 ,하지만 당신은 사용자가 유효성 검사 모든 것에 서버에 대한 기다리지 않으 -가 알아야 할 클라이언트 것을 user-에게 즉각적인 피드백을 제공하기 위해 검증에, 대한합니다.
  • 비즈니스 로직 : 유효성 검사와 거의 같은 이야기입니다.

그러나 왜 클라이언트와 서버에서 논리가 검증 되었습니까? 대부분 하나의 앱을 작성하지 않기 때문에 두 개의 개별 인 항목을 작성합니다.

1. 견고하고 필요한 엔드없이 사용할 수있는 REST API
2. 사용자에게 구현 인을 제공하고 반드시 서버를 기다릴 필요가없는 GUI.

그래서 짧은 대답 -UI가 의심 서 REST API를 찾으십시오. 각도는 훨씬 더 명확해질 것입니다.

---

여기서는 "비즈니스 논리"라는 용어가 약간 잘못된 이름이라고 생각합니다. 클라이언트 측 앱의 "비즈니스"는 사용자 인터페이스를 처리하는 비즈니스입니다. 보안 규칙 및 독점 논리 또는 기타 민감한 지적 재산과 같은 것은 아닙니다.

Angular에서 나누기는 (일반적으로) 다음과 가변됩니다.

• 컨트롤러 (컨트롤러) : UI 뒤의 데이터 (범위)를 조작합니다.
• 지침 : 범위 통해 컨트롤러와 통신하도록 DOM을 설정, 및 DOM을 조작합니다.
• 템플릿 (보기) : DOM 요소에 지시문을 할당합니다.
• 범위 (모델 또는 뷰 모델) : 시스템의 모든 부분간에 데이터를 전달합니다.
• 서비스 : 가능하고 가능한 코드. 일반적으로 Ajax, 쿠키 또는 I / O 처리와 같은 기타에 사용됩니다.

MVC는 실제로 거의 MVVM입니다.

"비즈니스"논리 또는 규칙에 항상 보안이 필요한 모든 서버 수준에서 보호해야합니다.

---

MVC의 일부 버전에서는 데이터 와 데이터 를 조작 하는 것이 "모델"계층에 있음을 이해하는 것이 중요합니다 ( "컨트롤러"계층은 바인딩 만 수행함). 그러나 AngularJS에서는 데이터 ($ scope) 만 "모델"계층에 있고 데이터 ($ scope)를 조작하는 논리는 "제어기"계층에 있습니다.

---

@Roy TrueLove가 말하는 것을 좋아합니다. 그러나 그것이 사용하는 방법이라고 말하겠습니다. 물론 앵귤러를 최대한 활용하는 이런 방식으로 애플리케이션을 수행하는 방법을 배워야합니다. 언젠가 그곳에 있기를기도합니다.

한편, 학습하는 동안 그리고 클라이언트 측의 주요 작업 방식으로 angularjs를 완전히 사용하도록 전환하는 동안 여기저기서 작은 임무에 사용하기 시작하고 점차적으로 익숙해 질 수 있습니다. 생각.

나는 점차적으로 그것을 수용하고 천천히 천천히 가도록 권장하지만, 확실히 나는 확신합니다.

Angularjs는 가장 작은 작업에서도 가장 큰 작업을 수행 할 수 있기 때문에 이러한 접근 방식을 제공하도록 설계되었습니다. 예를 들어, 이번에 angular를 처음 사용한 것은 사용자가 ID를 입력하는 동안 이름을 표시하는 것입니다.

---

여기에 대한 답변에 동의합니다. 더 많은 의견. 신청서를 작성할 때 먼저 문제 영역에 집중해야합니다. 그리고 실제 비즈니스의 소프트웨어 모델을 만드십시오. 예를 들어 문제 도메인이 쇼핑 인 경우 모델링해야하는 몇 가지 요구 사항은 다음과 같습니다.

• 신용 카드가 유효해야합니다.
• 브랜드 X의 신용 카드로 결제하시면 10 % 할인을 받으실 수 있습니다.
• 쇼핑 카트에는 결제를 수행하기위한 항목이 하나 이상 있어야합니다.
• 사용자가 장바구니에 항목을 추가하려면 항목에 재고가 있어야합니다.

이러한 요구 사항의 구현은 문제 도메인을 모델링하며 이것이 비즈니스 논리입니다.

Angular는 프런트 엔드 프레임 워크 및 툴킷입니다. 그것은이다 웹 프론트 엔드. 웹 프런트 엔드에서이를 구현하면 모바일 또는 데스크톱 애플리케이션과 같은 다른 프런트 엔드 또는 인터페이스에서 모델을 재사용 할 기회를 놓칠 수 있습니다. 따라서 이상적으로는 비즈니스 로직 구현을 모든 사용자 인터페이스 프레임 워크에서 분리하고 영구 프레임 워크에서도 분리해야합니다. 그런 다음 사용자 인터페이스 문제를 처리하고 비즈니스 논리 개체와 통신 할 인터페이스 개체를 갖게됩니다. 이것은 Spring MVC 컨트롤러 및 / 또는 Angular 컨트롤러 또는 서비스 일 수 있습니다.

이 샘플 응용 프로그램 은 여기에 언급 된 원칙에 따라 한 번 봐 걸릴 수는.

---

일부 조직은 "클라우드를 원합니다 ... 잠깐, 경량을 원합니다"라는 새로운 기술에 열광하는 것처럼이 질문도있는 것 같습니다. 경량 프레임 워크로 전환 할 자격이 있는지 여부를 정당화하기 어렵습니다.

저는 항상 Spring / JBoss seam / JSF와 MVC 프레임 워크를 사용하여 웹 애플리케이션을 개발합니다. 대부분의 경우 Java 스크립트는 프리젠 테이션 계층 유효성 검사를 위해 상주하며 주요 작업 클래스 / 엔티티 및 비즈니스 로직은 Java 코드에 상주합니다. Angular에 대한 기본적인 실습을 마친 후, 프레젠테이션 레이어에서 다른 수준을 추상화하면서 MVC가 의미하는 바를 이해하기 시작했습니다. 여기서 우리는 프런트 엔드에 자체 뷰와 컨트롤러를 가질 수 있습니다. 질문에 답하려면 모든 사람의 의견과 마찬가지로 프레젠테이션 레이어에 배치하는 것이 가장 좋은 방법입니다.

보안 관점에서는 무겁거나 민감한 비즈니스 규칙이 서버 측에 있어야한다고 생각합니다. 비즈니스 로직이 제대로 개발되지 않으면 코드의 약점을 쉽게 찾아서 악용 할 수 있습니다.

Angular와 같은 프레임 워크에 대한 제 생각은 소규모 상점 / SOHO 취급 고객과 같고, 몇 명의 사람이 있고 정말 효율적이고 빠르며, 비즈니스에 직면 한 고객과 효율적으로 상품을 배달 / 수령 (REST, JSON)하는 고객에게 잘 맞습니다. 그들은 지정된 역할과 작업을 가지고 있지만 일부 작업자는 하나 이상의 작업을 수행합니다. 상점은 일반적으로 무거운 보안을 강조하지 않기 때문에 도둑이나 강도에게 취약합니다.

Spring / Struts 2와 같은 서버 측 프레임 워크의 경우 관리 수준이 다르고 더 큰 비즈니스 (일괄 작업, 웹 서비스, 엔터프라이즈 버스)를 처리 할 수있는 현대적인 기업 (CMM 레벨 5)을 상상해보십시오. 그들은 고객을 처리하지만 직접적이지는 않으며 종종 중개인이나 소매점을 통과합니다. 보안 측면에서 기업은 더 견고하며 종종 현관 문에있는 증권이나 중요한 정보는 금고 (암호화 / 사인온)로 보호됩니다.

---

내 접근 방식은 항상 상향식 접근 방식입니다. 데이터베이스 디자인에서 시작하여 적절하게 구성된 / 관련 테이블, 필요한 경우 저장 프로 시저를 사용한 다음 솔루션에 Entity Framework를 추가하거나 EF가 옵션이 아닌 경우 ADO.Net을 사용합니다. 그런 다음 비즈니스 로직과 모델을 개발하여 데이터를 데이터베이스 안팎으로 가져옵니다.

모델이 설정되었으므로 이제 MVC 컨트롤러 개발 및 / 또는 WebAPI 컨트롤러 개발의 두 가지 경로로 이동할 수 있습니다. 두 컨트롤러 모두 모델에 액세스 할 수 있으며 클래스를 인스턴스화하고 메서드를 호출하면됩니다.

이제 MVC 컨트롤러에 의해 제어되는 MVC보기 또는 완전히 분리 된 HTML 페이지 또는 SPA (NodeJS에서 호스팅되는 단일 페이지 응용 프로그램) 집합을 설정할 수있는 옵션이 있습니다.

완전히 분리 된 HTML 페이지 세트를 사용하면 Get, Post, Put 및 Delete 메서드와 함께 WebAPI 컨트롤러를 사용해야하며, 클라이언트를 식별하기 위해 토큰을 앞뒤로 포함하고 CORS를 활성화해야합니다 (교차 원본 요청의 경우 )

MVC 뷰를 사용하면 컨트롤러 속성 및 / 또는 세션을 사용하여 클라이언트를 식별 할 수 있으며 CORS에 대해 걱정할 필요가 없으며 필요한 경우 뷰를 강력한 유형으로 만들 수도 있습니다. 안타깝게도 일련의 UI 개발자가있는 경우 동일한 MVC 솔루션에서 작업해야합니다.

두 경우 모두 AngularJS를 사용하여 컨트롤러간에 데이터를주고받을 수 있습니다.

IMHO AngularJS 컨트롤러의 개념은 C # MVC 또는 C # WebAPI 컨트롤러와 동일하지 않습니다. AngularJS 컨트롤러는 모든 자바 스크립트 로직과 "ApiFactory"를 통한 엔드 포인트 호출을 수용하는 반면, C # 컨트롤러는 UI 요청을 수락하고 응답하는 서버 측 엔드 포인트에 불과합니다.

참고 URL : https://stackoverflow.com/questions/13067607/angularjs-client-mvc-pattern