it-swarm.dev

"Myšlení v AngularJS", pokud mám pozadí jQuery?

Předpokládejme, že jsem obeznámen s vývojem aplikací na straně klienta v jQuery , ale teď bych chtěl začít používat AngularJS . Můžete popsat změnu paradigmatu, která je nezbytná? Zde je několik otázek, které vám mohou pomoci vytvořit odpověď:

  • Jak mohu architekturovat a navrhovat webové aplikace na straně klienta odlišně? Jaký je největší rozdíl?
  • Co bych měl přestat dělat/používat; Co bych měl místo toho začít/používat?
  • Existují nějaké aspekty/omezení na straně serveru?

Nehledám podrobné srovnání mezi jQuery a AngularJS.

4521
Mark Rajcok

1. Nenavrhujte svou stránku a potom ji změňte pomocí DOM manipulation

V jQuery navrhujete stránku a pak ji uděláte dynamickou. Je to proto, že jQuery byl navržen pro rozšíření a neuvěřitelně vzrostl z tohoto jednoduchého předpokladu.

Ale v AngularJS, musíte začít od základu s vaší architektury v mysli. Namísto toho, abyste začali přemýšlet "Mám tento kus DOM a chci, aby to udělal X", musíte začít s tím, co chcete dosáhnout, pak jít o navrhování aplikace, a pak konečně jít o navrhování svého pohledu.

2. Nepřidávejte jQuery s AngularJS

Stejně tak nezačínejte s myšlenkou, že jQuery dělá X, Y a Z, takže přidám AngularJS navíc k modelům a regulátorům. To je opravdu lákavé, když právě začínáte, což je důvod, proč vždy doporučuji, aby noví vývojáři AngularJS nepoužívali jQuery vůbec, přinejmenším dokud si nezvyknou dělat věci "úhlová cesta".

Viděl jsem mnoho vývojářů zde a na mailing listu vytvořit tato komplikovaná řešení s jQuery pluginy 150 nebo 200 řádků kódu, které pak lepí do AngularJS s kolekcí zpětných volání a $applys, které jsou matoucí a spletité; ale nakonec to fungují! Problém je v tom, že v většině případech může být plugin jQuery přepsán v AngularJS ve zlomku kódu, kde se najednou všechno stane srozumitelným a přímočarým.

Pointa je tato: když řešíme, nejprve "myslet v AngularJS"; pokud nemůžete myslet na řešení, zeptejte se komunity; pokud po tom všem není snadné řešení, pak neváhejte se dostat na jQuery. Ale nenechte jQuery stát se berlí nebo nikdy zvládnete AngularJS.

3. Vždy přemýšlejte z hlediska architektury

Nejprve víme, že jednostránkové aplikace jsou aplikace. Jsou to ne webové stránky. Takže musíme myslet jako vývojář na straně serveru navíc na myšlení jako vývojář na straně klienta. Musíme přemýšlet o tom, jak rozdělit naši aplikaci na jednotlivé, rozšiřitelné, testovatelné komponenty.

Takže jak děláte to? Jak si "myslíš v AngularJS"? Zde jsou některé obecné principy, v kontrastu s jQuery.

Pohled je "oficiální záznam"

V jQuery programově změníme zobrazení. Mohli bychom mít rozbalovací nabídku definovanou jako ul jako:

<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>

V jQuery, v naší aplikační logice, bychom ji aktivovali s něčím podobným:

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

Když se jen podíváme na pohled, není hned zřejmé, že zde je nějaká funkce. Pro malé aplikace je to v pořádku. Ale pro netriviální aplikace se věci rychle stávají matoucími a těžko udržovatelnými.

V AngularJS je však pohled oficiálním záznamem funkcí založených na pohledu. Naše ul prohlášení bude vypadat takto:

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

Tito dva dělají totéž, ale ve verzi AngularJS každý, kdo se dívá na šablonu, ví, co se má stát. Kdykoliv se na palubu objeví nový člen vývojového týmu, může se na to podívat a pak vědět že na něm existuje směrnice nazvaná dropdownMenu; nepotřebuje intuitivně odpovídat na správnou odpověď nebo prosít žádný kód. Pohled nám řekl, co se má stát. Mnohem čistší.

Vývojáři noví AngularJS často kladou otázku jako: jak najdu všechny vazby určitého druhu a přidám do nich směrnici. Vývojář je vždy oplzlý, když odpovíme: ne. Ale důvod, proč to neuděláte je, že je to jako napůl jQuery, napůl AngularJS a nic dobrého. Problém je v tom, že se vývojář snaží "dělat jQuery" v kontextu AngularJS. To nikdy nebude fungovat dobře. Pohled je oficiální záznam. Mimo směrnici (více o ní níže) nikdy nezměníte nikdy DOM. A direktivy jsou aplikovány v pohledu, takže záměr je jasný.

Nezapomeňte: nenavrhujte a označte. Musíte architekta, a pak design.

Vazba dat

To je zdaleka jeden z nejúžasnějších rysů AngularJS a škrtá mnoho potřeb dělat druhy DOM manipulace jsem zmínil v předchozí části. AngularJS automaticky aktualizuje váš pohled, takže nemusíte! V jQuery reagujeme na události a pak aktualizujeme obsah. Něco jako:

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

Zobrazení, které vypadá takto:

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

Kromě smíšených zájmů máme také stejné problémy s tím, že jsem se zmínil o svém záměru. Ale co je důležitější, museli jsme ručně odkazovat a aktualizovat uzel DOM. A pokud chceme smazat záznam z logu, musíme na to kódovat také proti DOM. Jak testujeme logiku na rozdíl od DOM? A co když chceme změnit prezentaci?

To je trochu chaotický a maličký křehký. Ale v AngularJS to můžeme udělat:

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

A náš pohled může vypadat takto:

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

Náš názor by však mohl vypadat takto:

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

A namísto použití neuspořádaného seznamu používáme výstražná pole Bootstrap. A nikdy jsme nemuseli změnit kód regulátoru! Ale co je důležitější, bez ohledu na to kde nebo jak log se aktualizuje, zobrazení se také změní. Automaticky. Elegantní!

I když jsem to tady neukázal, datová vazba je obousměrná. Tyto zprávy proto mohou být také editovatelné v zobrazení pouze takto: <input ng-model="entry.msg" />. A tam bylo hodně radosti.

Odlišná modelová vrstva

V jQuery, DOM je něco jako model. Ale v AngularJS máme samostatnou modelovou vrstvu, kterou můžeme spravovat jakýmkoli způsobem, jak chceme, zcela nezávisle na pohledu. To napomáhá výše uvedenému vázání dat, udržuje odděluje obavy a zavádí mnohem větší testovatelnost. Další odpovědi uvádějí tento bod, takže to nechám.

Oddělení zájmů

A všechny výše uvedené kravaty do tohoto překrývajícího se tématu: udržujte své obavy oddělené. Váš pohled funguje jako oficiální záznam toho, co se má stát (z větší části); váš model představuje vaše data; máte servisní vrstvu k provádění opakovaně použitelných úkolů; děláte DOM manipulaci a rozšiřujete svůj pohled o směrnice; a vše se spojí s regulátory. To bylo také zmíněno v dalších odpovědích a jediná věc, kterou bych přidal, se týká testovatelnosti, o které se zmiňuji v další části níže.

Závislostní injekce

Pomoci nám s oddělením zájmů je závislost injekce (DI). Pokud pocházíte z jazyka na straně serveru (z Java do PHP ), s tímto konceptem jste pravděpodobně již obeznámeni, ale pokud jste klientem na straně klienta z jQuery, pojetí se může zdát cosi od hloupého až po zbytečné bederní. Ale není to tak. :-)

Z širšího pohledu DI znamená, že můžete komponenty deklarovat velmi volně a pak z libovolné jiné komponenty, stačí požádat o instanci a bude udělena. Nemusíte vědět o načítání objednávky nebo umístění souborů, nebo tak něco. Výkon nemusí být okamžitě viditelný, ale uvedu jen jeden (společný) příklad: testování.

Řekněme, že v naší aplikaci požadujeme službu, která implementuje úložiště na straně serveru prostřednictvím REST API a v závislosti na stavu aplikace také lokální úložiště. Při provádění testů na našich regulátorech nechceme komunikovat se serverem - testujeme kontrolér nakonec. Můžeme jen přidat falešnou službu stejného jména jako náš původní komponent a injektor zajistí, že náš regulátor automaticky získá falešnou službu - náš regulátor nepozná a nemusí znát rozdíl.

Když už mluvíme o testování ...

4. Vývoj řízený testem - vždy

To je opravdu součástí sekce 3 o architektuře, ale je to tak důležité, že ji uvádím jako vlastní sekci nejvyšší úrovně.

Ze všech mnoha pluginů jQuery, které jste viděli, používali nebo psali, kolik z nich mělo doprovodnou testovací sadu? Ne moc, protože jQuery to není příliš přístupné. Ale AngularJS je.

V jQuery je jediný způsob, jak testovat, často vytvořit komponentu nezávisle na vzorové/demo stránce, na které mohou naše testy provádět DOM manipulaci. Takže musíme vytvořit komponentu zvlášť a pak integrovat ji do naší aplikace. Jak nepohodlné! Tolik času, když se vyvíjíme s jQuery, rozhodneme se pro iterativní místo vývoje řízeného testem. A kdo nás může vinit?

Ale protože máme oddělené obavy, můžeme iterativně provádět vývoj řízený testem v AngularJS! Řekněme například, že chceme, aby v naší nabídce byla uvedena velmi jednoduchá směrnice, která je naší aktuální trasou. Z pohledu naší aplikace můžeme deklarovat, co chceme:

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

Dobře, teď můžeme napsat test pro neexistující direktivu 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();
}));

A když spustíme náš test, můžeme potvrdit, že selže. Teprve teď bychom měli vytvořit směrnici:

.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' );
                }
            });
        }
    };
});

Náš test nyní prochází a naše menu funguje podle požadavků. Náš vývoj je obojí iterativní a řízený testem. Wicked-cool.

5. Koncepčně jsou direktivy ne baleny jQuery

Často budete slyšet "pouze dělat DOM manipulaci ve směrnici". To je nutnost. Zacházejte s ní s náležitou úctou!

Ale ponořme se trochu hlouběji ...

Některé direktivy jen ozdobí to, co je již v pohledu (myslím ngClass), a proto někdy dělají DOM manipulaci ihned a pak jsou v podstatě hotové. Pokud je však směrnice jako "pomůcka" a má šablonu, měla by také respektovat oddělení zájmů. To znamená, že šablona i by měla zůstat do značné míry nezávislá na její implementaci ve funkcích propojení a řadiče.

AngularJS je dodáván s celou řadou nástrojů, aby to bylo velmi snadné; s ngClass můžeme třídu dynamicky aktualizovat; ngModel umožňuje obousměrnou vazbu dat; ngShow a ngHide programově zobrazí nebo skryje prvek; a mnoho dalších - včetně těch, které sami píšeme. Jinými slovy, můžeme dělat všechny druhy úžasnosti bez DOM manipulace. Čím méně DOM manipulace, jednodušší direktivy jsou k testování, tím snadnější jsou styl, tím snadnější jsou v budoucnu změnit, a čím více jsou znovu použitelné a distribuovatelné.

Vidím spoustu nových vývojářů AngularJS pomocí směrnic jako místo, kde hodit spoustu jQuery. Jinými slovy, oni si myslí, "protože nemůžu dělat DOM manipulaci v řadiči, vezmu ten kód dát do směrnice". I když to určitě je mnohem lepší, je to často stále špatné.

Přemýšlejte o loggeru, který jsme naprogramovali v sekci 3. I když to dáme do směrnice, my stále to chceme udělat "úhlovou cestou". To stále nebere žádnou manipulaci s DOM! Tam je spousta časů, kdy DOM manipulace je nutná, ale je to hodně vzácnější, než si myslíte! Než začnete DOM manipulaci kdekoli ve vaší aplikaci, zeptejte se sami sebe, zda opravdu potřebujete. Mohl by to být lepší způsob.

Zde je rychlý příklad, který ukazuje vzor, ​​který vidím nejčastěji. Chceme přepínatelné tlačítko. (Poznámka: tento příklad je poněkud zkreslený a skosh verbose představuje složitější případy, které jsou řešeny přesně stejným způsobem.)

.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);
            });
        }
    };
});

S tím je pár věcí špatně:

  1. Za prvé, jQuery nebylo nikdy nutné. Nic, co jsme tady dělali, že jQuery vůbec potřebovali!
  2. Za druhé, i když již máme na naší stránce jQuery, není důvod ho používat zde; Můžeme jednoduše použít angular.element a naše komponenta bude stále fungovat, když spadne do projektu, který nemá jQuery.
  3. Za třetí, i za předpokladu, že jQuery was vyžaduje, aby tato směrnice fungovala, jqLite (angular.element) bude vždy používat jQuery, pokud byl načten! Nemusíme tedy používat $ - stačí použít angular.element.
  4. Za čtvrté, úzce související s třetí, je, že elementy jqLite nemusí být zabaleny v $ - element, který je předán funkci linkjiž je elementu jQuery!
  5. A za páté, o čem jsme se zmínili v předchozích kapitolách, proč mícháme šablony do naší logiky?

Tato směrnice může být přepsána (i pro velmi složité případy!) Mnohem jednodušeji:

.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;
            };
        }
    };
});

Opět platí, že šablona je v šabloně, takže vy (nebo vaši uživatelé) ji můžete snadno vyměnit za takový, který splňuje jakýkoli styl, který je nutný, a logika nikdy nebyla nutná. Opětovné použití - boom!

A stále existují všechny ty další výhody, jako je testování - je to snadné! Nezáleží na tom, co je v šabloně, vnitřní API směrnice se nikdy nedotkne, takže refactoring je snadný. Šablonu můžete změnit tak, jak chcete, aniž byste se dotkli směrnice. A bez ohledu na to, co změníte, vaše testy stále projdou.

w00t!

Pokud tedy direktivy nejsou jen kolekcemi funkcí podobných jQuery, jaké jsou? Směrnice jsou vlastně rozšíření HTML. Pokud HTML nedělá něco, co potřebujete, můžete napsat směrnici, abyste to udělali za vás, a pak ji používejte stejně, jako kdyby byla součástí HTML.

Jinak řečeno, pokud AngularJS nedělá něco z krabice, přemýšlejte, jak by to tým dosáhl, aby se vešel přímo do ngClick, ngClass, et al.

Souhrn

Nepoužívejte ani jQuery. Ani to nezahrnuj. Udrží tě zpátky. A když narazíte na problém, který si myslíte, že víte, jak řešit v jQuery již předtím, než se dostanete na $, zkuste přemýšlet o tom, jak to udělat v mezích AngularJS. Pokud nevíte, zeptejte se! 19 krát z 20, nejlepší způsob, jak to udělat, nepotřebuje jQuery a pokusit se jej vyřešit s jQuery výsledky pro více práce pro vás.

7184

Imperativní → deklarativní

V jQuery se selectors používají k vyhledání DOM elements a pak k nim vázají/registrují obsluhy událostí. Když událost spustí, tento (imperativní) kód provede aktualizaci/změnu DOM.

V AngularJS chcete přemýšlet o pohledech spíše než o DOM prvcích. Pohledy jsou (deklarativní) HTML, které obsahují AngularJS direktivy . Direktivy nastavují obsluhy událostí za zády pro nás a dávají nám dynamické databinding. Selektory se používají jen zřídka, takže potřeba ID (a některých typů tříd) je značně snížena. Pohledy jsou vázány na modely (přes rozsah). Pohledy jsou projekcí modelu. Události mění modely (tj. Data, vlastnosti rozsahu) a zobrazení, která tyto modely aktualizují "automaticky".

V AngularJS, přemýšlet o modelech, spíše než jQuery-vybrané DOM prvky, které drží vaše data. Přemýšlejte o názorech jako projekce těchto modelů, spíše než o registraci zpětných volání, abyste mohli manipulovat s tím, co uživatel vidí.

Oddělení zájmů

jQuery využívá nenápadný JavaScript - chování (JavaScript) je odděleno od struktury (HTML).

AngularJS používá řadiče a direktivy (každý z nich může mít svůj vlastní řadič a/nebo kompilovat a propojovat funkce), aby odstranil chování z pohledu/struktury (HTML). Angular má také services a filtry , které pomáhají oddělit/uspořádat vaši aplikaci.

Viz také https://stackoverflow.com/a/14346528/215945

Návrh aplikace

Jeden přístup k návrhu aplikace AngularJS:

  1. Přemýšlejte o svých modelech. Pro tyto modely vytvořte služby nebo vlastní objekty JavaScriptu.
  2. Přemýšlejte o tom, jak chcete prezentovat své modely - své názory. Vytvářejte šablony HTML pro každé zobrazení pomocí nezbytných direktiv pro získání dynamické databáze.
  3. Připojte ke každému pohledu ovladač (pomocí funkce ng-view a směrování, nebo ng-řadiče). Měli by regulátory najít/získat pouze jakákoliv modelová data, která pohled potřebuje udělat. Udělejte regulátory co nejtenčí.

Prototypické dědictví

S jQuery můžete udělat hodně, aniž byste věděli, jak funguje JavaScriptové prototypové dědictví. Při vývoji aplikací AngularJS se vyhnete některým běžným nástrahám, pokud dobře rozumíte dědičnosti JavaScriptu. Doporučená četba: Jaké jsou nuance rozsahu prototypu/prototypického dědictví v AngularJS?

408
Mark Rajcok

AngularJS vs. jQuery

AngularJS a jQuery přijímají velmi odlišné ideologie. Pokud pocházíte z jQuery, můžete najít některé z překvapivých rozdílů. Angular může vás rozzlobit.

To je normální, měli byste Push through. Angular stojí za to.

Velký rozdíl (TLDR)

jQuery vám poskytuje sadu nástrojů pro výběr libovolných bitů DOM a provádění ad-hoc změn. Můžete udělat skoro cokoliv, co se vám líbí kus po kousku.

AngularJS místo toho dává kompilátor .

To znamená, že AngularJS čte celý váš DOM shora dolů a zachází s ním jako s kódem, doslovně jako s instrukcemi pro kompilátor. Jak to jde přes DOM, to hledá specifické direktivy (kompilátor direktivy) to říct AngularJS kompilátor jak se chovat a co dělat. Direktivy jsou malými objekty plnými JavaScriptu, které mohou odpovídat atributům, značkám, třídám nebo dokonce komentářům.

Když kompilátor Angular zjistí, že část DOM odpovídá konkrétní direktivě, volá funkci direktivy, předá ji elementu DOM, libovolným atributům, aktuálnímu rozsahu $ (což je lokální úložiště proměnných), a některé další užitečné bity. Tyto atributy mohou obsahovat výrazy, které mohou být interpretovány směrnicí a které říkají, jak se mají vykreslit, a kdy by se měly překreslit.

Direktivy pak mohou následně přitahovat další Angular komponenty, jako jsou regulátory, služby atd. Co je na dně kompilátoru, je plně vytvořená webová aplikace, zapojená a připravená ke spuštění.

To znamená, že Angular je řízeno šablonou . Vaše šablona řídí JavaScript, ne naopak. To je radikální obrácení rolí a úplný opak nenápadného JavaScriptu, který jsme psali posledních 10 let. To může trvat několik zvyknout.

Pokud to zní tak, že by to mohlo být příliš normativní a omezující, nic by nemohlo být dál od pravdy. Protože AngularJS zachází s HTML jako s kódem, dostanete granularitu na úrovni HTML ve vaší webové aplikaci . Všechno je možné a většina věcí je překvapivě jednoduchá, jakmile uděláte několik koncepčních skoků.

Pojďme se dostat na dusnou drť.

Nejprve, Angular nenahrazuje jQuery

Úhlové a jQuery dělají různé věci. AngularJS vám poskytuje sadu nástrojů pro tvorbu webových aplikací. jQuery poskytuje hlavně nástroje pro úpravu DOM. Pokud je na vaší stránce přítomen jQuery, aplikace AngularJS ji použije automaticky. Pokud tomu tak není, AngularJS je dodáván s jQuery Lite, což je výřez, ale stále dokonale použitelná verze jQuery.

Misko má rád jQuery a nemá proti vám námitky. Najdete však, jak si předem, že můžete získat téměř všechny své práce pomocí kombinace rozsahu, šablony a direktivy, a měli byste upřednostnit tento pracovní postup, kde je to možné, protože váš kód bude více diskrétní, více konfigurovatelné, a další Úhlové.

Pokud používáte jQuery, neměli byste ho kropit všude. Správné místo pro manipulaci s DOM v AngularJS je ve směrnici. Více o nich později.

Nenápadný JavaScript s voliči vs. deklarativní šablony

jQuery se typicky používá nenápadně. Váš JavaScript kód je propojen v záhlaví (nebo zápatí), a to je jediné místo, které je zmíněno. Používáme selektory pro výběr bitů stránky a zápis pluginů pro úpravu těchto částí.

JavaScript je pod kontrolou. HTML má naprosto nezávislou existenci. Vaše HTML zůstává sémantické i bez JavaScriptu. Atclick atributy jsou velmi špatné praxe.

Jedna z prvních věcí, které si všimnete o AngularJS je, že vlastní atributy jsou všude . Vaše HTML bude poseto ng atributy, které jsou v podstatě onClick atributy na steroidy. Jedná se o direktivy (direktivy kompilátoru) a jsou jedním z hlavních způsobů, jak je šablona závislá na modelu.

Když poprvé uvidíte, můžete být v pokušení napsat AngularJS off jako starobylé rušivé JavaScript (jako jsem to udělal na začátku). Ve skutečnosti, AngularJS nehraje podle těchto pravidel. V AngularJS je vaše HTML5 šablona. To je zkompilovaný AngularJS produkovat vaše webové stránky.

To je první velký rozdíl. Chcete-li jQuery, vaše webová stránka je DOM, s nímž chcete manipulovat. Pro AngularJS je váš HTML kód, který má být kompilován. AngularJS čte na celé webové stránce a doslova ji zkompiluje do nové webové stránky pomocí vestavěného kompilátoru.

Vaše šablona by měla být deklarativní; jeho význam by měl být jasný pouze čtením. Používáme vlastní atributy s významnými názvy. Vytváříme nové HTML elementy, opět s smysluplnými jmény. Návrhář s minimálními znalostmi HTML a žádnou dovedností kódování může číst vaši šablonu AngularJS a pochopit, co dělá. Může provádět úpravy. Toto je Angular cesta. _

Šablona je na sedadle řidiče.

Jednou z prvních otázek, na které jsem se ptal, když jsem začínal s AngularJS a běžel přes tutoriály, je "Kde je můj kód?" . Napsal jsem JavaScript, a přesto mám toto chování. Odpověď je zřejmá. Protože AngularJS kompiluje DOM, AngularJS zpracovává váš HTML jako kód. Pro mnoho jednoduchých případů stačí často napsat šablonu a nechat AngularJS zkompilovat ji do aplikace pro vás.

Vaše šablona řídí vaši aplikaci. Je to považováno za DSL . Zapisujete komponenty AngularJS a AngularJS se postará o jejich stažení a jejich zpřístupnění ve správný čas na základě struktury šablony. To je velmi odlišné od standardního MVC vzoru, kde je šablona pouze pro výstup.

To je více podobné XSLT než Ruby on Rails například.

Jedná se o radikální inverzi kontroly, která si některé zvykne.

Přestaňte se snažit řídit svou aplikaci z JavaScriptu. Nechte šablonu řídit aplikaci a nechte AngularJS postarat se o propojení komponentů dohromady. Toto je také cesta Angular.

Sémantické HTML vs. sémantické modely

S jQuery by vaše HTML stránka měla obsahovat sémantický smysluplný obsah. Pokud je JavaScript vypnut (uživatelem nebo vyhledávačem), váš obsah zůstane přístupný.

Protože AngularJS zachází s vaší HTML stránkou jako se šablonou. Šablona nemá být sémantická, protože váš obsah je obvykle uložen ve vašem modelu, který nakonec pochází z vašeho rozhraní API. AngularJS zkomplikuje váš DOM s modelem pro vytvoření sémantické webové stránky.

Váš zdroj HTML již není sémantický, místo toho vaše API a kompilovaný DOM jsou sémantické.

V AngularJS, což znamená, že život v modelu je, HTML je pouze šablona, ​​pouze pro zobrazení.

V tuto chvíli máte pravděpodobně všechny druhy otázek týkajících se SEO a přístupnosti, a správně. Jsou zde otevřené otázky. Většina čtenářů obrazovky bude nyní analyzovat JavaScript. Vyhledávače mohou také indexovat AJAXed content. Nicméně, budete chtít, aby se ujistil, že používáte pushstate URL a máte slušné sitemap. Diskuse k problému naleznete zde: https://stackoverflow.com/a/23245379/687677

Separace zájmů (SOC) vs. MVC

Oddělení zájmů (SOC) je vzor, ​​který vyrostl po mnoho let vývoje webu z různých důvodů, včetně SEO, dostupnosti a nekompatibility prohlížeče. Vypadá to takto:

  1. HTML - Sémantický význam. HTML by mělo stát samo.
  2. CSS - Styling, bez CSS stránky je stále čitelný.
  3. JavaScript - chování, bez skriptu obsah zůstane.

AngularJS opět nehraje podle svých pravidel. V mrtvici, AngularJS se zbaví dekády přijaté moudrosti a místo toho implementuje MVC vzor, ​​ve kterém šablona již není sémantická, ani trochu.

Vypadá to takto:

  1. Model - vaše modely obsahují vaše sémantická data. Modely jsou obvykle JSON objects. Modely existují jako atributy objektu nazvaného $ scope. Můžete také ukládat užitečné funkce nástroje na rozsah $, ke kterým mají vaše šablony přístup.
  2. Zobrazit - Vaše názory jsou napsány v HTML. Pohled není obvykle sémantický, protože vaše data žijí v modelu.
  3. Controller - Váš řadič je funkce JavaScriptu, která zavírá pohled na model. Jeho funkcí je inicializovat rozsah $. V závislosti na aplikaci můžete nebo nemusíte vytvořit řadič. Na stránce můžete mít mnoho řadičů.

MVC a SOC nejsou na opačných koncích stejné stupnice, jsou na zcela odlišných osách. SOC nemá smysl v kontextu AngularJS. Musíte na to zapomenout a jít dál.

Pokud jste stejně jako já prožili války s prohlížečem, můžete tento nápad považovat za docela urážlivý. Přestaň to, bude to za to, slibuji.

Pluginy vs. směrnice

Pluginy rozšiřují jQuery. Směrnice AngularJS rozšiřují možnosti vašeho prohlížeče.

V jQuery definujeme pluginy přidáním funkcí do jQuery.prototype. Pak je připojíme k DOMu výběrem prvků a voláním pluginu na výsledek. Cílem je rozšířit možnosti jQuery.

Pokud chcete například na své stránce karusel, můžete definovat neuspořádaný seznam obrázků, možná zabalený v prvku nav. Potom můžete napsat nějaký jQuery, abyste vybrali seznam na stránce a upravili jej jako galerii s časovými limity pro provedení posuvné animace.

V AngularJS definujeme směrnice. Direktiva je funkce, která vrací objekt JSON. Tento objekt říká AngularJS, jaké prvky DOM mají hledat, a jaké změny je třeba provést. Směrnice jsou připojeny k šabloně buď pomocí atributů nebo prvků, které si vymýšlíte. Cílem je rozšířit možnosti HTML o nové atributy a prvky.

AngularJS je způsob, jak rozšířit možnosti nativního pohledu HTML. Měli byste napsat HTML, které vypadá jako HTML, rozšířené o vlastní atributy a prvky.

Pokud chcete karusel, stačí použít prvek <carousel />, pak definovat direktivu, kterou chcete vytáhnout do šablony, a provést, aby tento výhonek fungoval.

Spousta malých směrnic vs. velké pluginy s konfiguračními přepínači

Tendence s jQuery je psát velké velké pluginy jako lightbox, které pak konfigurujeme předáním v mnoha hodnotách a možnostech.

To je chyba v AngularJS.

Vezměte příklad rozevíracího seznamu. Při psaní rozevíracího pluginu můžete být v pokušení kódovat obslužné rutiny pro klepnutí, snad funkci, kterou chcete přidat do chevronu, který je buď nahoru nebo dolů, možná změní třídu rozloženého prvku, zobrazí se skrýt menu, všechny užitečné věci.

Dokud nechcete udělat malou změnu.

Řekněme, že máte menu, které chcete rozvinout na vznášedle. Teď máme problém. Náš plugin je pro nás nainstalován v našem obslužném programu pro klikání, budeme muset přidat konfigurační možnost, aby se v tomto konkrétním případě chovala jinak.

V AngularJS píšeme menší směrnice. Naše směrnice by byla směšně malá. Může zachovat složený stav a poskytnout metody skládání (), rozkládání () nebo přepínání (). Tyto metody by jednoduše aktualizovaly $ scope.menu.visible, což je boolean holding state.

Nyní v naší šabloně můžeme to zaktivovat:

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

Potřebujete aktualizovat na mouseover?

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

Šablona pohání aplikaci, takže dostaneme granularitu na úrovni HTML. Chceme-li dělat výjimky případ od případu, šablona to usnadňuje.

Uzavření vs. $ scope

JQuery pluginy jsou vytvořeny v uzávěru. V rámci tohoto uzavření je zachováno soukromí. Záleží jen na vás, abyste v rámci tohoto uzavření zachovali řetěz vaší působnosti. Opravdu máte přístup k sadě uzlů DOM předaných do pluginu jQuery, plus všechny lokální proměnné definované v uzávěru a všechny globály, které jste definovali. To znamená, že pluginy jsou zcela samostatné. To je dobrá věc, ale při vytváření celé aplikace může být omezující. Pokus o předání dat mezi sekcemi dynamické stránky se stává fuškou.

AngularJS má objekty rozsahu $. Jedná se o speciální objekty vytvořené a udržované programem AngularJS, ve kterém uložíte svůj model. Určité direktivy budou spouštět nový $ obor, který standardně dědí z jeho zábalu $ obor pomocí JavaScriptového dědičného kódu. Objekt $ scope je přístupný v řadiči a pohledu.

Toto je chytrá část. Vzhledem k tomu, že struktura dědičnosti $ zhruba odpovídá struktuře DOM, prvky mají přístup k vlastnímu oboru a všechny obsahové oblasti bez problémů, až po globální rozsah $ (což není stejné jako globální rozsah).

To usnadňuje předávání dat a ukládání dat na odpovídající úrovni. Pokud je rozevírací seznam rozložen, musí o něm vědět pouze rozevírací seznam $. Pokud uživatel aktualizuje své předvolby, možná budete chtít aktualizovat globální obor působnosti a všechny vnořené rozsahy, které poslouchají předvolby uživatele, budou automaticky upozorněny.

To může znít složitě, ve skutečnosti, jakmile se do něj uvolníte, je to jako létání. Nemusíte vytvořit objekt rozsahu $, AngularJS vytvoří instanci a nakonfiguruje ji pro vás, správně a vhodně na základě hierarchie šablony. AngularJS pak zpřístupní vaši komponentu pomocí magie závislosti (více o tom později).

Manuální změny DOM vs.

V jQuery provedete všechny změny DOM ručně. Nové prvky DOM vytvoříte programově. Pokud máte pole JSON a chcete ho dát do DOM, musíte napsat funkci pro generování HTML a vložit jej.

V AngularJS to můžete udělat také, ale jste vyzváni, aby využívali datové vazby. Změňte svůj model, a protože DOM je vázán na něj prostřednictvím šablony váš DOM bude automaticky aktualizovat, bez nutnosti zásahu.

Vzhledem k tomu, že datová vazba je prováděna z šablony pomocí atributu nebo syntaxe složené závorky, je to velmi snadné. S tím je spojena malá kognitivní režie, takže si to děláte pořád.

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

Vloží vstupní prvek na $scope.user.name. Aktualizace vstupu aktualizuje hodnotu v aktuálním rozsahu a naopak.

Rovněž:

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

na výstupu uživatelské jméno v odstavci. Je to živá vazba, takže pokud je hodnota $scope.user.name aktualizována, šablona se také aktualizuje.

Ajax po celou dobu

V jQuery dělat volání Ajax je poměrně jednoduché, ale je to stále něco, co byste mohli myslet dvakrát. Je tu další složitost, o které je třeba přemýšlet, a spravedlivý kus skriptu, který se má udržet.

V AngularJS, Ajax je vaše výchozí go-to řešení a to se děje po celou dobu, téměř bez vědomí. Můžete přidat šablony s ng-include. Můžete použít šablonu s nejjednodušší vlastní směrnicí. Hovor Ajax můžete zabalit do služby a vytvořit si službu GitHub , nebo službu Flickr , ke které můžete přistupovat s úžasnou lehkostí.

Objekty služby versus pomocné funkce

Pokud chceme v jQuery dosáhnout malého úkolu, který není spojen s doménou, jako je například vytahování krmiva z rozhraní API, mohli bychom v našem uzavření napsat malou funkci. To je platné řešení, ale co když chceme k tomuto krmivu přistupovat často? Co když chceme tento kód znovu použít v jiné aplikaci?

AngularJS nám poskytuje servisní objekty.

Služby jsou jednoduché objekty, které obsahují funkce a data. Jsou to vždy singletony, což znamená, že nikdy nemůže být více než jeden z nich. Řekněme, že chceme přistupovat k rozhraní Stack Overflow API, můžeme napsat znak StackOverflowService, který definuje metody, jak toho dosáhnout.

Řekněme, že máme nákupní košík. Můžeme definovat ShoppingCartService, která udržuje náš košík a obsahuje metody pro přidávání a odstraňování položek. Protože služba je singleton a je sdílena všemi ostatními komponenty, jakýkoli objekt, který potřebuje zapsat do nákupního košíku a vytáhnout z něj data. Je to vždy stejný vozík.

Objekty služby jsou samostatné komponenty AngularJS, které můžeme použít a znovu použít, jak uznáme za vhodné. Jedná se o jednoduché objekty JSON obsahující funkce a Data. Jsou to vždy singletony, takže pokud ukládáte data o službě na jednom místě, můžete je získat někam jinam, stačí požádat o stejnou službu.

Závislostní injekce (DI) vs. Instatiation - aka de-spaghettification

AngularJS spravuje vaše závislosti. Pokud chcete objekt, jednoduše odkazovat na něj a AngularJS to pro vás.

Dokud to začnete používat, je těžké vysvětlit, co to je za masivní čas. V jQuery neexistuje nic jako AngularJS DI.

DI znamená, že místo psaní vaší aplikace a jejího propojení, místo toho definujete knihovnu komponent, z nichž každá je identifikována řetězcem.

Řekněme, že mám komponentu nazvanou 'FlickrService', která definuje metody pro stahování JSON kanálů z Flickr. Teď, když chci napsat regulátor, který může přistupovat k Flickr, musím se odkazovat na 'FlickrService' podle jména, když prohlašuji regulátor. AngularJS se postará o inicializaci komponenty a její zpřístupnění mému regulátoru.

Zde například definuji službu:

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

Teď, když chci tuto službu použít, odkazuji na ni podle jména takto:

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

AngularJS rozpozná, že objekt FlickrService je potřebný k instanci řadiče a poskytne nám jeden.

Díky tomu je propojení kabelů velmi snadné a do značné míry eliminuje tendenci ke spagetifikaci. Máme plochý seznam komponentů a AngularJS nám je podává jeden po druhém, když je potřebujeme.

Modulární architektura služeb

jQuery říká velmi málo o tom, jak byste měli svůj kód organizovat. AngularJS má své názory.

AngularJS poskytuje moduly, do kterých můžete umístit kód. Pokud píšete skript, který mluví například s Flickrem, můžete vytvořit modul Flickr, který zabalí všechny funkce související s Flickrem. Moduly mohou obsahovat další moduly (DI). Vaše hlavní aplikace je obvykle modul, a to by mělo zahrnovat všechny ostatní moduly, na kterých bude aplikace záviset.

Získáte jednoduché opětovné použití kódu, pokud chcete napsat jinou aplikaci založenou na Flickru, můžete jednoduše zahrnout modul Flickr a voila, máte přístup ke všem vašim funkcím souvisejícím s Flickr ve vaší nové aplikaci.

Moduly obsahují komponenty AngularJS. Když zahrnujeme modul, všechny komponenty v tomto modulu se nám stanou dostupnými jako jednoduchý seznam identifikovaný jejich jedinečnými řetězci . Tyto komponenty pak můžeme vstřikovat do sebe pomocí mechanismu vstřikování AngularJS.

Abych to shrnul

AngularJS a jQuery nejsou nepřátelé. Je možné použít jQuery uvnitř AngularJS velmi pěkně. Pokud používáte studnu AngularJS (šablony, vazby dat, rozsah $, direktivy atd.), Zjistíte, že potřebujete lot less jQuery, než byste jinak potřebovali.

Hlavní věc, kterou si uvědomit, je, že vaše šablona řídí vaši aplikaci. Přestaň se psát velké pluginy, které dělají všechno. Místo toho napište malé direktivy, které dělají jednu věc, pak napište jednoduchou šablonu, která je spojí dohromady.

Přemýšlejte méně o nenápadném JavaScriptu a namísto toho uvažujte z hlediska rozšíření HTML.

Moje malá kniha

Jsem tak nadšený AngularJS, napsal jsem krátkou knihu o tom, že jste velmi vítáni číst online http://nicholasjohnson.com/angular-book/ . Doufám, že je to užitečné.

184
superluminary

Můžete popsat změnu paradigmatu, která je nezbytná?

Imperativní vs deklarativní

S jQuery řeknete DOMu, co se musí stát, krok za krokem. SANGULARJSpopíšete, jaké výsledky chcete, ale ne jak to udělat. Více o tomto zde . Podívejte se také na odpověď Marka Rajcoka.

Jak mohu architekturovat a navrhovat webové aplikace na straně klienta odlišně?

AngularJS je celý rámec na straně klienta, který používá vzor MVC (podívejte se na jejich grafické znázornění ). Velmi se zaměřuje na oddělení zájmů.

Jaký je největší rozdíl? Co bych měl přestat dělat/používat; co mám dělat/používat místo toho?

jQuery je knihovna

AngularJS je krásný rámec na straně klienta, vysoce testovatelný, který kombinuje tuny skvělých věcí, jako je MVC, závislost injekce , vazba dat a mnoho dalšího.

Zaměřuje se na oddělení zájmů a testování ( unit testing a end-to-end testování), což usnadňuje vývoj řízený testem.

Nejlepší způsob, jak začít, je projít jejich skvělý návod . Kroky můžete projít za pár hodin; v případě, že chcete zvládnout koncepty v zákulisí, zahrnují nesčetné množství odkazů pro další čtení.

Existují nějaké aspekty/omezení na straně serveru?

Můžete ji použít na existujících aplikacích, kde již používáte čistý jQuery. Pokud však chcete plně využít funkcí AngularJS, můžete zvážit kódování na straně serveru pomocí přístupu RESTful .

To vám umožní využít jejich továrna na zdroje , což vytvoří abstrakci na straně serveru RESTful API a provede volání na straně serveru (získat, uložit, odstranit atd.) ) neuvěřitelně snadné.

152
Ulises

Abych popsal „posun paradigmatu“, myslím, že stačí krátká odpověď.

AngularJS mění způsob, jakým jste find elementy

V jQuery , obvykle používáte selectors k vyhledání prvků a pak je zapnete:
$('#id .class').click(doStuff);

V AngularJS , použijete direktivy k přímému označení prvků.
<a ng-click="doStuff()">

AngularJS nepotřebuje (nebo nechce), abyste hledali elementy pomocí selektorů - primární rozdíl mezi AngularJS jqLite versus full-blown jQuery je to jqLite nepodporuje selektory .

Takže když lidé říkají "nezahrnují jQuery vůbec", je to hlavně proto, že nechtějí, abyste používali selektory; chtějí, abyste se místo toho naučili používat směrnice. Přímo, nevybírej!

84
Scott Rippey

jQuery

jQuery dělá směšně dlouhé JavaScript příkazy jako getElementByHerpDerp kratší a cross-browser.

AngularJS

AngularJS umožňuje vytvářet vlastní HTML tagy/atributy, které dělají věci, které fungují dobře s dynamickými webovými aplikacemi (protože HTML bylo navrženo pro statické stránky).

Upravit:

Říká se: "Mám jQuery pozadí, jak si myslím v AngularJS?" je jako říkat "Mám HTML pozadí, jak si myslím v JavaScriptu?" Skutečnost, že se ptáte na otázku, ukazuje, že nejspíš nerozumíte základním cílům těchto dvou zdrojů. To je důvod, proč jsem se rozhodl odpovědět na otázku pouhým poukazem na zásadní rozdíl, spíše než procházením seznamu, který říká: "AngularJS využívá direktivy, zatímco jQuery používá CSS selectory, aby vytvořil objekt jQuery, který to dělá a to atd." . Tato otázka nevyžaduje zdlouhavou odpověď.

jQuery je způsob, jak usnadnit programování JavaScriptu v prohlížeči. Kratší příkazy typu cross-browser atd.

AngularJS rozšiřuje HTML, takže nemusíte vkládat <div> všude tam, kde chcete vytvořit aplikaci. To dělá HTML vlastně pracovat pro aplikace, spíše než to, co bylo navrženo, což je statické, vzdělávací webové stránky. Toho se dosahuje kruhovým způsobem pomocí JavaScriptu, ale v zásadě jde o rozšíření HTML, nikoli JavaScriptu.

69
Nick Manning

jQuery: hodně přemýšlíte o „QUERYing DOM “ pro prvky DOM a děláte něco.

AngularJS: Model je pravda a vždycky si myslíte, že z toho ANGLE.

Když například získáváte data ze serveru, který chcete zobrazit v nějakém formátu v DOM, v jQuery, musíte '1. Hledejte 'kde v DOM chcete umístit tato data,' 2. UPDATE/APPEND 'tam vytvořením nového uzlu nebo jen nastavením jeho innerHTML . Pak, když chcete toto zobrazení aktualizovat, pak '3. NALEZNETE 'místo a' 4. AKTUALIZACE'. Tento cyklus hledání a aktualizace všeho provedeného ve stejném kontextu získávání a formátování dat ze serveru je pryč v AngularJS.

S AngularJS máte svůj model (objekty JavaScriptu, na který jste již zvyklí) a hodnota modelu vám řekne o modelu (samozřejmě) ao pohledu a operace na modelu se automaticky šíří do pohledu, takže si ho nenecháte Nemusíte o tom přemýšlet. Ocitnete se v AngularJS a nebudete v DOM najít věci.

Jinak řečeno, v jQuery potřebujete přemýšlet o CSS selektorech, tj. Kde je div nebo td, která má třídu nebo atribut atd., Takže můžu získat jejich HTML nebo barvu nebo hodnotu, ale v AngularJS, ocitnete se takhle: jaký model mám co do činění, nastavím hodnotu modelu na hodnotu true. Neobtěžujete se, zda je zobrazení odrážející tuto hodnotu zaškrtnuté políčko nebo zda je umístěno v prvku td (podrobnosti, které byste často potřebovali přemýšlet v jQuery).

A s DOM manipulací v AngularJS, ocitnete se přidávání direktivy a filtry, které si můžete představit jako platné rozšíření HTML.

Ještě jedna věc, kterou zažijete v AngularJS: v jQuery hodně nazýváte funkce jQuery, v AngularJS bude AngularJS volat vaše funkce, takže AngularJS vám řekne, jak dělat věci, ale výhody stojí za to. obvykle znamená naučit se, co chce AngularJS, nebo způsob, jakým AngularJS vyžaduje, aby jste prezentovali své funkce, a bude to odpovídat. To je jedna z věcí, která dělá z AngularJS spíše rámec než knihovnu.

61
Samuel

To jsou některé velmi pěkné, ale zdlouhavé odpovědi.

Chcete-li shrnout své zkušenosti:

  1. Ovladače a poskytovatele (služby, továrny atd.) Slouží k úpravě datového modelu, nikoli HTML.
  2. HTML a direktivy definují rozvržení a vazbu k modelu.
  3. Pokud potřebujete sdílet data mezi řadiči, vytvořit službu nebo továrnu - jedná se o singletony, které jsou sdíleny v rámci aplikace.
  4. Pokud potřebujete HTML widget, vytvořte direktivu.
  5. Pokud máte nějaká data a nyní se snažíte aktualizovat HTML ... STOP! aktualizujte model a ujistěte se, že HTML je vázáno na model.
46
Dan

jQuery je DOM manipulační knihovna.

AngularJS je rámec MV *.

Ve skutečnosti, AngularJS je jeden z nemnoho JavaScript MV * frameworks (mnoho JavaScript MVC nástroje ještě spadají do kategorie knihovna).

Být rámec, je hostitelem vašeho kódu a bere vlastnictví rozhodnutí o tom, co volat a kdy!

AngularJS sám obsahuje jQuery-lite vydání uvnitř toho. Takže pro některý základní výběr DOM/manipulaci opravdu nemusíte zahrnout knihovnu jQuery (ušetří mnoho bajtů v síti.)

AngularJS má koncept „směrnic“ pro manipulaci s DOM a navrhování opakovaně použitelných komponent uživatelského rozhraní, takže byste jej měli používat vždy, když budete cítit potřebu dělat věci související s manipulací DOM (direktivy jsou pouze místem, kde byste měli používat kód jQuery při použití AngularJS).

AngularJS zahrnuje určitou křivku učení (více než jQuery :-).

-> Pro všechny vývojáře pocházející z jQuery pozadí, moje první rada by byla "naučit JavaScript jako jazyk první třídy před skokem na bohatý rámec, jako je AngularJS!" Naučil jsem se výše uvedenou skutečnost tvrdě.

Hodně štěstí.

45
Sutikshan Dubey

Jsou to jablka a pomeranče. Nechcete je porovnávat. Jsou to dvě různé věci. AngularJs má již jQuery lite vestavěný, který vám umožní provádět základní DOM manipulaci, aniž by dokonce včetně plné foukané verze jQuery.

jQuery je o DOM manipulaci. Řeší všechny cross prohlížeč bolesti jinak budete muset vypořádat, ale není to rámec, který vám umožní rozdělit aplikaci do složek, jako je AngularJS.

Pěkná věc, o AngularJs je, že vám umožní oddělit/izolovat DOM manipulace ve směrnicích. Jsou zde vestavěné direktivy připravené k použití, jako je např. Ng-click. Můžete si vytvořit vlastní vlastní direktivy, které budou obsahovat všechny vaše logiky zobrazení nebo manipulaci s DOM, takže neskončíte s kódem manipulace DOM v řadičích nebo službách, které by se měly starat o obchodní logiku.

Úhlové rozdělení vaší aplikace do - Řadiče - Služby - Zobrazení - atd.

a je tu ještě jedna věc, to je směrnice. Je to atribut, který můžete připojit k libovolnému prvku DOM, a můžete v něm skočit bez jQuery, aniž byste se museli starat o to, že vaše jQuery se kdy střetává se součástmi AngularJs nebo s jeho architekturou.

Slyšela jsem ze schůzky, kterou jsem navštívila, jeden ze zakladatelů Angularřekl, že tvrdě pracovali, aby oddělili manipulaci s DOM, takže se je nepokoušejte zahrnout zpět.

34
Jin

Poslechněte si podcast JavaScript Jabber: Episode # 32, který obsahuje původní tvůrce AngularJS: Misko Hevery & Igor Minar. Mluví hodně o tom, co to je, že přijít do AngularJS z jiných JavaScript pozadí, zejména jQuery.

Jedním z bodů podcastu bylo, že se na mě s ohledem na vaši otázku kliklo:

MISKO: [...] jedna z věcí, o které jsme přemýšleli jen stěží v Angular je, jak poskytujeme spoustu únikových poklopů, takže se můžete dostat ven a v podstatě vymyslet cestu ven z toho. Odpověď na nás je takzvaná „směrnice“. A se směrnicemi se v podstatě stáváte pravidelným malým JavaScriptem, můžete dělat, co chcete.

IGOR: Takže si představte směrnici jako instrukci pro kompilátor, který to řekne vždy, když narazíte na tento prvek nebo tento CSS v šabloně a tento kód si ponecháte a tento kód je v pořádku prvku a vše pod tímto prvkem ve stromu DOM.

Přepis celé epizody je k dispozici na výše uvedeném odkazu.

Chcete-li tedy přímo odpovědět na svou otázku: AngularJS je -vlastní a je skutečným rámcem MV *. Nicméně, můžete stále dělat všechny opravdu cool věci, které znáte a milovat s jQuery uvnitř směrnic. Není to otázka "Jak mám dělat to, co jsem používal v jQuery?" stejně jako je to otázka "Jak doplním AngularJS o všechny věci, které jsem používal v jQuery?"

Je to opravdu dva velmi odlišné stavy mysli.

31
codevinsky

Tuto otázku považuji za zajímavou, protože moje první vážná expozice programování JavaScriptu byla Node.js a AngularJS. Nikdy jsem se neučil jQuery, a myslím, že je to dobrá věc, protože nemusím nic odnaučit. Ve skutečnosti jsem se aktivně vyhnout jQuery řešení mých problémů, a místo toho, jen hledat "AngularJS způsobem" k jejich řešení. Takže myslím, že moje odpověď na tuto otázku by se v podstatě zredukovala na „myslet jako na někoho, kdo se nikdy neučil jQuery“ a vyhnout se jakémukoli pokušení přímo zahrnout jQuery (zjevně AngularJS to používá do určité míry za scénou).

30
Evan Zamir

AngularJS a jQuery:

AngularJs a JQuery jsou na každé úrovni zcela jiné než funkce JQLite a uvidíte, jakmile se začnete učit základní funkce AngularJs (vysvětlil jsem to níže).

AngularJs je rámec na straně klienta, který nabízí sestavení aplikace nezávislé na straně klienta. JQuery je knihovna na straně klienta, která hraje kolem DOM.

AngularJs Cool Princip - Pokud chcete, aby některé změny na vašem uživatelském rozhraní byly z pohledu změny dat modelu. Změňte data a uživatelské rozhraní se znovu vykreslí. Nemusíte hrát po DOM pokaždé, pokud a dokud to není sotva vyžadováno a to by mělo být také zpracováno pomocí Angular směrnic.

Chcete-li odpovědět na tuto otázku, chci se podělit o své zkušenosti s první podnikovou aplikací s AngularJS. To jsou ty nejúžasnější funkce, které Angular poskytují, kde začneme měnit náš způsob myšlení a dostaneme Angular jako rámec a ne knihovnu.

Obousměrná datová vazba je úžasná: Měl jsem mřížku se všemi funkcemi UPDATE, DELTE, INSERT. Mám datový objekt, který váže model mřížky pomocí ng-repeat. Stačí jen jeden řádek jednoduchého JavaScript kódu pro smazání a vložení a to je vše. mřížka se automaticky aktualizuje, jakmile se model mřížky okamžitě změní. Funkce aktualizace je v reálném čase, není pro ni žádný kód. Cítíte se úžasně !!!

Opětovně použitelné direktivy jsou super: Zapsat direktivy na jednom místě a použít je v celé aplikaci. PRO BOHA!!! Použil jsem tyto směrnice pro paging, regex, validace, atd. Je to opravdu cool!

Směrování je silné: Je to jen na vaší implementaci, jak jej chcete použít, ale vyžaduje jen velmi málo řádků kódu pro směrování požadavku na specifikaci HTML a řadiče (JavaScript)

Řadiče jsou skvělé: Řadiče se postarají o vlastní HTML, ale toto oddělení funguje dobře i pro běžné funkce. Chcete-li zavolat stejnou funkci po kliknutí na tlačítko na hlavním kódu HTML, stačí v každém ovladači napsat stejný název funkce a napsat individuální kód.

Pluginy: Existuje mnoho dalších podobných funkcí, jako je zobrazení překrytí ve vaší aplikaci. Nemusíte pro to psát kód, stačí použít překryvný plugin dostupný jako wc-overlay, a to se automaticky postará o všechny XMLHttpRequest (XHR) požadavky.

Ideální pro RESTful architektura: Být kompletním frameworkem činí AngularJS skvělou pro práci s architekturou RESTful. Chcete-li volat REST CRUD API je velmi snadné a

Služby : Zapsat společné kódy pomocí služeb a méně kódů v řadičích. Služby mohou být použity ke sdílení společných funkcí mezi řadiči.

Rozšiřitelnost : Angular rozšířila direktivy HTML pomocí hranatých směrnic. Zapište výrazy do html a vyhodnoťte je za běhu. Vytvořte si vlastní direktivy a služby a využijte je v jiném projektu bez dalšího úsilí.

23
Sanjeev Singh

Vlastně, pokud používáte AngularJS, už nepotřebujete jQuery. AngularJS sám má závazek a směrnici, což je velmi dobrá "náhrada" pro většinu věcí, které můžete dělat s jQuery.

Obvykle vyvíjím mobilní aplikace pomocí AngularJS a Cordova . JEN věc od jQuery, kterou jsem potřeboval, je Selector.

Podle googlingu vidím, že je tam samostatný modul jQuery selector. Je to Sizzle.

A já jsem se rozhodl udělat malý úryvek kódu, který mi pomůže rychle spustit web pomocí AngularJS se silou jQuery Selector (pomocí Sizzle).

Zde jsem sdílel (a) svůj kód: https://github.com/huytd/Sizzular

12
Huy Tran