Wiązanie Danych

Robisz swoją stronę internetową i ciągle umieszczasz {{dane / align= "left" / Kątowa Wola następnie podaj obsługę $ scope, którą możesz wypełnić (statycznie lub poprzez połączenia z serwerem WWW).

Jest to dobre zrozumienie wiązania danych. Myślę, że to zrozumiałeś.

Manipulacja DOM

Do prostej manipulacji DOM, która nie wiąże się z manipulacją danymi (np: zmiana koloru na mousehover, ukrywanie / Pokazywanie elementów Po kliknięciu), jQuery lub old-school js jest wystarczający i czystszy. Zakłada to, że model w MVC angular to wszystko, co odzwierciedla dane na stronie, a co za tym idzie, właściwości css takie jak kolor, wyświetlanie/ukrywanie itp. nie zmieniają wpływ na model.

Widzę tu twój punkt widzenia o" prostej "manipulacji DOM jest czystsze, ale tylko rzadko i to musi być naprawdę "proste". Myślę, że DOM jest jednym z obszarów, tak jak wiązanie danych, gdzie Angular naprawdę świeci. Zrozumienie tego pomoże Ci również zobaczyć, jak kątowy uważa swoje poglądy.

Zacznę od porównania kanciastego sposobu z waniliowym podejściem js do manipulacji domami. Tradycyjnie myślimy o HTML jako o niczym nie "robiącym" i piszemy go jako taki. Więc, inline js, jak "onclick", itp są złe praktyki, ponieważ umieścić "doing" w kontekście HTML, który nie "zrobić". Angular przewraca tę koncepcję na głowie. Jak piszesz swoje widok, myślisz o HTML jako jest w stanie" zrobić " wiele rzeczy. Ta możliwość jest abstrakcyjna w dyrektywach angular, ale jeśli już istnieją lub napisałeś je, nie musisz zastanawiać się "jak" to się robi, po prostu używasz mocy udostępnionej Ci w tym "rozszerzonym" HTML, który angular pozwala Ci używać. Oznacza to również, że cała logika widoku jest naprawdę zawarta w widoku, a nie w plikach javascript. Ponownie, rozumowanie jest takie, że dyrektywy napisane w javascript pliki można uznać za zwiększające możliwości HTML, więc pozwalasz domowi martwić się o manipulowanie sobą (że tak powiem). Zademonstruję prostym przykładem.

To jest znacznik, którego chcemy użyć. Nadałem mu intuicyjną nazwę.

<div rotate-on-click="45"></div>

Po Pierwsze, chciałbym tylko skomentować, że jeśli daliśmy naszemu HTML tę funkcjonalność za pomocą niestandardowej dyrektywy kątowej, to już skończyliśmy . To powiew świeżego powietrza. Więcej na ten temat za chwilę.

Realizacja z jQuery

Demo na żywo tutaj (Kliknij).

function rotate(deg, elem) {
  $(elem).css({
    webkitTransform: 'rotate('+deg+'deg)', 
    mozTransform: 'rotate('+deg+'deg)', 
    msTransform: 'rotate('+deg+'deg)', 
    oTransform: 'rotate('+deg+'deg)', 
    transform: 'rotate('+deg+'deg)'    
  });
}

function addRotateOnClick($elems) {
  $elems.each(function(i, elem) {
    var deg = 0;
    $(elem).click(function() {
      deg+= parseInt($(this).attr('rotate-on-click'), 10);
      rotate(deg, this);
    });
  });
}

addRotateOnClick($('[rotate-on-click]'));

Implementacja z Angular

Demo na żywo tutaj (Kliknij).

app.directive('rotateOnClick', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var deg = 0;
      element.bind('click', function() {
        deg+= parseInt(attrs.rotateOnClick, 10);
        element.css({
          webkitTransform: 'rotate('+deg+'deg)', 
          mozTransform: 'rotate('+deg+'deg)', 
          msTransform: 'rotate('+deg+'deg)', 
          oTransform: 'rotate('+deg+'deg)', 
          transform: 'rotate('+deg+'deg)'    
        });
      });
    }
  };
});

Dość lekkie, bardzo czyste i to tylko prosta manipulacja! moim zdaniem podejście kątowe wygrywa pod każdym względem, zwłaszcza jak funkcja jest abstrakcyjna i manipulacja dom jest deklarowana w DOM. Funkcjonalność jest podłączona do elementu poprzez atrybut html, więc nie ma potrzeby aby odpytywać DOM za pomocą selektora, mamy dwa ładne zamknięcia - jedno zamknięcie dla fabryki dyrektywy, gdzie zmienne są współdzielone we wszystkich zastosowaniach dyrektywy, i jedno zamknięcie dla każdego użycia dyrektywy w funkcji link (lub compile).

Dwukierunkowe powiązanie danych i dyrektywy do manipulacji DOM to tylko początek tego, co czyni Angular niesamowitym. Angular Promuje cały kod jako modułowy, wielokrotnego użytku i łatwy do przetestowania, a także zawiera routing aplikacji na jednej stronie system. Ważne jest, aby pamiętać, że jQuery jest biblioteka powszechnie potrzebne wygody/cross-browser metod, ale Angular jest w pełni funkcjonalny framework do tworzenia pojedynczych stron aplikacji. Skrypt angular faktycznie zawiera własną "lite" wersję jQuery tak, że niektóre z najważniejszych metod są dostępne. Dlatego można argumentować, że używanie Angular to używanie jQuery (lekko), ale Angular zapewnia znacznie więcej "magii", aby pomóc w procesie tworzenia aplikacje.

To jest świetny post dla więcej powiązanych informacji: Jak "myśleć w AngularJS", jeśli mam tło jQuery?

Ogólne różnice.

[9]] powyższe punkty są skierowane na szczególne obawy po. Podam również przegląd innych ważnych różnic. Proponuję zrobić dodatkowe czytanie na każdy temat, jak również.

Angular i jQuery nie można rozsądnie porównać.

Angular to framework, jQuery to biblioteka. Frameworki mają swoje miejsce, a biblioteki mają swoje miejsce. Nie ma jednak wątpliwości, że dobry framework ma większą moc w pisaniu aplikacji niż biblioteka. Właśnie o to chodzi. Możesz pisać swój kod w prostym JS, możesz dodać do biblioteki popularnych funkcji lub możesz dodać framework, aby drastycznie zredukować kod potrzebny do wykonania większości rzeczy. Dlatego bardziej odpowiednie pytanie brzmi:

Dlaczego używać frameworka?

Dobrze frameworki mogą pomóc zaprojektować Twój kod tak, aby był modułowy( a więc wielokrotnego użytku), suchy, czytelny, wydajny i bezpieczny. jQuery nie jest frameworkiem, więc nie pomaga w tym zakresie. Wszyscy widzieliśmy typowe ściany kodu spaghetti jQuery. To nie jest wina jQuery - to wina programistów, którzy nie wiedzą jak zaprojektować kod. Jednakże, gdyby deweloperzy wiedzieli, jak zaprojektować kod, skończyliby pisząc jakiś minimalny "framework", aby zapewnić fundament (achitecture itp.) Rozmawiałem przed chwilą, albo coś dodadzą. Na przykład możesz dodać RequireJS do działania jako część twojego frameworka do pisania dobrego kodu.

Oto kilka rzeczy, które dostarczają nowoczesne frameworki:

• szablon
• wiązanie danych
• routing (single page app)
Czysta, modułowa architektura wielokrotnego użytku]}
• bezpieczeństwo
• dodatkowe Funkcje / Funkcje dla wygody

Zanim jeszcze omówię kątowe, Chciałbym podkreślić, że Angular nie jest jedynym w swoim rodzaju. Na przykład Durandal jest frameworkiem zbudowanym na bazie jQuery, Knockout i RequireJS. Ponownie jQuery nie może sam w sobie zapewnić tego, co Knockout, RequireJS, a cały framework zbudowany na nich może. To nie jest porównywalne.

Jeśli chcesz zniszczyć planetę i masz Gwiazdę Śmierci, użyj Gwiazdy Śmierci.

Angular (revisited).

Bazując na moich poprzednich punktach o tym, jakie frameworki provide, chciałbym pochwalić sposób, w jaki udostępnia je Angular i spróbować wyjaśnić, dlaczego jest to kwestia faktyczna lepsza od samego jQuery.

Dom reference.

W moim powyższym przykładzie jest absolutnie nieuniknione, że jQuery musi podłączyć się do DOM, aby zapewnić funkcjonalność. Oznacza to, że widok (html) jest zaniepokojony funkcjonalnością (ponieważ jest oznaczony jakimś rodzajem identyfikatora-jak "suwak obrazu"), a JavaScript jest zaniepokojony dostarczeniem, że funkcjonalność. Angular eliminuje tę koncepcję poprzez abstrakcję. Poprawnie napisany kod z Angular oznacza, że widok jest w stanie zadeklarować własne zachowanie. Jeśli chcę wyświetlić zegar:

<clock></clock>

Zrobione.

Tak, Musimy przejść do JavaScript, aby to coś znaczyło, ale robimy to w przeciwny sposób niż podejście jQuery. Nasza Dyrektywa Angular (która znajduje się w swoim małym świecie) "powiększyła" html i html podpina funkcjonalność do siebie.

MVW Architecure / Modules / Dependency Injection

Angular daje prosty sposób na uporządkowanie kodu. Widok rzeczy należą do widoku (html), rozszerzona funkcjonalność widoku należy do dyrektyw, Inna logika (jak wywołania ajax) i funkcje należą do usług, a połączenie usług i logiki do widoku należy do kontrolerów. Istnieją również inne komponenty angular, które pomagają w konfiguracji i modyfikacji usług itp. Dowolne tworzona funkcjonalność jest automatycznie dostępna w dowolnym miejscu za pośrednictwem podsystemu Injector, który zajmuje się wtryskiem zależności w całej aplikacji. Pisząc aplikację (moduł), dzielę ją na inne moduły wielokrotnego użytku, każdy z własnymi komponentami wielokrotnego użytku, a następnie włączam je do większego projektu. Po rozwiązaniu problemu z Angular, automatycznie rozwiązałeś go w sposób przydatny i ustrukturyzowany do ponownego użycia w przyszłości i łatwo uwzględniony w następny projekt. Ogromną zaletą tego wszystkiego jest to, że Twój kod będzie znacznie łatwiejszy do przetestowania.

Nie jest łatwo sprawić, aby rzeczy "działały" w kanciastym.

DZIĘKI BOGU. Wspomniany kod jQuery spaghetti powstał z dev ' a, który sprawił, że coś "działało", a następnie ruszyło dalej. Możesz napisać zły kod Angular, ale jest to o wiele trudniejsze, ponieważ Angular będzie z tobą o to walczyć. Oznacza to, że musisz skorzystać (przynajmniej w pewnym stopniu) z czystej architektury zapewnia. Innymi słowy, trudniej jest napisać zły kod z Angular, ale wygodniej jest napisać czysty kod. Kątowy jest daleki od ideału. Świat tworzenia stron internetowych stale się rozwija i zmienia, a także pojawiają się nowe i lepsze sposoby rozwiązywania problemów. Facebook React i Flux, na przykład, mają kilka wielkich zalet w stosunku do Angular, ale mają swoje wady. Nic nie jest idealne, ale Angular było i nadal jest niesamowite na razie. Tak jak jQuery kiedyś pomogło świat web iść do przodu, tak ma kątowe, i tak będzie wiele przyjść.