javascript jQuery 배경이 있다면 "AngularJS에서 생각하기"?




(12)

그것들은 아주 훌륭하지만 긴 대답입니다.

내 경험을 요약하면 다음과 같습니다.

  1. 컨트롤러 및 제공자 (서비스, 팩토리 등)는 HTML이 아닌 데이터 모델을 수정하기위한 것입니다.
  2. HTML 및 지시문은 모델에 대한 레이아웃 및 바인딩을 정의합니다.
  3. 컨트롤러간에 데이터를 공유해야하는 경우 서비스 또는 팩토리를 만드십시오.이 팩토리는 응용 프로그램에서 공유되는 싱글 톤입니다.
  4. HTML 위젯이 필요한 경우 지시문을 작성하십시오.
  5. 데이터가 있고 HTML을 업데이트하려고하면 ... 중지하십시오! 모델을 업데이트하고 HTML이 모델에 바인딩되어 있는지 확인하십시오.

jQuery 에서 클라이언트 측 애플리케이션을 개발하는 것에 익숙하다고 가정하지만 이제 AngularJS 사용하기 시작하겠습니다. 필요한 패러다임 변화를 기술 할 수 있습니까? 다음은 답변 구성에 도움이되는 몇 가지 질문입니다.

  • 클라이언트 측 웹 응용 프로그램을 어떻게 다르게 설계하고 설계합니까? 가장 큰 차이점은 무엇입니까?
  • 무엇을하고 / 사용을 중단해야합니까? 대신에 / 사용을 시작해야할까요?
  • 서버 측 고려 사항 / 제한 사항이 있습니까?

jQueryAngularJS 의 자세한 비교를 원하지 않습니다.


jQuery

jQuery는 getElementByHerpDerp짧고 크로스 브라우저와 같이 길게 JavaScript 명령을 만듭니다 .

AngularJS

AngularJS는 동적 웹 응용 프로그램 (HTML은 정적 페이지 용으로 설계되었으므로)에서 잘 작동하는 작업을 수행하는 고유 한 HTML 태그 / 속성을 만들 수 있습니다.

편집하다:

"AngularJS에서 jQuery 백그라운드를 어떻게 생각합니까?" "HTML 배경이있어서 JavaScript로 어떻게 생각하니?" 질문을한다는 사실은이 두 가지 자원의 근본적인 목적을 이해하지 못했을 가능성이 있음을 보여줍니다. 이것은 단순히 "AngularJS가 지시어를 사용하는 반면 jQuery는 CSS 선택기를 사용하여 jQuery 객체를 만드는 것"이라고 말하는 것보다 기본적인 차이점을 지적함으로써 질문에 대답하기로했습니다. . 이 질문에는 오랜 대답이 필요하지 않습니다.

jQuery는 브라우저에서 프로그래밍 JavaScript를보다 쉽게 ​​만들 수있는 방법입니다. 짧은 브라우저 간 명령 등

AngularJS는 HTML을 확장하므로 <div>응용 프로그램을 만들기 위해 모든 곳 을 두지 않아도됩니다 . HTML이 정적, 교육용 웹 페이지를 위해 설계된 것보다는 실제로 응용 프로그램에서 작동하게합니다. 이것은 JavaScript를 사용하여 우회 길에서이를 수행하지만 근본적으로는 JavaScript가 아닌 HTML의 확장입니다.


jQuery는 DOM 조작 라이브러리입니다.

AngularJS는 MV * 프레임 워크입니다.

실제로 AngularJS는 몇 가지 JavaScript MV * 프레임 워크 중 하나입니다. 많은 JavaScript MVC 도구가 여전히 범주 라이브러리에 속합니다.

프레임 워크이므로 코드를 호스팅하고 호출 할 대상과시기에 대한 소유권을가집니다!

AngularJS에는 jQuery-Lite가 포함되어 있습니다. 따라서 기본적인 DOM 선택 / 조작을 위해서는 jQuery 라이브러리를 포함 할 필요가 없습니다. 네트워크에서 실행하기 위해 많은 바이트를 절약 할 수 있습니다.

AngularJS는 DOM 조작 및 재사용 가능한 UI 구성 요소를 디자인하는 "지시문"개념을 가지고 있으므로 DOM 조작 관련 작업이 필요하다고 느낄 때마다 사용해야합니다. 지시문은 AngularJS를 사용하는 동안 jQuery 코드를 작성해야하는 곳입니다.

AngularJS는 약간의 학습 곡선을 포함합니다 (jQuery보다 :-).

-> jQuery 백그라운드에서 오는 모든 개발자에게 내 첫 번째 조언은 "AngularJS와 같은 풍부한 프레임 워크로 이동하기 전에 JavaScript를 최우선 언어로 배우는 것"입니다. 나는 위의 사실을 힘든 방법으로 배웠다.

행운을 빕니다.


"패러다임 전환"을 설명하기 위해 짧은 대답만으로도 충분하다고 생각합니다.

AngularJS 요소 를 찾는 방식을 변경합니다.

에서 jQuery를 , 당신은 일반적으로 사용하는 선택기를 요소를 발견하고 그들을 묶는 :
$('#id .class').click(doStuff);

에서 AngularJS와 , 사용 지시를 직접 요소를 표시하기 위해, 그들을 연결할 수 있습니다 :
<a ng-click="doStuff()">

AngularJS와는 선택기를 사용하여 요소를 찾을 필요 (또는 원하는)하지 않습니다 - AngularJS와의 사이의 주요 차이점 jqLite 본격적인 대 jQuery를가 한다는 것입니다 jqLite가 선택기를 지원하지 않습니다 .

그래서 사람들이 "전혀 jQuery를 포함하지 말라"고 말할 때 주로 선택자를 사용하기를 원하지 않기 때문입니다. 그들은 대신 지시어를 사용하는 법을 배우기를 원합니다. 직접 선택, 선택하지 마라!


AngularJS 및 jQuery :

AngularJs와 JQuery는 JQLite 기능을 제외한 모든 수준에서 완전히 다르며 AngularJs 핵심 기능을 배우기 시작하면이 기능을 볼 수 있습니다 (아래에서 설명 함).

AngularJs는 독립적 인 클라이언트 측 응용 프로그램을 빌드 할 수있는 클라이언트 측 프레임 워크입니다. JQuery는 DOM을 중심으로하는 클라이언트 측 라이브러리입니다.

AngularJs Cool Principle - UI의 일부 변경 사항을 원한다면 모델 데이터의 관점에서 생각하십시오. 데이터를 변경하면 UI가 다시 렌더링됩니다. DOM이 거의 필요하지 않을 때까지, 그리고 각도 명령을 통해 처리해야 할 때까지 매번 DOM을 사용하지 않아도됩니다.

이 질문에 답하기 위해 AngularJS와의 첫 번째 엔터프라이즈 응용 프로그램에 대한 경험을 공유하고자합니다. 이것들은 Angular가 jQuery 사고 방식을 바꾸기 시작하는 곳에서 제공하는 가장 멋진 기능이며 우리는 Angular를 라이브러리가 아닌 프레임 워크처럼 얻습니다.

양방향 데이터 바인딩은 놀랍습니다 : 모든 기능 UPDATE, DELTE, INSERT가있는 그리드가있었습니다. ng-repeat를 사용하여 그리드의 모델을 바인드하는 데이터 오브젝트가 있습니다. 삭제 및 삽입을위한 간단한 JavaScript 코드 한 줄만 작성하면됩니다. 그리드 모델이 즉시 변경되면 그리드가 자동으로 업데이트됩니다. 업데이트 기능은 실시간이며 코드는 없습니다. 너는 놀랍다.

재사용 가능한 지시문은 매우 좋습니다 : 지시문을 한 곳에서 작성하고 응용 프로그램 전체에서 사용하십시오. OMG !!! 나는이 지시어를 페이징, 정규 표현식, 검증 등에 사용했다. 정말 멋지다!

라우팅은 강력합니다. 구현 방법은 구현 방법에 달렸지 만, HTML 및 컨트롤러 (JavaScript) 지정 요청을 라우트하는 데는 몇 줄의 코드 만 필요합니다.

컨트롤러는 훌륭합니다. 컨트롤러는 자신의 HTML을 처리하지만,이 분리는 일반적인 기능과 마찬가지로 잘 작동합니다. 마스터 HTML에서 버튼을 클릭 할 때 동일한 기능을 호출하려면 각 컨트롤러에 동일한 함수 이름을 쓰고 개별 코드를 작성하십시오.

플러그인 : 앱에 오버레이를 표시하는 것과 같은 여러 가지 유사한 기능이 있습니다. 코드를 작성할 필요가 없으며 wc-overlay로 사용할 수있는 오버레이 플러그인 만 사용하면 모든 XMLHttpRequest (XHR) 요청 이 자동으로 처리됩니다.

RESTful 아키텍처에 이상적 : 완전한 프레임 워크이므로 AngularJS는 RESTful 아키텍처로 잘 작동합니다. REST CRUD API를 호출하는 것은 매우 쉽고

서비스 : 컨트롤러에서 서비스 및 적은 코드를 사용하여 공통 코드를 작성하십시오. Sevices는 컨트롤러간에 공통 기능을 공유하는 데 사용할 수 있습니다.

확장 성 : Angular는 각도 지시어를 사용하여 HTML 지시문을 확장했습니다. html 안에 표현식을 작성하고 런타임에 평가하십시오. 직접 작성한 지시문과 서비스를 만들어 다른 프로젝트에서 사용하십시오.


그들은 사과와 오렌지입니다. 당신은 그들을 비교하고 싶지 않습니다. 그들은 서로 다른 두 가지입니다. AngularJs에는 이미 jQuery 라이트가 내장되어있어 완전한 jQuery 버전을 포함하지 않고도 기본 DOM 조작을 수행 할 수 있습니다.

jQuery는 모두 DOM 조작에 관한 것입니다. 그것은 브라우저의 모든 통증을 해결합니다. 그렇지 않으면 처리해야하지만 AngularJS와 같은 구성 요소로 앱을 나눌 수있는 프레임 워크가 아닙니다.

AngularJs에 대한 좋은 점은 지시어에서 DOM 조작을 분리 / 분리 할 수 ​​있다는 것입니다. ng-click과 같이 사용할 준비가 된 내장 명령이 있습니다. 모든 뷰 로직 또는 DOM 조작을 포함하는 사용자 정의 지시문을 작성하여 비즈니스 로직을 처리해야하는 컨트롤러 또는 서비스에서 DOM 조작 코드를 혼합하지 않도록 할 수 있습니다.

Angular는 앱을 컨트롤러 - 서비스 - 뷰 - 등으로 나눕니다.

그리고 한 가지 더, 그것은 지시어입니다. DOM 요소에 첨부 할 수있는 속성이므로 jQuery가 AngularJs 구성 요소와 충돌하거나 아키텍처가 엉망이 될 염려없이 jQuery로 견해를 설명 할 수 있습니다.

제가 참석 한 만남에서 들었습니다. Angular의 창립자 중 한 사람은 DOM 조작을 분리하기 위해 열심히 노력 했으므로 DOM 조작을 다시 포함시키지 말라고했습니다.


실제로 AngularJS를 사용하는 경우 더 이상 jQuery가 필요하지 않습니다. AngularJS 자체에는 바인딩 및 지시문이 있으므로 jQuery로 수행 할 수있는 대부분의 작업을 "대체"할 수 있습니다.

저는 보통 AngularJS와 Cordova 사용하여 모바일 어플리케이션을 개발 합니다. 필요한 jQuery의 유일한 것은 Selector입니다.

인터넷 검색을 통해 독립형 jQuery 선택기 모듈이 있다는 것을 알았습니다. 지글이지.

그리고 jQuery Selector (Sizzle 사용)를 통해 AngularJS를 사용하여 웹 사이트를 신속하게 시작할 수있는 작은 코드 스 니펫을 만들기로 결정했습니다.

내 코드를 여기에서 공유했습니다. https://github.com/huytd/Sizzular


jQuery : DOM 요소 에 대한 'QUERYing the DOM '에 대해 많은 것을 생각 하고 무언가를하고 있습니다.

AngularJS : 모델은 진실이고, 당신은 항상 그 각도에서 생각합니다.

예를 들어 DOM에서 특정 형식으로 표시하려는 서버의 데이터를 jQuery에서 가져 오면 '1'을 입력해야합니다. FIND '여기서 DOM에서이 데이터를 배치 할 위치는'2. UPDATE / APPEND '옵션을 사용하여 새 노드를 만들거나 innerHTML 설정하면 됩니다. 그런 다음이보기를 업데이트하려면 '3. 위치를 찾아 '4. 최신 정보'. AngularJS에서는 서버에서 데이터를 가져오고 서식을 지정하는 것과 동일한 컨텍스트 내에서 수행 된 모든 검색 및 업데이트주기가 사라졌습니다.

AngularJS를 사용하면 모델 (이미 익숙한 JavaScript 객체)을 사용할 수 있으며 모델의 값은 모델 (분명히)과 뷰에 대해 알려주고 모델의 작업은 뷰에 자동으로 전파되므로, 그것에 대해 생각할 필요가 없습니다. AngularJS에서 더 이상 DOM에서 물건을 찾을 수 없습니다.

또 다른 방법으로 말하면, jQuery를, 당신은 즉, 어디, CSS 선택기에 대해 생각해야 div하거나 td, 내가 그들의 HTML 또는 색상이나 가치를 얻을 수 있도록 즉, 등의 클래스 또는 속성을 가지고 있지만, AngularJS와에 당신은 자신이 다음과 같이 생각하고 있음을 알게 될 것입니다. 어떤 모델을 다루고 있는지, 모델의 가치를 true로 설정할 것입니다. 이 값을 반영하는 뷰가 체크 박스인지 td요소 에 있는지 (jQuery에서 자주 고려해야 할 세부 정보)에 신경 쓰지는 않습니다.

그리고 AngularJS의 DOM 조작을 사용하면 지시문과 필터를 추가 할 수 있으며 유효한 HTML 확장으로 생각할 수 있습니다.

AngularJS에서 경험하게 될 또 하나의 기능 : jQuery에서 jQuery 함수를 많이 호출합니다. AngularJS에서는 AngularJS가 함수를 호출하므로 AngularJS는 '어떻게 할 것인가'를 알려주지 만 이점은 가치가 있습니다. 따라서 AngularJS 일반적으로 AngularJS가 원하는 것을 배우거나 AngularJS가 사용자의 기능을 제시하는 방식을 알면 그에 따라 적절하게 호출됩니다. 이것은 AngularJS를 라이브러리가 아닌 프레임 워크로 만드는 것 중 하나입니다.


이 질문은 JavaScript 프로그래밍에 대한 첫 번째 심각한 노출이 Node.js 와 AngularJS 였기 때문에 흥미 롭습니다 . 나는 jQuery를 배운 적이 없으며, 좋은 점이라고 생각합니다. 아무 것도 읽지 않아도되기 때문입니다. 사실, 저는 제 문제에 대한 jQuery 솔루션을 적극적으로 피하는 대신, 문제를 해결하기위한 "AngularJS 방법"만을 모색합니다. 그래서,이 질문에 대한 나의 대답은 "jQuery를 결코 배워 본 적이없는 사람처럼 생각하십시오."하고 jQuery를 직접적으로 도입하려는 유혹은 피할 수있을 것입니다 (분명히 AngularJS는 어느 정도까지 그것을 사용합니다).


1. 페이지를 디자인하지 말고 DOM 조작으로 페이지를 변경하십시오.

jQuery에서는 페이지를 디자인 한 다음 동적으로 만든다. 이는 jQuery가 기능 보강을 위해 설계 되었기 때문에 단순한 전제로부터 엄청나게 성장했기 때문입니다.

그러나 AngularJS에서는 아키텍처를 염두에두고 처음부터 시작해야합니다. "나는이 DOM 조각이 있고 그것을 X로 만들고 싶다"고 생각하는 대신, 성취하고자하는 것으로 시작한 다음 응용 프로그램을 설계하고 마지막으로보기를 설계해야합니다.

2. AngularJS로 jQuery를 늘리지 마십시오.

비슷하게, jQuery가 X, Y, Z를 사용한다는 생각으로 시작하지 마라. 그래서 모델과 컨트롤러를 위해 AngularJS를 추가 할 것이다. 이것은 처음 시작했을 때 정말 유혹스러운 일입니다. 새로운 AngularJS 개발자가 적어도 "각도 방법"에 익숙해지기 전까지는 jQuery를 전혀 사용하지 말 것을 항상 권장합니다.

저는 많은 개발자와 메일 링리스트에서 150이나 200 줄의 코드로 된 jQuery 플러그인을 사용하여 정교한 솔루션을 만들었습니다. 콜백 콜렉션과 함께 AngularJS에 코드를 붙여서 혼란스럽고 복잡한 코드를 $apply . 그러나 그들은 결국 그것을 얻는다! 문제는 대부분의 경우 jQuery 플러그인이 AngularJS에서 코드의 일부분으로 재 작성되어 갑자기 모든 것이 이해할 수 있고 간단해진다는 것입니다.

결론은 다음과 같습니다. 솔루션을 만들 때 먼저 AngularJS에서 생각하십시오. 해결책을 생각할 수 없다면 지역 사회에 물어보십시오. 그 후에도 쉬운 해결책이 없다면 jQuery에 자유롭게 도달하십시오. 그러나 jQuery가 버팀목이되지 않도록하거나 AngularJS를 마스터하지 마십시오.

3. 항상 건축술의 점에서 생각하십시오

먼저 단일 페이지 응용 프로그램응용 프로그램 이라는 것을 알아야합니다. 그들은 웹 페이지가 아닙니다 . 따라서 우리는 클라이언트 측 개발자처럼 생각하는 것 외에도 서버 측 개발자처럼 생각할 필요가 있습니다. 우리는 우리의 응용 프로그램을 개별적이고 확장 가능하며 테스트 가능한 구성 요소로 나누는 방법에 대해 생각해야합니다.

그렇다면 어떻게 해야할까요? AngularJS에서 어떻게 생각하십니까? jQuery와는 다른 몇 가지 일반적인 원칙이 있습니다.

보기는 "공식 기록"입니다.

jQuery에서는 프로그래밍 방식으로 뷰를 변경합니다. 우리는 다음과 같이 정의 된 드롭 다운 메뉴를 가질 수 있습니다 :

<ul class="main-menu">
    <li class="active">
        <a href="#/home">Home</a>
    </li>
    <li>
        <a href="#/menu1">Menu 1</a>
        <ul>
            <li><a href="#/sm1">Submenu 1</a></li>
            <li><a href="#/sm2">Submenu 2</a></li>
            <li><a href="#/sm3">Submenu 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#/home">Menu 2</a>
    </li>
</ul>

jQuery에서는 애플리케이션 로직에서 다음과 같이 활성화 할 것이다.

$('.main-menu').dropdownMenu();

우리가보기를 볼 때 여기에 기능이 있다는 것이 즉시 명백하지 않습니다. 소규모 응용 프로그램의 경우에는 문제가 없습니다. 그러나 사소한 응용 프로그램의 경우 상황이 빨리 혼란스럽고 유지하기가 어려워집니다.

AngularJS에서는보기가 뷰 기반 기능의 공식 기록입니다. 우리의 ul 선언은 다음과 같이 보입니다.

<ul class="main-menu" dropdown-menu>
    ...
</ul>

이 둘은 같은 일을하지만, AngularJS 버전에서는 템플릿을 보는 사람은 무엇이 일어나야 하는지를 알고 있습니다. 개발 팀의 새로운 멤버가 올 때마다, 그녀는 이것을보고 나서 dropdownMenu 라는 지시어가 작동한다는 것을 수 있습니다; 그녀는 옳은 답을 직관적으로 이해할 필요가 없으며 모든 코드를 살펴볼 필요가 없습니다. 보기는 일어났던 것을 우리에게 나타내었다. 훨씬 더 청결한.

AngularJS에 익숙하지 않은 개발자는 종종 특정 종류의 모든 링크를 찾아 지침을 추가하는 것과 같은 질문을합니다. 우리가 대답 할 때 개발자는 항상 깜짝 놀라게됩니다. 그러나 당신이 그렇게하지 않는 이유는 이것이 half-jQuery, half-AngularJS, 그리고 좋지 않다는 것입니다. 여기서 문제는 개발자가 AngularJS의 컨텍스트에서 "jQuery를 수행"하려고한다는 것입니다. 그것은 결코 잘 작동하지 않을 것입니다. 보기 공식 기록입니다. 지시어 (아래에서 더 자세히 설명)를 벗어나서 DOM을 절대로 변경 하지 마십시오 . 지시문이 보기에 적용되므로 의도가 명확합니다.

주의 사항 : 디자인하지 말고 마크 업하십시오. 설계하고 설계해야합니다.

데이터 바인딩

이것은 AngularJS의 가장 놀라운 기능 중 하나이며 이전 섹션에서 언급 한 DOM 조작의 종류를 수행해야 할 필요성을 없앴습니다. AngularJS는 자동으로보기를 업데이트하므로 사용자는 필요하지 않습니다! jQuery에서는 이벤트에 응답 한 다음 컨텐츠를 업데이트합니다. 같은 것 :

$.ajax({
  url: '/myEndpoint.json',
  success: function ( data, status ) {
    $('ul#log').append('<li>Data Received!</li>');
  }
});

다음과 같은보기 :

<ul class="messages" id="log">
</ul>

우려 사항을 혼합하는 것 외에도 앞서 언급 한 의도를 나타 내기 위해 동일한 문제가 있습니다. 하지만 더 중요한 것은 수동으로 DOM 노드를 참조하고 업데이트해야한다는 것입니다. 그리고 우리가 로그 엔트리를 지우고 싶다면, 그것도 DOM에 대해 코딩해야합니다. 우리는 DOM과 다른 논리를 어떻게 테스트합니까? 프레젠테이션을 변경하려면 어떻게해야합니까?

이것은 조금 지저분하고 사소한 허약입니다. 그러나 AngularJS에서는 다음과 같이 할 수 있습니다.

$http( '/myEndpoint.json' ).then( function ( response ) {
    $scope.log.push( { msg: 'Data Received!' } );
});

그리고 우리의 견해는 다음과 같이 보일 수 있습니다 :

<ul class="messages">
    <li ng-repeat="entry in log">{{ entry.msg }}</li>
</ul>

그러나 우리의 견해는 다음과 같이 보일 수 있습니다.

<div class="messages">
    <div class="alert" ng-repeat="entry in log">
        {{ entry.msg }}
    </div>
</div>

그리고 이제 정렬되지 않은 목록을 사용하는 대신 부트 스트랩 경고 상자를 사용합니다. 그리고 우리는 컨트롤러 코드를 변경할 필요가 없었습니다! 그러나 더 중요한 것은 로그가 어디서 어떻게 업데이트 되더라도 뷰가 변경된다는 것입니다. 자동으로. 산뜻한!

여기에 표시하지 않았지만 데이터 바인딩은 양방향입니다. 따라서 이러한 로그 메시지는 <input ng-model="entry.msg" /> 를 수행하여 뷰에서 편집 할 수도 있습니다. 그리고 기뻐했습니다.

독특한 모델 계층

jQuery에서 DOM은 모델과 비슷합니다. 그러나 AngularJS에는보기와 완전히 독립적으로 원하는 방식으로 관리 할 수있는 별도의 모델 계층이 있습니다. 이는 위의 데이터 바인딩을 돕고, 관심사의 분리를 유지하며 훨씬 더 큰 테스트 가능성을 제공합니다. 다른 답변은이 시점에서 언급 했으므로 여기에 남겨 두겠습니다.

관심사 분리

그리고 위의 모든 내용이이 과도기적 주제에 묶여 있습니다. 귀하의 견해는 일어날 것으로 예상되는 것에 대한 공식 기록으로 작용합니다 (대부분). 귀하의 모델은 귀하의 데이터를 나타냅니다; 재사용 가능한 작업을 수행 할 수있는 서비스 계층이 있습니다. DOM 조작을하고 지시어로 뷰를 확대합니다. 컨트롤러로 모든 것을 함께 붙입니다. 이것은 또한 다른 답변에서도 언급되었으며, 내가 추가 할 수있는 유일한 것은 테스트 가능성과 관련이 있습니다. 아래에서 다른 섹션에서 설명합니다.

의존성 주입

관심을 분리하는 데 도움이되는 것은 의존성 주입 (DI)입니다. 서버 측 언어 ( Java 에서 PHP )에서 온 사람이라면 이미이 개념을 잘 알고있을 것입니다.하지만 jQuery에서 오는 클라이언트 측 사람이라면이 개념은 바보에서 불필요한 것에서 힙 스터에 이르기까지 무엇이든 보일 수 있습니다 . 그러나 그렇지 않습니다. :-)

넓은 의미에서 DI는 구성 요소를 매우 자유롭게 선언 한 다음 다른 구성 요소에서 선언 할 수 있음을 의미합니다. 인스턴스를 요청하면 부여됩니다. 로딩 순서 나 파일 위치 등을 알 필요가 없습니다. 전원이 즉시 표시되지 않을 수도 있지만 단 하나의 일반적인 예 (테스트)를 제공합니다.

우리 애플리케이션에서 REST API를 통해 서버 측 저장소를 구현하는 서비스가 필요하며 애플리케이션 상태에 따라 로컬 저장소도 필요하다고 가정 해 보겠습니다. 컨트롤러에서 테스트를 실행할 때 우리는 서버와 통신하고 싶지 않습니다. 컨트롤러를 테스트하고 있습니다. 원래 구성 요소와 동일한 이름의 모의 서비스를 추가 할 수 있으며 인젝터는 컨트롤러가 자동으로 가짜 컨트롤러를 가져 오도록 보장합니다. 컨트롤러는 차이점을 알 필요가 없으며 알 필요가 없습니다.

테스트 말하면 ...

4. 테스트 주도 개발 - 항상

이 부분은 아키텍처에 대한 섹션 3의 일부입니다.하지만 중요한 부분이므로 필자는 자신의 최상위 섹션으로 삼을 것입니다.

보고, 사용했거나 작성한 많은 jQuery 플러그인 중 몇 명이 동반 테스트 스위트를 가지고 있었습니까? 그다지 많지 않은 이유는 jQuery가 그다지 적합하지 않기 때문입니다. 그러나 AngularJS가 있습니다.

jQuery에서 테스트하는 유일한 방법은 테스트에서 DOM 조작을 수행 할 수있는 샘플 / 데모 페이지를 사용하여 구성 요소를 독립적으로 만드는 것입니다. 그렇다면 우리는 컴포넌트를 개별적으로 개발 한 다음 애플리케이션에 통합해야합니다. 얼마나 불편한가! jQuery로 개발할 때 우리는 테스트 주도 개발 대신에 반복적으로 선택합니다. 그리고 누가 우리를 비난 할 수 있습니까?

그러나 우리는 관심사가 분리되어 있으므로 AngularJS에서 반복적으로 테스트 중심 개발을 할 수 있습니다! 예를 들어, 현재의 경로가 메뉴에 표시되도록하는 아주 간단한 지시문을 원한다고 가정 해 봅시다. 우리는 우리의 적용 관점에서 우리가 원하는 것을 선언 할 수 있습니다 :

<a href="/hello" when-active>Hello</a>

이제는 존재하지 않는 when-active 지시문에 대한 테스트를 작성할 수 있습니다.

it( 'should add "active" when the route changes', inject(function() {
    var elm = $compile( '<a href="/hello" when-active>Hello</a>' )( $scope );

    $location.path('/not-matching');
    expect( elm.hasClass('active') ).toBeFalsey();

    $location.path( '/hello' );
    expect( elm.hasClass('active') ).toBeTruthy();
}));

우리가 시험을 볼 때, 우리는 그것이 실패한 것을 확인할 수 있습니다. 이제는 우리의 지침을 만들어야합니다.

.directive( 'whenActive', function ( $location ) {
    return {
        scope: true,
        link: function ( scope, element, attrs ) {
            scope.$on( '$routeChangeSuccess', function () {
                if ( $location.path() == element.attr( 'href' ) ) {
                    element.addClass( 'active' );
                }
                else {
                    element.removeClass( 'active' );
                }
            });
        }
    };
});

이제 테스트가 끝나고 요청에 따라 메뉴가 실행됩니다. 우리의 개발은 반복 적이고 테스트 중심적입니다. 사악 해.

5. 개념적으로 지시문은 패키지화 된 jQuery가 아닙니다.

당신은 종종 "지시어에서 DOM 조작 만"하는 소리를 듣습니다. 이것은 필연적이다. 정중하게 복종하십시오!

하지만 조금 더 깊이 들어가 보자 ...

일부 지시문은 이미보기 ( ngClass 생각)에있는 내용을 ngClass 때문에 DOM 조작을 바로 수행 한 다음 기본적으로 수행됩니다. 그러나 지시어가 "위젯"과 같은 템플릿이고 템플리트가 있다면, 그것은 또한 관심사의 분리를 존중해야합니다. 즉, 템플릿 역시 링크 및 컨트롤러 기능에서의 구현과는 크게 독립적으로 유지되어야합니다.

AngularJS는 이것을 매우 쉽게 만들 수있는 전체 도구 모음을 제공합니다. ngClass 를 사용하면 클래스를 동적으로 업데이트 할 수 있습니다. ngModel 은 양방향 데이터 바인딩을 허용합니다. ngShowngHide 프로그래밍 방식으로 요소를 표시하거나 숨 깁니다. 우리가 스스로 쓰는 것을 포함하여 더 많은 것들이 있습니다. 즉, DOM 조작 없이 모든 종류의 멋진 작업을 수행 할 수 있습니다. DOM 조작이 적을수록 지시문을 테스트하기가 쉬우 며 스타일을 쉽게 적용 할 수 있고 향후 변경이 쉬우 며 재사용 성 및 배포 가능성이 높아집니다.

많은 jQuery를 던지기 위해 AngularJS에 새로운 개발자들이 많이 있습니다. 다른 말로하면, 그들은 "컨트롤러에서 DOM 조작을 할 수 없기 때문에 코드를 지시문에 넣을 것"이라고 생각합니다. 그것이 확실히 더 나은 동안, 그것은 종종 아직도 잘못 입니다.

우리가 3 절에서 프로그램 한 로거를 생각해보십시오. 우리가 지시어에 넣었을지라도, 우리는 여전히 그것을 "각도 방법"으로하고 싶습니다. 여전히 DOM 조작을하지 않습니다! DOM 조작이 필요할 때가 많이 있지만, 생각보다 훨씬 희귀합니다! 애플리케이션에서 DOM 조작을 수행하기 전에 필요한 것이 있는지 물어보십시오. 더 좋은 방법이있을 수 있습니다.

다음은 가장 자주 보는 패턴을 보여주는 간단한 예입니다. 토글 가능한 버튼이 필요합니다. (참고 :이 예제는 약간의 인위적이고 똑같은 방식으로 해결되는 더 복잡한 경우를 나타내는 자세한 설명입니다.)

.directive( 'myDirective', function () {
    return {
        template: '<a class="btn">Toggle me!</a>',
        link: function ( scope, element, attrs ) {
            var on = false;

            $(element).click( function () {
                on = !on;
                $(element).toggleClass('active', on);
            });
        }
    };
});

다음과 같은 몇 가지 문제가 있습니다.

  1. 첫째, jQuery는 절대로 필요하지 않았습니다. 여기 jQuery가 필요한 모든 것은 없습니다!
  2. 둘째, 이미 페이지에 jQuery가 있어도 여기에서 사용할 이유가 없습니다. 우리는 단순히 angular.element 를 사용할 수 있습니다. jQuery가없는 프로젝트 angular.element 컴포넌트를 angular.element 여전히 작동합니다.
  3. 셋째,이 지시어가 작동하려면 jQuery 필요하다고 가정하더라도 jqLite ( angular.element )는로드 된 경우 항상 jQuery를 사용합니다! 따라서 우리는 $ 사용할 필요가 없습니다 - 우리는 단지 angular.element 사용할 수 있습니다.
  4. 넷째로, 세 번째와 밀접한 관계가 있습니다. jqLite 요소를 $ 로 감쌀 필요가 없습니다. link 함수로 전달되는 element이미 jQuery 요소입니다.
  5. 그리고 이전 섹션에서 언급 한 다섯 번째, 왜 우리는 우리의 논리에 템플릿 요소를 혼합합니까?

이 지시문은 훨씬 더 간단하게 다음과 같이 다시 작성할 수 있습니다 (매우 복잡한 경우에도!).

.directive( 'myDirective', function () {
    return {
        scope: true,
        template: '<a class="btn" ng-class="{active: on}" ng-click="toggle()">Toggle me!</a>',
        link: function ( scope, element, attrs ) {
            scope.on = false;

            scope.toggle = function () {
                scope.on = !scope.on;
            };
        }
    };
});

템플리트가 템플리트에 있으므로 사용자 (또는 사용자)는 필요한 모든 스타일을 충족하는 템플리트에 대해 쉽게 스왑 할 수 있으며 논리는 전혀 변경하지 않아도됩니다. 재사용 성 - 붐!

테스트와 같은 그 밖의 모든 이점이 여전히 있습니다. 템플릿의 내용이 무엇이든 관계없이 지시문의 내부 API는 다루지 않으므로 리팩토링이 쉽습니다. 지시어를 건드리지 않고 원하는만큼 템플릿을 변경할 수 있습니다. 그리고 당신이 무엇을 바꿔도 테스트는 여전히 끝납니다.

w00t!

따라서 지시어가 jQuery와 같은 함수의 모음이 아니라면 무엇입니까? 지시문은 실제로 HTML의 확장입니다 . HTML이 당신이 필요로하는 것을하지 않는다면, 지시어를 작성하여 HTML을 사용하는 것처럼 사용할 수 있습니다.

다른 말로하면, AngularJS가 상자에서 무엇인가를하지 않는다면, 팀이 ngClick , ngClass , 등등에 바로 들어갈 수있는 방법을 생각해보십시오.

개요

jQuery도 사용하지 마십시오. 그것을 포함시키지 마십시오. 그것은 당신을 뒤로 잡을 것입니다. 그리고 $ 도달하기 전에 jQuery로 해결하는 방법을 알고 있다고 생각하는 문제에 직면했을 때 AngularJS를 제한하는 방법에 대해 생각해보십시오. 모르는 사람은 물어보십시오! 20 회 중 19 회를 수행하는 가장 좋은 방법은 jQuery를 필요로하지 않고 jQuery 결과로 해결하기 위해 더 많은 작업을 수행하는 것입니다.


AngularJS와 jQuery 비교

AngularJS와 jQuery는 매우 다른 이데올로기를 채택합니다. jQuery에서오고 있다면 놀랄만 한 차이점을 발견 할 수 있습니다. 각도는 너를 화나게 할지도 모른다.

이것은 정상적인 현상이므로 밀고 나가야합니다. 각도는 그만한 가치가 있습니다.

큰 차이 (TLDR)

jQuery는 DOM의 임의의 비트를 선택하고 임시 변경을 수행 할 수있는 툴킷을 제공한다. 당신은 당신이 한 조각 씩 좋아하는 것을 할 수 있습니다.

대신 AngularJS는 컴파일러 를 제공합니다.

이것이 의미하는 것은 AngularJS가 전체 DOM을 위에서 아래로 읽어서 그것을 그대로 컴파일러에 대한 지침으로 코드로 취급한다는 것입니다. DOM을 탐색 할 때 AngularJS 컴파일러에 동작 방식 및 처리 방법을 알려주는 특정 지시문 (컴파일러 지시문)을 찾습니다. 지시어는 속성, 태그, 클래스 또는 주석과도 일치 할 수있는 JavaScript로 가득 찬 작은 객체입니다.

Angular 컴파일러가 DOM 조각이 특정 지시문과 일치한다고 판단하면 지시문 함수를 호출하여 DOM 요소, 모든 특성, 현재 $ 범위 (로컬 변수 저장소) 및 기타 유용한 비트를 전달합니다. 이러한 속성에는 Directive에서 해석 할 수있는 표현식이 포함될 수 있으며, 표현식을 표현하는 방법과 그 자체를 다시 그려야하는 표현식이 포함될 수 있습니다.

디렉티브는 컨트롤러, 서비스 등과 같은 추가 Angular 컴포넌트를 차례로 가져올 수 있습니다. 컴파일러의 맨 아래에 나오는 것은 완전히 구성된 웹 애플리케이션입니다.

이것은 Angular가 Template Driven이라는 것을 의미합니다 . 템플릿은 자바 스크립트를 구동합니다. 이것은 역할의 근본적인 반전이며, 지난 10 년 동안 우리가 작성한 눈에 잘 띄지 않는 JavaScript의 완전한 반대입니다. 약간 익숙해 져야합니다.

그것이 지나치게 처방 적이거나 제한적인 것처럼 들리면 진리와 더 이상 거리가 멀어 질 수 있습니다. AngularJS는 HTML을 코드로 처리하므로 웹 응용 프로그램에서 HTML 수준의 세밀도 를 얻게 됩니다 . 모든 것이 가능하며 몇 가지 개념적 도약을하면 의외로 쉽게 할 수 있습니다.

중성미까지 내려 가자.

먼저 Angular가 jQuery를 대체하지 않습니다.

Angular 및 jQuery는 다른 작업을 수행합니다. AngularJS는 웹 응용 프로그램을 제작할 수있는 일련의 도구를 제공합니다. jQuery는 주로 DOM 수정 도구를 제공한다. 페이지에 jQuery가 있으면 AngularJS가 자동으로 사용합니다. 그것이 아니라면, AngularJS에는 jQuery Lite가 함께 제공됩니다. jQuery Lite는 축소되었지만 여전히 완벽하게 사용할 수있는 jQuery 버전입니다.

Misko는 jQuery를 좋아하고 그것을 사용하는 것에 반대하지 않습니다. 그러나 스코프, 템플릿 및 지시문을 조합하여 거의 모든 작업을 완료 할 수 있다는 것을 알게 될 것이며 코드가보다 분리되고 구성이 다양 할 수 있으므로 가능하면이 워크 플로를 선호해야합니다. 모난.

당신이 jQuery를 사용한다면, 그 곳 곳곳에 뿌리지 말아야한다. AngularJS에서 DOM 조작을위한 올바른 위치는 지시문에 있습니다. 나중에 이것들에 더 많은 것.

셀렉터 대 선언적 템플릿이있는 눈에 잘 띄지 않는 JavaScript

jQuery는 일반적으로 눈에 거슬리지 않게 적용됩니다. JavaScript 코드는 머리글 (또는 바닥 글)에 링크되어 있으며 언급 된 유일한 곳입니다. 우리는 선택기를 사용하여 페이지의 비트를 추출하고 플러그인을 작성하여 해당 부분을 수정합니다.

JavaScript가 제어됩니다. HTML은 완전히 독립적입니다. 당신의 HTML은 자바 스크립트 없이도 의미 론적이다. Onclick 속성은 매우 나쁜 습관입니다.

AngularJS에 대해 처음 알게 될 것 중 하나는 사용자 정의 속성이 어디 에나 있습니다 . HTML은 ng 속성으로 흩어져 있습니다.이 속성은 본질적으로 스테로이드의 onClick 속성입니다. 이들은 지시어 (컴파일러 지시어)이며 템플릿이 모델에 연결되는 주요 방법 중 하나입니다.

처음에 이것을 보았을 때 AngularJS를 오래된 학교 침입 형 JavaScript로 쓰고 싶을지도 모릅니다 (처음에했던 것처럼). 사실, AngularJS는 이러한 규칙을 따르지 않습니다. AngularJS에서 HTML5는 템플릿입니다. AngularJS가 귀하의 웹 페이지를 생성하기 위해 컴파일됩니다.

이것은 첫 번째 큰 차이입니다. jQuery의 경우 웹 페이지는 조작 할 DOM입니다. AngularJS에 HTML은 컴파일 될 코드입니다. AngularJS는 전체 웹 페이지를 읽고 내장 된 컴파일러를 사용하여 문자 그대로 새로운 웹 페이지로 컴파일합니다.

템플릿은 선언적이어야합니다. 그것의 의미는 단순히 그것을 읽음으로써 명확해야한다. 의미있는 이름을 가진 사용자 지정 특성을 사용합니다. 새로운 HTML 요소를 의미있는 이름으로 다시 만듭니다. 최소한의 HTML 지식과 코딩 기술이없는 디자이너는 AngularJS 템플릿을 읽고 그것이 무엇을하는지 이해할 수 있습니다. 그 또는 그녀는 수정할 수 있습니다. 이것은 각도 방식입니다.

템플릿이 운전석에 있습니다.

AngularJS를 시작할 때 튜토리얼을 실행할 때 가장 먼저 묻는 질문 중 하나는 "내 코드는 어디에 있습니까?"입니다. . 필자는 자바 스크립트를 작성하지 않았지만이 모든 동작이 있습니다. 대답은 분명합니다. AngularJS가 DOM을 컴파일하기 때문에 AngularJS는 HTML을 코드로 취급합니다. 많은 경우에 템플릿을 작성하고 AngularJS가 응용 프로그램으로 컴파일하도록하는 것으로 충분합니다.

템플릿이 응용 프로그램을 구동합니다. 그것은 DSL 로 취급됩니다. AngularJS 구성 요소를 작성하면 AngularJS는 템플릿 구조를 기반으로 적절한시기에 사용할 수 있도록합니다. 이는 표준 MVC 패턴과 매우 다르며 템플릿은 단지 출력용입니다.

예를 들어 Ruby on Rails 보다 XSLT 와 유사합니다.

이것은 익숙해 져야하는 통제의 급진적 반전입니다.

자바 스크립트에서 응용 프로그램을 구동하는 것을 그만 두십시오. 템플리트가 응용 프로그램을 구동하도록하고 AngularJS가 구성 요소의 배선을 처리하게하십시오. 이것은 또한 각도 방법입니다.

시맨틱 HTML 대 시맨틱 모델

jQuery를 사용하면 HTML 페이지에 의미 론적 의미있는 내용이 포함되어야합니다. 자바 스크립트가 (사용자 또는 검색 엔진에 의해) 꺼져 있으면 콘텐츠에 계속 액세스 할 수 있습니다.

AngularJS는 HTML 페이지를 템플릿으로 취급하기 때문입니다. 템플릿은 궁극적으로 귀하의 API에서 오는 귀하의 콘텐츠가 일반적으로 귀하의 모델에 저장되므로 의미 론적이라고 생각하지 않습니다. AngularJS는 모델을 사용하여 DOM을 컴파일하여 시맨틱 웹 페이지를 만듭니다.

HTML 소스는 더 이상 의미 론적이지 않으며 API와 컴파일 된 DOM은 의미 론적입니다.

모델에서 AngularJS라는 의미에서 HTML은 표시 용 템플릿 일뿐입니다.

이 시점에서 SEO 및 접근성과 관련하여 모든 종류의 질문이있을 수 있습니다. 여기에 공개 된 문제가 있습니다. 대부분의 화면 판독기는 이제 JavaScript를 구문 분석합니다. 검색 엔진은 AJAXed 콘텐츠를 색인 생성 할 수도 있습니다. 그럼에도 불구하고 푸시 스테이트 URL을 사용하고 괜찮은 사이트 맵을 갖고 있는지 확인해야합니다. 이 문제에 대한 설명은 다음을 참조하십시오. https://.com/a/23245379/687677

우려 사항 분리 (SOC) vs. MVC

관심사 분리 (SOC)는 SEO, 접근성 및 브라우저 비 호환성을 비롯한 다양한 이유로 웹 개발의 여러 해 동안 자란 패턴입니다. 다음과 같이 보입니다.

  1. HTML - 의미 론적 의미. HTML은 혼자 서 있어야합니다.
  2. CSS - 스타일링, CSS 없이도 페이지를 읽을 수 있습니다.
  3. JavaScript - 동작, 스크립트없이 콘텐츠가 남아 있습니다.

AngularJS는 규칙에 따라 재생되지 않습니다. 획기적으로 , AngularJS는 10 년 동안받은 지혜를 없애고 대신 템플리트가 더 이상 의미 론적이 아닌 MVC 패턴을 구현합니다.

다음과 같이 보입니다.

  1. 모델 - 모델에 의미 론적 데이터가 포함되어 있습니다. 모델은 대개 JSON 객체입니다. 모델은 $ scope라는 객체의 속성으로 존재합니다. 템플릿에 액세스 할 수있는 $ scope에 편리한 유틸리티 함수를 저장할 수도 있습니다.
  2. 보기 -보기가 HTML로 작성됩니다. 데이터가 모델에 있기 때문에 뷰는 일반적으로 의미가 없습니다.
  3. 컨트롤러 - 컨트롤러는 뷰를 모델에 연결하는 JavaScript 함수입니다. 그것의 기능은 $ scope를 초기화하는 것입니다. 응용 프로그램에 따라 컨트롤러를 만들거나하지 않아도됩니다. 한 페이지에 많은 컨트롤러가있을 수 있습니다.

MVC와 SOC는 같은 축척의 반대쪽 끝에 있지 않으며 완전히 다른 축에 있습니다. SOC는 AngularJS 컨텍스트에서는 의미가 없습니다. 그것을 잊어 버리고 계속 나아가 야합니다.

나처럼, 당신이 브라우저 전쟁을 통해 살았다면, 당신은이 생각을 상당히 불쾌하게 느낄 것입니다. 그것을 극복해라, 그것의 가치가있을 것이다, 나는 약속한다.

플러그인 대 지시문

플러그인은 jQuery를 확장합니다. AngularJS 지시문은 브라우저의 기능을 확장합니다.

jQuery에서는 함수를 jQuery.prototype에 추가하여 플러그인을 정의합니다. 그런 다음 요소를 선택하고 결과에서 플러그인을 호출하여 DOM에 연결합니다. 아이디어는 jQuery의 기능을 확장하는 것입니다.

예를 들어, 페이지에 캐 러셀 (carousel)을 원할 경우, 아마도 nav 요소에 래핑 된 숫자의 정렬되지 않은 목록을 정의 할 수 있습니다. 그런 다음 일부 jQuery를 작성하여 페이지에서 목록을 선택하고 슬라이딩 애니메이션을 수행 할 시간 초과가있는 갤러리로 다시 스타일을 적용 할 수 있습니다.

AngularJS에서는 지시어를 정의합니다. 지시문은 JSON 객체를 반환하는 함수입니다. 이 객체는 AngularJS에게 어떤 DOM 요소를 찾고 어떤 변화를 주는지 알려줍니다. 지시어는 사용자가 고안 한 속성이나 요소를 사용하여 템플릿에 연결됩니다. 새로운 속성과 요소로 HTML의 기능을 확장하는 것이 아이디어입니다.

AngularJS 방법은 네이티브로 보이는 HTML의 기능을 확장하는 것입니다. 사용자 정의 속성 및 요소로 확장 된 HTML처럼 보이는 HTML을 작성해야합니다.

캐 러셀을 원한다면 <carousel /> 요소를 사용하고 템플릿을 가져 오도록 지시문을 정의하고 그 흡인자가 작동하도록 만듭니다.

작은 지시문 대 구성 스위치가있는 큰 플러그인

jQuery의 경향은 많은 값과 옵션을 전달하여 구성하는 라이트 박스와 같은 큰 플러그인을 작성하는 것입니다.

이것은 AngularJS의 실수입니다.

드롭 다운의 예를 들어보십시오. 드롭 다운 플러그인을 작성하는 경우 클릭 핸들러에서 코딩하는 것이 좋을 수도 있습니다. 아마 위쪽이나 아래쪽에있는 셰브론에 추가하는 기능, 펼쳐진 요소의 클래스를 변경하거나, 메뉴 숨기기를 표시하거나, 모든 유용한 정보를 표시 할 수 있습니다.

당신이 작은 변화를 원할 때까지.

마우스 오버시 펼치려는 메뉴가 있다고 가정 해보십시오. 이제 우리에게는 문제가 있습니다. 플러그인이 우리를 위해 클릭 처리기에 연결되어 있으므로이 특정 경우에 다르게 작동하도록 구성 옵션을 추가해야합니다.

AngularJS에서는 더 작은 지시문을 작성합니다. 우리의 드롭 다운 지시는 엄청나게 작을 것입니다. 접힌 상태를 유지하고 fold (), unfold () 또는 toggle ()하는 메서드를 제공 할 수 있습니다. 이 메소드는 상태를 보유하는 부울 인 $ scope.menu.visible을 간단히 업데이트합니다.

이제 우리의 템플릿에서 우리는 이것을 연결할 수 있습니다 :

<a ng-click="toggle()">Menu</a>
<ul ng-show="menu.visible">
  ...
</ul>

마우스 오버시 업데이트해야합니까?

<a ng-mouseenter="unfold()" ng-mouseleave="fold()">Menu</a>
<ul ng-show="menu.visible">
  ...
</ul>

템플릿은 HTML 수준의 세밀도를 얻도록 애플리케이션을 구동합니다. 사례별로 예외를 만들고 싶다면 템플릿을 사용하면 쉽게 처리 할 수 ​​있습니다.

폐쇄 대 $ 범위

JQuery 플러그인은 클로저에 만들어집니다. 개인 정보는 그 종결 내에서 유지됩니다. 클로저 내에 범위 체인을 유지 관리하는 것은 당신에게 달려 있습니다. jQuery에 의해 플러그인에 전달 된 DOM 노드 집합에 액세스 할 수 있으며 클로저에 정의 된 모든 로컬 변수와 정의한 전역 변수에 액세스 할 수 있습니다. 즉, 플러그인은 자체적으로 포함됩니다. 이것은 좋은 일이지만 전체 애플리케이션을 만들 때 제한을받을 수 있습니다. 동적 페이지의 섹션간에 데이터를 전달하는 것은 어려움이됩니다.

AngularJS에는 $ scope 객체가 있습니다. 이것은 모델을 저장하는 AngularJS가 만들고 유지 관리하는 특수 객체입니다. 특정 지시문은 새로운 $ 범위를 생성합니다. 기본적으로 JavaScript 프로토 타입 상속을 사용하여 $ 범위 범위를 상속합니다. $ scope 객체는 컨트롤러와 뷰에서 액세스 할 수 있습니다.

이것은 영리한 부분입니다. $ scope 상속의 구조는 DOM의 구조를 대략적으로 따르므로 요소는 자신의 범위에 액세스 할 수 있으며 모든 포함 범위는 전역 $ 범위까지 (전역 범위와 동일하지 않음) 완벽하게 적용됩니다.

따라서 데이터를 전달하고 적절한 수준으로 데이터를 저장하는 것이 훨씬 쉬워집니다. 드롭 다운이 펼쳐지면 드롭 다운 $ scope만이이를 알아야합니다. 사용자가 환경 설정을 업데이트하면 전역 $ 범위를 업데이트 할 수 있으며 사용자 기본 설정을 청취하는 중첩 된 범위에 자동으로 경고합니다.

이것은 복잡하게 들릴지도 모릅니다. 사실, 당신이 그것으로 이완되면, 그것은 마치 비행과 같습니다. $ scope 객체를 만들 필요가 없으며, AngularJS는 템플릿 계층을 기반으로 올바르게 인스턴스화하고 구성합니다. 그런 다음 AngularJS는 종속성 삽입 마법을 사용하여 구성 요소에서 사용할 수 있도록합니다 (자세한 내용은 나중에 설명).

수동 DOM 변경 대 데이터 바인딩

jQuery에서는 모든 DOM 변경을 손으로 처리합니다. 프로그래밍 방식으로 새로운 DOM 요소를 구성합니다. JSON 배열을 DOM에 배치하려면 HTML을 생성하고 삽입하는 함수를 작성해야합니다.

AngularJS에서도이 작업을 수행 할 수 있지만 데이터 바인딩을 사용하는 것이 좋습니다. 모델을 변경하고 DOM이 템플릿을 통해 바인딩되므로 DOM은 자동으로 업데이트되므로 개입 할 필요가 없습니다.

데이터 바인딩은 속성 또는 중괄호 구문을 사용하여 템플릿에서 수행되므로 매우 쉽게 수행 할 수 있습니다. 그와 관련된인지 오버 헤드가 거의 없으므로 항상 자신이 그것을하고 있음을 알게 될 것입니다.

<input ng-model="user.name" />

입력 요소를에 바인딩합니다 $scope.user.name. 입력을 업데이트하면 현재 범위의 값이 업데이트되고 그 반대의 경우도 마찬가지입니다.

마찬가지로:

<p>
  {{user.name}}
</p>

단락에 사용자 이름을 출력합니다. 라이브 바인딩이므로 $scope.user.name값이 업데이트되면 템플릿도 업데이트됩니다.

항상 아약스

jQuery에서 Ajax 호출을 만드는 것은 매우 간단하지만 여전히 두 번 생각할 수도 있습니다. 고려해야 할 추가 복잡성과 유지할 스크립트의 공정한 덩어리가 있습니다.

AngularJS에서 Ajax는 기본 이동 솔루션이며 거의 모든 상황에서 발생합니다. ng-include가 포함 된 템플릿을 포함 할 수 있습니다. 가장 간단한 사용자 지정 문을 사용하여 템플릿을 적용 할 수 있습니다. Ajax 호출을 서비스에 랩핑하고 GitHub 서비스 또는 Flickr 서비스를 만들 수 있습니다.이 서비스는 놀라운 속도로 액세스 할 수 있습니다.

서비스 객체와 도우미 함수

jQuery에서 API에서 피드를 가져 오는 것과 같이 DOM과 관련이없는 작은 작업을 수행하려는 경우 Google에서 종료 할 때 약간의 기능을 쓸 수 있습니다. 이는 유효한 해결책이지만, 자주 해당 피드에 액세스하려면 어떻게해야합니까? 다른 응용 프로그램에서 해당 코드를 다시 사용하려면 어떻게해야합니까?

AngularJS는 서비스 객체를 제공합니다.

서비스는 함수와 데이터를 포함하는 단순한 개체입니다. 그것들은 항상 싱글 톤 (singleton)으로, 둘 이상일 수는 없습니다. 스택 오버플로 API에 액세스하려는 경우 스택 오버플로 API에 Service대한 메소드를 정의하는 메소드를 작성할 수 있습니다 .

장바구니가 있다고 가정 해 봅시다. 카트를 관리하고 항목을 추가하고 제거하는 메소드가 포함 된 ShoppingCartService를 정의 할 수 있습니다. 서비스는 싱글 톤이며 다른 모든 구성 요소와 공유되기 때문에 장바구니에 기록하고 데이터를 가져와야하는 모든 개체가 필요합니다. 항상 같은 카트입니다.

서비스 객체는 자체적으로 포함 된 AngularJS 구성 요소로서 우리가 사용하는대로 재사용 할 수 있습니다. 그것들은 함수와 데이터를 포함하는 간단한 JSON 객체입니다. 그것들은 항상 싱글 톤이기 때문에 한 곳에서 서비스에 데이터를 저장하면 같은 서비스를 요청하여 다른 곳으로 데이터를 가져올 수 있습니다.

Dependency Injection (DI) vs. Instatiation - 일명 탈 스파게티

AngularJS는 귀하의 의존 관계를 관리합니다. 개체를 원한다면 참조하고 AngularJS가 개체를 가져옵니다.

당신이 이것을 사용하기 전까지는, 이것이 엄청난 시간 동안 무엇인지를 설명하기가 어렵습니다. AngularJS DI가 jQuery 내부에 존재하지 않습니다.

DI는 응용 프로그램을 작성하고 함께 연결하는 대신 구성 요소 라이브러리를 정의하며 각 구성 요소는 문자열로 식별됩니다.

Flickr에서 JSON 피드를 가져 오는 메소드를 정의하는 'FlickrService'라는 구성 요소가 있다고 가정 해보십시오. 이제 Flickr에 액세스 할 수있는 컨트롤러를 작성하려면 컨트롤러를 선언 할 때 이름으로 'FlickrService'를 참조하면됩니다. AngularJS는 구성 요소를 인스턴스화하고 내 컨트롤러에서 사용할 수있게합니다.

예를 들어 여기 서비스를 정의합니다.

myApp.service('FlickrService', function() {
  return {
    getFeed: function() { // do something here }
  }
});

이제 그 서비스를 사용하고자 할 때 다음과 같이 이름으로 참조하면됩니다.

myApp.controller('myController', ['FlickrService', function(FlickrService) {
  FlickrService.getFeed()
}]);

AngularJS는 FlickrService 객체가 컨트롤러를 인스턴스화하는 데 필요하다는 것을 인식하고이를 제공 할 것입니다.

이것은 배선 작업을 매우 쉽게 만들어 주며, 거의 모든 방향을 향한 경향을 제거합니다. 우리는 구성 요소의 평면 목록을 가지고 있으며, AngularJS는 필요할 때마다 하나씩 우리에게 제공합니다.

모듈 형 서비스 아키텍처

jQuery는 코드를 어떻게 구성해야하는지에 대해서는 거의 말하지 않는다. Angular에는 의견이 있습니다.

AngularJS는 코드를 배치 할 수있는 모듈을 제공합니다. 예를 들어 Flickr와 대화하는 스크립트를 작성하는 경우 Flickr 관련 기능을 모두 포함하도록 Flickr 모듈을 생성 할 수 있습니다. 모듈에는 다른 모듈 (DI)이 포함될 수 있습니다. 기본 응용 프로그램은 일반적으로 모듈이며 응용 프로그램이 의존 할 다른 모든 모듈을 포함해야합니다.

Flickr 기반의 다른 응용 프로그램을 작성하려는 경우 간단한 코드 재사용을 얻고 Flickr 모듈 만 포함하면 새로운 응용 프로그램의 모든 Flickr 관련 기능에 액세스 할 수 있습니다.

모듈에는 AngularJS 구성 요소가 포함되어 있습니다. 모듈을 포함 시키면 해당 모듈의 모든 구성 요소가 고유 한 문자열로 식별되는 간단한 목록으로 사용할 수있게됩니다 . 그런 다음 AngularJS의 종속성 주입 메커니즘을 사용하여 이러한 구성 요소를 서로 주입 할 수 있습니다.

요약하자면

AngularJS와 jQuery는 적이 아닙니다. AngularJS 내에서 jQuery를 사용할 수 있습니다. AngularJS를 잘 사용한다면 (템플릿, 데이터 바인딩, $ 범위, 지시어 등) 그렇지 않으면 필요할 때보 다 훨씬 적은 jQuery가 필요할 것입니다.

실현해야 할 주요 사항은 템플릿이 애플리케이션을 구동한다는 것입니다. 모든 일을하는 큰 플러그인을 작성하는 것을 그만 두십시오. 대신 한 가지 작업을 수행하는 작은 지시문을 작성한 다음 간단한 템플릿을 작성하여 함께 연결하십시오.

눈에 잘 띄지 않는 자바 스크립트에 대해 덜 생각하고 대신 HTML 확장을 생각해보십시오.

내 작은 책

AngularJS에 대해 너무 흥분 했었습니다. 짧은 책을 썼습니다 . 온라인 http://nicholasjohnson.com/angular-book/ 책을 읽으 실 수 있습니다 . http://nicholasjohnson.com/angular-book/ . 도움이되기를 바랍니다.


필수 → 선언적

jQuery에서는 선택기 를 사용하여 DOM 요소를 찾은 다음 이벤트 처리기를 바인딩 / 등록합니다. 이벤트가 트리거되면 DOM을 업데이트 / 변경하기 위해 (필수) 코드가 실행됩니다.

AngularJS에서는 DOM 요소보다는 보기 에 대해 생각하고 싶습니다. 뷰는 AngularJS 지시문 이 포함 된 (선언적) HTML입니다. 지시문은 우리를 위해 장면 뒤에서 이벤트 처리기를 설정하고 동적 데이터 바인딩을 제공합니다. 셀렉터는 거의 사용되지 않으므로 ID (및 일부 클래스 유형)에 대한 필요성이 크게 줄어 듭니다. 뷰는 모델 에 연결됩니다 (범위를 통해). 뷰는 모델의 투영입니다. 이벤트는 모델 (즉, 데이터, 범위 속성)을 변경하며 해당 모델을 투영하는 뷰는 "자동으로"업데이트됩니다.

AngularJS에서는 jQuery에서 선택한 데이터를 보유하는 DOM 요소가 아니라 모델에 대해 생각해보십시오. 사용자가 보는 것을 조작하기 위해 콜백을 등록하는 대신보기를 해당 모델의 투영으로 생각하십시오.

관심사 분리

jQuery는 눈에 잘 띄지 않는 JavaScript (JavaScript) 동작 (JavaScript)을 구조체 (HTML)와 분리하여 사용합니다.

AngularJS는 뷰어 / 구조체 (HTML)에서 비헤이비어를 제거하기 위해 컨트롤러 와 지시문 (각각 자체 컨트롤러가있을 수 있고 컴파일 및 링크 기능을 가질 수 있음)을 사용합니다. Angular에는 응용 프로그램을 분리 / 구성하는 데 도움이되는 서비스필터있습니다 .

https://.com/a/14346528/215945 참조 https://.com/a/14346528/215945

응용 프로그램 설계

AngularJS 애플리케이션을 설계하는 한 가지 접근법 :

  1. 모델에 대해 생각해보십시오. 해당 모델에 대한 서비스 또는 자체 JavaScript 객체를 만듭니다.
  2. 모델을 표현하려는 방식, 즉 의견을 생각하십시오. 필요한 지시문을 사용하여 동적 데이터 바인딩을 가져 오는 각보기에 대해 HTML 템플릿을 만듭니다.
  3. 컨트롤러를 각 뷰에 연결합니다 (ng-view 및 routing 또는 ng-controller 사용). 컨트롤러가 뷰가 작업을 수행하는 데 필요한 모델 데이터 만 찾거나 가져 오도록하십시오. 컨트롤러를 가능한 한 얇게 만드십시오.

프로토 타이프 상속

자바 스크립트 프로토 타입 상속이 어떻게 작동하는지 알지 못해도 jQuery로 많은 것을 할 수있다. AngularJS 응용 프로그램을 개발할 때 JavaScript 상속을 잘 이해하면 일반적인 함정을 피할 수 있습니다. 추천 읽기 : AngularJS의 스코프 프로토 타입 / 프로토 타입 상속의 뉘앙스는 무엇입니까?





angularjs