질문 : Polymer 요소와 AngularJS 지침의 차이점은 무엇입니까?
Polymer 시작하기 페이지에서 작동중인 Polymer의 예를 볼 수 있습니다.
<html>
<head>
<!-- 1. Shim missing platform features -->
<script src="polymer-all/platform/platform.js"></script>
<!-- 2. Load a component -->
<link rel="import" href="x-foo.html">
</head>
<body>
<!-- 3. Declare the component by its tag. -->
<x-foo></x-foo>
</body>
</html>눈에 띄는 것은 <x-foo></x-foo> platform.js 및 x-foo.html 의해 정의된다는 것입니다.
이것은 AngularJS의 지시문 모듈과 동일한 것 같습니다.
angular.module('xfoo', [])
.controller('X-Foo', ['$scope',function($scope) {
$scope.text = 'hey hey!';
})
.directive('x-foo', function() {
return {
restrict: 'EA',
replace: true,
controller: 'X-Foo',
templateUrl: '/views/x-foo.html',
link: function(scope, controller) {
}
};
});- 둘의 차이점은 무엇입니까?
- Polymer는 AngularJS가 가지고 있지 않은 문제를 해결합니까?
- 앞으로 Polymer를 AngularJS와 연계 할 계획이 있습니까?
답변
이 질문을 처음으로하는 사람이 아닙니다. :) 질문을하기 전에 몇 가지를 명확히하겠습니다.
- Polymer의
webcomponents.js는 Web Components 우산에 속하는 다양한 W3C API에 대한 여러 polyfill을 포함하는 라이브러리입니다. 이것들은:- 맞춤 요소
- HTML 가져 오기
<template>- Shadow DOM
- 포인터 이벤트
- 기타
<link rel="import" href="x-foo.html">은 HTML 가져 오기입니다. 가져 오기는 다른 HTML에 HTML을 포함하는 데 유용한 도구입니다.<script>,<link>, 마크 업 또는 기타 가져 오기에 포함 할 수 있습니다.<x-foo>를 x-foo.html에 "연결"하는 것은 없습니다.<x-foo>의 사용자 정의 요소 정의 (예 :<element name="x-foo">)가 x-foo.html에 정의되어 있다고 가정합니다. 브라우저가 해당 정의를 확인하면 새 요소로 등록됩니다.
질문에!
Angular와 Polymer의 차이점은 무엇입니까?
Q & A 동영상 에서이 중 일부를 다루었습니다. 일반적으로 Polymer는 웹 구성 요소를 사용하고 사용하는 방법을 보여주는 라이브러리입니다. 그 기반은 사용자 정의 요소 (예 : 빌드하는 모든 것이 웹 구성 요소 임)이며 웹이 진화함에 따라 진화합니다. 이를 위해 최신 버전의 최신 브라우저 만 지원합니다.
이 이미지를 사용하여 Polymer의 전체 아키텍처 스택을 설명합니다.
RED 레이어 : 폴리 필 세트를 통해 내일의 웹을 얻을 수 있습니다. 브라우저가 새로운 API를 채택함에 따라 이러한 라이브러리는 시간이 지남에 따라 사라집니다.
노란색 층 : polymer.js로 설탕을 뿌립니다. 이 레이어는 사양 API를 함께 사용하는 방법에 대한 우리의 의견입니다. 또한 데이터 바인딩, syntatic sugar, 변경 감시자, 게시 된 속성 등을 추가합니다. 이러한 것들이 웹 구성 요소 기반 앱을 구축하는 데 도움이된다고 생각합니다.
녹색 : 포괄적 인 UI 구성 요소 집합 (녹색 레이어)이 아직 진행 중입니다. 이들은 빨간색 + 노란색 레이어를 모두 사용하는 웹 구성 요소입니다.
각도 지시문과 사용자 정의 요소?
Alex Russell의 답변을 참조하십시오. 기본적으로 Shadow DOM은 HTML의 일부를 구성 할 수 있지만 HTML을 캡슐화하는 도구이기도합니다. 이것은 근본적으로 웹상의 새로운 개념이며 다른 프레임 워크가 활용할 것입니다.
Polymer는 AngularJS가 가지고 있지 않은 문제를 해결합니까?
유사점 : 선언적 템플릿, 데이터 바인딩.
차이점 : Angular는 서비스, 필터, 애니메이션 등에 대한 높은 수준의 API를 가지고 있으며 IE8을 지원하며 현재 프로덕션 앱을 빌드하기위한 훨씬 더 강력한 프레임 워크입니다. Polymer는 알파에서 막 시작되었습니다.
앞으로 Polymer를 AngularJS와 연결할 계획이 있습니까?
그들은 별도의 프로젝트 입니다. 즉, Angular와 Ember 팀은 결국 자체 프레임 워크에서 기본 플랫폼 API를 사용하는 것으로 전환 할 것이라고 발표했습니다.
^ 이것은 큰 승리 IMO입니다. 웹 개발자가 강력한 도구 (Shadow DOM, Custom Elements)를 가지고있는 세상에서 프레임 워크 작성자는 이러한 기본 요소를 활용하여 더 나은 프레임 워크를 만들 수도 있습니다. 그들 중 대부분은 현재 "일을 완수하기"위해 엄청난 노력을하고 있습니다.
최신 정보:
이 주제에 대한 정말 훌륭한 기사가 있습니다. " Polymer와 Angular의 차이점은 다음과 같습니다 ."
출처 : https://stackoverflow.com/questions/18089075/what-is-the-difference-between-polymer-elements-and-angularjs-directives
'프로그래밍 언어 > HTML,CSS,JS' 카테고리의 다른 글
| AngularJS ngClass 조건부 (0) | 2021.10.05 |
|---|---|
| mailto :를 사용하여 이메일 제목 / 내용을 설정하는 방법 (0) | 2021.10.01 |
| Angular.js와 함께 Require.js를 사용하는 것이 합리적인가? (0) | 2021.10.01 |
| "unexpected token o"오류를 제공하는 JSON 구문 분석 (0) | 2021.09.30 |
| JavaScript로 체크 박스 체크 / 체크 해제 (0) | 2021.09.29 |