AngularJS는 단일 페이지 애플리케이션 (SPA) 전용입니까?


201

우리는 우리가 만들고있는 응용 프로그램의 프런트 엔드를 구축 할 수있는 옵션을 찾고 있으며 우리에게 도움이 될 도구를 평가하고 앞으로 나아갈 최고의 플랫폼을 제공하려고합니다.

이것은 Node.js 프로젝트입니다. 우리의 초기 계획은 Express를 사용하고 해당 경로를 내려가는 것이었지만,이 단계를 시작하기 전에 무엇이 있는지 검토하는 것이 가장 좋습니다. 우리의 응용 프로그램에는 단일 페이지 모델에 적합하지 않다고 생각되는 여러 영역이 있습니다.

Backbone.js , Meteor 등 클라이언트를 구축하는 데 사용할 수있는 몇 가지 프레임 워크 와 AngularJS를 보았습니다.

이것은 명백한 질문 일 수 있지만 AngularJS가 순전히 단일 페이지 응용 프로그램 용인지 아니면 Express와 같은 다중 페이지 응용 프로그램에 사용될 수 있는지 여부를 해독 할 수 없습니다.


업데이트 2013 년 7 월 17 일 사람들을 계속 돌보기 위해 프로세스를 진행 하면서이 질문을 업데이트 할 것입니다. 우리는 지금 모든 것을 함께 구축 할 것이며 그것이 얼마나 잘 수행되는지 볼 것입니다. 우리는 우리보다 AngularJS에 더 많은 자격을 갖춘 사람들에게 연락하여 컨텍스트를 공유하는 큰 응용 프로그램을 분할하는 것에 관한 질문을 제기했지만 한 페이지에서 너무 큰 작업을 할 수 있습니다.

합의는 여러 정적 페이지를 제공하고 해당 페이지에서만 작동하는 AngularJS 응용 프로그램을 만들어 SPA 모음을 효과적으로 만들고 표준 연결을 사용하여 해당 응용 프로그램을 서로 연결할 수 있다는 것입니다. 이제 솔루션에 여러 응용 프로그램이 있으므로 유스 케이스가 매우 구체적이므로 먼저 단일 코드 기반을 시도하고 거기서부터 최적화하겠습니다.

업데이트 2016 년 6 월 18 일 프로젝트가 절벽에서 떨어 졌으므로 너무 많은 일을 끝내지 못했습니다. 최근에 다시 선택했지만 더 이상 각도를 사용하지 않고 대신 React를 사용하고 있습니다. 우리는 익스프레스 및 자체 포함 앱을 사용하는 이전 업데이트에 요약 된 아키텍처를 계속 사용하고 있습니다. 예를 들어 /chatReact 채팅 앱을 제공하는 특급 경로 /projects가 있고 프로젝트 앱을 제공하는 다른 경로 가 있습니다. 곧. 우리가 그것을 보는 방식은 각 앱이 기능 세트 측면에서 총체적 루트이므로, 앱 자체로 간주되기 위해서는 독립형이어야합니다. 기술적으로 모든 정보, 기본 표현 및 사용하려는 클라이언트 측 앱 구축의 모든 맛이 있습니다.


5
그래서 어땠어? 50 + 페이지 ASP.NET 응용 프로그램을 순수한 HTML + Javascript + REST 응용 프로그램으로 이동하는 방법을 알아 내려고 노력 중이며 SPA로 작동하는 방법을 실제로 얻지 못했습니다.
Greg Greg

1
우리는 다른 것으로 옮겨야했습니다. 이 논의가 다시 시작되면서 우리가 가진 토론에서 다시 한 번 SPA가 훨씬 더 큰 기계에서 매우 집중된 장부가 될 수 있다는 것입니다. 따라서 familar stack (.Net)에 유지하려면 MVC를 스캐 폴드로 사용하고 뷰 내에서 각도를 사용하여 동적 항목을 추가 할 수 있습니다 (각 기능). . 앱을 압축 할 수 없다면 50 페이지의 로직을 단일 페이지로 구현하면 질식 할 수 있습니다.
Modika

1
그렇게하는 것은 각 섹션 (예 : 사용자, 뉴스, 제품 등)을 자체적으로 SPA로 만들지 만 집합 적으로 앱을 형성합니다.
Modika

1
감사합니다 다른 SPA를 함께 묶기 위해 수행해야 할 특정 코딩이 있습니까? 아니면 그냥 일반 링크?
Greg

1
@Greg는 지금까지 우리의 제한된 지식에서 본질적으로 올바른 표준 연결의 앱이므로 작동하기 때문에 분명히 쉽지 않을 것입니다. 지속적으로 지속성 (쿠키, 로컬 스토리지)이 필요합니다. 앱에 로그인 형식이있는 경우 어쩌면 ID 또는 프로필과 같은 정보를 공유 할 수 있습니다. 우리의 응용 프로그램은 API와 밀접하게 연결되어 있으며 우리는 신뢰할 수있는 응용 프로그램을 구축 할 때 각 요청을 보호하기 위해 oauth를 사용하고 있습니다 .Trello는 비슷한 작업을 수행하지만 잘못 될 수 있다고 생각합니다.
Modika

답변:


216

전혀. Angular를 사용하여 다양한 앱을 빌드 할 수 있습니다. 클라이언트 측 라우팅은 그 중 작은 부분 일뿐입니다.

클라이언트 측 라우팅 외부에 도움이되는 많은 기능 목록이 있습니다.

  • 양방향 바인딩
  • 템플릿
  • 통화 형식
  • 복수
  • 재사용 가능한 컨트롤
  • RESTful API 처리
  • AJAX 취급
  • 모듈화
  • 의존성 주입

"단일 페이지 앱에서만 사용할 수있다"고 생각하는 것은 미친 일입니다. 물론 .. "Jquery는 애니메이션이있는 프로젝트 전용"이라고 말하는 것과 같습니다.

프로젝트에 적합하면 사용하십시오.


42
언급해야 할 또 다른 요점은 Angular를 전체 페이지에 사용할 필요조차 없다는 것입니다. 기존 시스템에 통합하여 구성 요소, 즉 레거시 응용 프로그램 내부의 플러그인 또는 구성 요소를 빌드 할 수 있습니다.
Alex Osborn 2013 년

2
@Blesh, 답변 주셔서 감사합니다. 이해가 되겠지만, 우리가 찾기 위해 고군분투하는 것은 "어떻게"사용되는지에 대한 질문을 게시 한 이유입니다. 허용되지만 예를 들어 angular.js를 express.js와 함께 사용할 수 있거나 시간 낭비와 복잡한 문제가 발생할 수 있습니다.
Modika

Express with Angular는 거의 이상적입니다! Angular 애플리케이션에서 사용할 수있는 Express를 사용하여 RESTful API를 작성하는 것은 정말 쉽습니다. Google NodeJS Express RESTful API 및 Angular의 $ resource 및 $ http 서비스 그 후, 프로토 타이핑을 시작하고 연주하십시오. 나는 그들이 얼마나 잘 작동하는지 알게되면 "HOW"에 대해 너무 많이 생각하거나 너무 걱정하고 있다고 생각할 것입니다.
Ben Lesh

@Blesh, 늦게 돌아와서 죄송합니다. 우리는 이미 Restify를 사용하여 작성된 REST / Hypermedia API를 가지고 있습니다. 어떻게 든 함께 생성 된 별도의 "앱"을 연결하는 깔끔한 방법을 찾아야한다고 생각합니다.
Modika

@Modika는 훌륭한 리소스를 찾거나 여러 페이지 앱에 대한 통찰력을 가지고 있었습니까?
dre

16

나는 처음으로 Angular와 함께 "어떻게"와 씨름했다. 그러던 어느 날, 그것은 "아직도 자바 스크립트입니다"라고 시작되었습니다. Angular의 입출력에 대한 많은 예제가 있습니다 ( https://github.com/angular-app/angular-app 책과 함께 내가 좋아하는 것 중 하나 ). 가장 기억해야 할 것은 다른 프로젝트에서와 마찬가지로 js 파일을로드하는 것입니다. 다른 페이지가 올바른 Angular 객체 (컨트롤러, 뷰 등)를 참조하고 꺼져 있는지 확인하기 만하면됩니다. 나는 이것이 의미가 있기를 바라지 만 대답은 너무나 간단해서 간과했다.


6

아마도 내 경험은 누군가에게 유용 할 것입니다. 우리는 프로젝트를 논리적으로 분리했습니다. 피드에 사용하는 하나의 스파, 맵과 함께 작동하는 스파, 사용자 프로필 편집을위한 스파 등. 예를 들어 피드, 사용자 및 맵의 세 가지 앱이 있습니다. 분리 된 URL에서 다음과 같이 사용합니다.

https://host/feed/#/top/
https://host/user/#/edit/1/
https://host/map/favorites/#/add/

이러한 각 응용 프로그램에는 응용 프로그램의 상태 간 자체 로컬 라우팅 매핑이 있습니다. 각 응용 프로그램은 실제로 필요한 컨텍스트 및로드 종속성으로 만 작동하기 때문에 좋은 습관이라고 생각합니다. 또한 디버그 및 통합 프로세스에 매우 적합합니다.

실제로 SPA 응용 프로그램을 혼합하여 쉽게 만들 수 있습니다. 예를 들어 피드는 angularjs 응용 프로그램, url이있는 사용자 응용 프로그램, url이 있으며 backbone.js 응용 프로그램에 매핑됩니다.

귀하의 질문에 대한 답변 :

SPA를위한 Angular는 SPA 애플리케이션을위한 빠르고 빠른 플레이를 제공하지만, 다양한 SPA 애플리케이션의 MPA 애플리케이션을 구축하려는 귀찮은 사람은 없습니다. 그러나 URL 아키텍처에 대한 생각은 응용 프로그램의 SEO 가용성을 잊지 마십시오.

나는 또한 아이디어를지지한다 :

프로젝트와 앱의 차이점은 무엇입니까? 앱은 웹 로그 시스템, 공개 레코드 데이터베이스 또는 간단한 설문 조사 앱과 같은 작업을 수행하는 웹 애플리케이션입니다. 프로젝트는 특정 웹 사이트에 대한 구성 및 앱 모음입니다. 프로젝트에는 여러 앱이 포함될 수 있습니다. 앱은 여러 프로젝트에있을 수 있습니다.


3

클라이언트 데이터 바인딩이있는 몇 페이지 만 있으면 Knockout 및 Javascript Namespacing을 사용하십시오.

녹아웃은 특히 복잡한 이전 ​​버전과의 호환성이 필요하고 페이지가 상당히 직설적 일 경우 유용합니다. 타사 구성 요소를 사용하는 경우 Knockout의 사용자 지정 바인딩은 간단하고 사용하기 쉽습니다.

자바 스크립트 네임 스페이스를 사용하면 코드를 분리하여 관리 할 수 ​​있습니다.

var myCo = myCo || {};
myCo.page = {
    init: function(){ ... },
    ...
}

다른 스크립트가로드 된 후 스크립트 태그에서

<script>
    myCo.init();
</script>

열쇠는 필요할 때 원하는 도구를 사용한다는 것입니다. 데이터 바인딩이 필요하십니까? 녹아웃 (또는 원하는대로) 라우팅이 필요하십니까? sammy.js (또는 원하는 것).

클라이언트 코드는 원하는만큼 간단하거나 복잡 할 수 있습니다. 기존 독점 프레임 워크를 사용하여 Angular를 매우 복잡한 사이트에 통합하려고 시도했는데 악몽이었습니다. Angular는 새로 시작하면 훌륭하지만 학습 곡선이 있으며 매우 엄격한 워크 플로우에 고정됩니다. 따르지 않으면 코드가 정말 빠르게 꼬일 수 있습니다.


1

SPA를 개발하려는 경우 Angular가 과도하다고 말하고 싶습니다. 물론 이미 개발에 익숙하다면 계속 진행하십시오. 그러나 프레임 워크를 처음 사용하고 SPA를 개발 해야하는 경우 여러 가지 고유 한 특권으로 더 간단한 것을 시도합니다. Vue.js 또는 Aurelia.io살펴 보는 것이 좋습니다 .

Vue.js 는 양방향 데이터 바인딩, MVVM, 재사용 가능한 컴포넌트, 간단하고 빠른 픽업, 적은 코드 작성 등을 사용합니다. Angular 및 React의 최고 기능 중 일부를 결합합니다.

Aurelia.io , 모든 정직하게, 나는 잘 모른다. 그러나 나는 주변을 들여다 보았으며 위와 비슷한 대안으로 볼 가치가있는 것 같습니다.

링크 :
https://vuejs.org/
http://aurelia.io/

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.