태그 보관물: javascript

javascript

왜 Angular를 사용합니까? [닫은]

기본 Angular 튜토리얼에서는 API에서 일부 JSON을 가져 와서 표시하는 것 같습니다. 또한 이중 바인딩 마법이 있습니다.

그러나 백엔드에서 뷰를 작성하고 사용자에게 제공하는 백엔드 솔루션 (예 : Rails) 대신 왜 그것을 사용하고 있습니까? 사용 사례는 무엇입니까?



답변

TLDR;

Angular는 풍부한 사용자 인터페이스 고유의 복잡성을 처리하는 데 도움이됩니다. UI 복잡성이 증가함에 따라 서버에서 페이지를 생성하는 기존 모델이 훨씬 더 복잡해집니다. Angular를 사용하면 UI를 관리 가능한 덩어리로 분해하고 UI를 구현에서 분리 할 수 ​​있습니다. 이렇게하면 서버 측 페이지 생성이 훨씬 쉬워 지지만 Angular는 순수한 자바 스크립트 기반 응용 프로그램으로 전환 할 때 자체적으로 구현됩니다. 이러한 응용 프로그램의 좋은 예는 Trello 입니다.

긴 이야기

Angular는 실제로 서버에서 모든 것을 생성하고 전송하여 편안하게 구현할 수있는 사이트를 대상으로하지 않습니다. 또한 인터넷 주변의 많은 사이트와 응용 프로그램에서 작동하는 완벽하게 좋은 접근 방법이지만 사이트의 상호 작용 수준을 높이려고 할 때 해당 접근 방식을 계속 유지하는 것이 점점 복잡해집니다.

궁극적 으로이 문제를 해결하는 방법은 UI를 방정식의 Javascript 측으로 점점 더 밀어내는 것입니다. Angular를 사용하면 UI를 구성 요소로 분리하여 모양과 느낌과 작동 방식을 명확하게 분리 할 수 ​​있습니다. 그런 다음 서버에서 매우 간단한 페이지를 작성할 수 있으며 JS 프론트 엔드는 필요한 데이터에 대해 서버를 개별적으로 호출하는 리치 UI를 작성하는 데 사용됩니다.

그러나 당신이하고 싶은 일은 완전히 자바 스크립트 기반 응용 프로그램을로드하는 스텁 페이지를 서버에 넣는 것입니다. 아마도 Angular가 실제로 빛나는 종류의 유스 케이스 중 가장 잘 알려진 예는 Trello입니다 (Angular가 아닌 Backbone을 사용하지만 동일한 유스 케이스입니다). Angular를 사용하는 더 많은 예제 사이트 가있는 http://builtwith.angularjs.org/ 사이트가 있습니다.

그래서 짧은 대답? Angular를 사용하면 UI를 구성 요소로 분해하여 궁극적으로 완전히 자바 스크립트로 만들 수 있으므로 풍부하고 대화식이 많은 사용자 인터페이스를보다 쉽게 ​​만들 수 있습니다.


답변

보다 반응이 빠른 사용자 인터페이스를 만드는 것입니다. 이중 바인딩, 종속성 주입 등을 통해 동적 페이지를 매우 쉽게 만들 수 있습니다. 뷰를 구성하는 선언적 방법을 제공하는 지시문을 Angular로 작성할 수 있습니다.

예를 들어, 현재 프로젝트에서는 반응 형 사용자 환경을 만들기 위해 수백 줄의 JavaScript 코드를 사용하는 뷰가 있습니다. 그럼에도 불구하고 페이지는 약간 번거롭고 유지 관리가 매우 어렵습니다. 우리는 더 나은 옵션을 찾기 시작했고 backbone.js와 knockout.js를 살펴 보았습니다. 결국 우리는 Angular를 시도했습니다. 우리는 몇 줄의 코드만으로 훨씬 반응이 좋고 유지 관리가 쉬운 페이지를 만들 수있었습니다. 모든 DOM 조작 코드는 사라졌습니다. 모든 장소에서 가져 와서 삽입해야했던 모든 복잡한 백엔드 뷰 생성은 사라졌습니다. 모델과 뷰를 동기화하기 위해 작성된 모든 코드는 사라졌습니다. 그 경험으로 Angular 로의 전환이 쉬워졌고 지금까지 우리는 후회하지 않았습니다.


답변

Angular는 단일 페이지 응용 프로그램을 개발하기위한 것으로 앱에 견고한 골격을 제공하는 데 도움이됩니다. 양식이 많고 데이터가 많은 복잡한 복잡한 UI에는 적합하지 않습니다. 양방향 데이터 바인딩은 처음에는 “매직”이지만 가장 최신의 프레임 워크 (Angular 2 자체 포함)는보다 간단한 데이터 흐름 다운 / 이벤트 흐름 접근 방식을 위해 양방향 데이터 바인딩에서 멀어짐을 알고 있어야합니다. 이야기가 너무 길 것입니다).

또한 Angular는 명확한 일을하는 방법이없고 때로는 고양이를 껍질을 벗기는 방법이 너무 많아서 학습 곡선을 더 가파르게 만들 수 있다고 경고해야합니다. 또한 Angular 앱을 확장하려면 내부 메커니즘과 성능에 미칠 수있는 영향을 이해해야합니다. 일단 그렇게하고 일관된 견고한 디자인 패턴을 설정하면 하늘이 한계입니다. 그러나 당신은 그것에 시간을 할애해야합니다.

즉, 귀하의 질문은 Angular 자체가 아닌 SPA의 사용 사례에 대한 것 같습니다.

단일 페이지 응용 프로그램의 사용 사례는 강력한 UI / UX 및 전체적으로 더 나은 응용 프로그램 느낌을 가진 웹 응용 프로그램을 갖기위한 것입니다. 페이지를 다시로드하지 않아도 렌더링 시간과 대역폭이 절약됩니다. 또한 멋진 데이터와 프리젠 테이션을 분리합니다. 귀하의 신청은 다음과 같습니다.

  • index.html을 포함한 정적 파일
  • 데이터를 제공하는 REST API
  • 데이터 중심 프론트 엔드 애플리케이션

답변