"Pag-iisip sa AngularJS", kung mayroon akong isang jQuery background?

Ipagpalagay na pamilyar ako sa pagbubuo ng mga aplikasyon ng client sa jQuery , ngunit ngayon nais kong simulan ang paggamit ng AngularJS . Maaari mong ilarawan ang shift ng paradigm na kinakai>

  • Paano ako lilikha at gumawa ng mga kliyente ng mga web application nang iba? Ano ang pagkakaiba?
  • Ano ang dapat kong ihinto ang paggawa / paggamit; Ano ang dapat kong simulan ang paggawa / paggamit sa halip?
  • Mayroon bang mga pagsasaa>

Hindi ako naghahanap ng isang detalyadong paghahambing sa pagitan ng jQuery at AngularJS .

4523
21 февр. itinakda ni Mark Rajcok noong Pebrero 21 2013-02-21 07:09 '13 sa 7:09 2013-02-21 07:09
@ 15 mga sagot

1. Huwag lilikha ng iyong pahina, at pagkatapos ay baguhin ito gamit ang DOM manipulation

Sa jQuery, lumikha ka ng isang pahina at pagkatapos ay lumikha ng dynamic na ito. Ito ay dahil sa ang katunayan na ang jQuery ay dinisenyo upang lumago at ay lumago hindi kapani-paniwala sa labas ng ito simpleng premise.

Ngunit sa AngularJS kai>

2. Huwag dagdagan ang jQuery sa AngularJS

Gayundin, huwag magsimula sa ideya na ang jQuery ay X, Y, at Z, kaya kakai>

Nakakita ako ng maraming mga developer dito at sa mailing list lumikha ng mga komplikadong solusyon na may mga jQuery plugin ng 150 o 200 mga linya ng code na pagkatapos ay nakadikit sa AngularJS na may isang hanay ng mga callbacks at $apply na lituhin at lituhin; ngunit sa katapusan nagtatrabaho sila! Ang problema ay na sa karamihan ng mga kaso, kapag ang jQuery plugin ay maaaring rewritten sa AngularJS sa isang code snippet, kung saan ang lahat ng isang biglaang bagay ay nagiging malinaw at maliwanag.

Ang ilalim na linya ay ang: kapag paglutas ng isang problema, unang "tingin sa AngularJS"; kung hindi ka maaaring magkaroon ng isang solusyon, magtanong sa komunidad; kung pagkatapos ng lahat ng ito ay wa>

3. Palaging mag-isip sa mga tuntunin ng arkitektura.

Ito ay unang kilala na ang isang pahina ng mga application ay mga application. Hindi ito isang web page. Samakatuwid, kai>

Kaya paano mo ito ginagawa? Ano sa palagay mo sa AngularJS? Narito ang i>

Ang pagsusumite ay ang "opisyal na rekord"

Sa jQuery, binabago namin ng programming ang view. Maaari naming magkaroon ng isang drop-down na menu na may label na ul bi>

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

Sa jQuery, sa aming lohika sa aplikasyon, i-activate namin ito sa isang bagay tulad ng:

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

Ang dalawang ito ay pareho, subalit sa bersyon ng AngularJS, alam ng sinuman na tumitingin sa template kung ano ang kai>dropdownMenu direktiba ay nasa lugar; hindi niya kai>

Ang mga nag-develop na bago sa AngularJS ay kadalasang nagtatanong kung paano hanapin ang lahat ng mga link ng isang partikular na uri at magdagdag ng mga direktiba sa kanila. Ang developer ay palaging masindak kapag sumagot kami: hindi mo. Ngunit ang dahilan kung bakit hindi mo ginagawa ito ay na ito ay tulad ng kalahating-jQuery, kalahating-AngularJS at wa>

Tandaan: huwag gumawa, at pagkatapos ay markahan. Kai>

Ang umiiral na data

Ito ay talagang isa sa mga pinaka-kamangha-manghang mga tampok ng AngularJS, at pinutol ang isang pulutong ng mga pangangai>

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

Bi>

Ito ay isang maliit na makalat at isang maliit na lasa babasagin. Ngunit sa AngularJS maaari naming gawin ito:

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

Ngunit sa bagay na ito, ang aming pagtingin ay maaaring ganito:

paghihiwalay ng mga problema at nagbibigay ng mas malaking posibilidad ng pagpapatunay.  Ang iba pang tugon ay binanggit sa puntong ito, kaya't iiwan ko >

Paghihiwalay ng mga problema

At ang lahat ng nasa itaas ay nag-uugnay sa kumplikadong paksa: itabi ang iyong mga problema. Ang iyong opinyon ay nagsisilbi bi>

Paganahin ang mga dependency

Upang tulungan kami sa paghihiwalay ng mga problema, dependency injection (DI). Kung gumagamit ka ng isang server-side na wika (mula sa Java hanggang PHP ), malamang na pamilyar ka sa konsepto na ito, ngunit kung ikaw ay isang jQuery client guy, ang konsepto na ito ay maaaring mukhang tulad ng isang bagay mula sa ulok sa hindi kinakai>

Mula sa isang malawak na pananaw, ang DI ay nangangahulugan na ikaw ay malayang magdeklara ng mga bahagi, at pagkatapos ay mula sa anumang iba pang bahagi, humingi lamang ng kopya nito, at ipagkakaloob ito. Hindi mo kai>

Sabihin nating, sa aming aplikasyon, kai>REST API at, depende sa estado ng application, ang imbakan ay lokal din. Kapag nagsasagawa ng mga pagsubok sa aming mga controllers, ayaw naming makipag-ugnay sa server - sinusubukan pa rin namin ang controller. Maaari lamang namin magdagdag ng isang layout ng serbisyo na may parehong pangalan bi>

Pagsasalita ng mga pagsubok ...

4. Pagsubok-batay sa pag-unlad - laging

Talagang bahagi ito ng seksyon 3 sa arkitektura, ngunit napakahalaga na inilagay ko ito sa sarili kong seksyon ng top-level.

Sa lahat ng maraming mga plugin ng jQuery na iyong nakita, ginamit o sinulat, gaano karaming ng mga ito ang may kasamang test suite? Hindi masyadong magkano, dahil jQuery ay hindi masyadong pumayag na ito. Ngunit ang AngularJS ay.

Sa jQuery, ang tanging paraan upang subukan ay upang lumikha ng isang sangkap nang nakapag-iisa na may pahina ng sample / demo, kung saan ang aming mga pagsusulit ay maaaring magsagawa ng DOM manipulations. Kaya, kai>

Ngunit dahil mayroon kaming isang paghihiwalay ng mga problema, maaari naming gawin ang pagsubok pag-unlad iteratively sa AngularJS! Halimbawa, sabihin nating gusto natin ang isang diretsimple directive upang ipahiwatig sa aming menu kung ano ang kasalukuyang ruta natin. Maaari naming sabihin kung ano ang gusto namin mula sa punto ng view ng aming application:

 

Buweno, ngayon maaari naming magsulat ng isang pagsubok para sa wala sa panahong when-active direktiba:

 

At kapag tumakbo kami sa aming pagsubok, maaari naming kumpirmahin na nabigo ito. Lamang ngayon kai>

Mayroong i>

  • Una, hindi kinakai>
  • Pangalawa, kahit na mayroon na kami jQuery sa aming pahina, wa>angular.element , at ang aming bahagi ay gagana pa rin kapag nakakuha ka ng isang proyekto na wa>
  • Ikatlo, kahit na ito ay ipinapalagay na ang direktiba na ito ay nangangai>angular.element ) ay laging gumamit ng jQuery kung na-load na! Kaya hindi namin kai>$ - maaari lamang naming gamitin ang angular.element .
  • Ang pang-apat, malapit na nauugnay sa ikatlo, ay ang mga elemento ng jqLite ay hindi dapat balot sa $ - ang element na ipinasa sa function ng link ay magiging isang jQuery na sangkap!
  • At ikalima, na binanggit natin sa nakaraang mga seksyon, bakit natin pinaghahalo ang materyal na template sa ating lohika?

Ang direktiba na ito ay maaaring rewritten (kahit na para sa mga napaka-komplikadong mga kaso!) Mas madaling:

7185
22 февр. Sagot na ibinigay ni Josh David Miller Peb 22 2013-02-22 00:26 '13 sa 0:26 2013-02-22 00:26

Imperative → declarative

Sa jQuery, isang tagapili ay ginagamit upang hanapin ang DOM , at pagkatapos ay isailalim / irehistro ang mga handler ng kaganapan. Kapag ang isang kaganapan ay na-trigger, ito (kinakai>

Sa AngularJS, gusto mong mag-isip tungkol sa mga pagtingin , hindi tungkol sa mga elemento ng DOM. Ang mga representasyon ng HTML (declarative) na naglalaman ng mga direktiba ng AngularJS . Ang mga direktiba ay nag-set up ng mga event handler sa likod ng mga eksena para sa amin at bigyan kami ng mga dynamic na data na may bisa. Ang mga tagapili ay bihirang ginagamit, kaya ang pangangai>modelo (sa pamamagitan ng mga lugar). Ang mga panonood ay isang projection ng isang modelo. Mga modelo para sa pagpapalit ng mga kaganapan (hal. Data, mga pag-aari ng rehiyon) at mga tanawin na nagdidisenyo ng mga modelong ito "awtomatikong."

Sa AngularJS, isipin ang tungkol sa mga modelo, hindi ang mga jQuery na napiling mga elemento ng DOM na naglalaman ng iyong data. Isipin ang mga ideya bi>

Paghihiwalay ng mga problema

Ang jQuery ay gumagamit ng mahinhin na JavaScript - ang pag-uugali (JavaScript) ay pinaghihiwalay mula sa istraktura (HTML).

Gumagamit ang AngularJS ng mga controllers at directives (bawat isa ay maaaring magkaroon ng sarili nitong controller at / o mag-compile at mag-link ng mga pag-andar) upang alisin ang pag-uugali mula sa view / structure (HTML). Angular din ay may mga serbisyo at filter upang makatulong sa split / ayusin ang iyong application.

border=0

Tingnan din lifetop.pw.site/questions/511 / ...

Disenyo ng application

Isang diskarte sa pagbuo ng isang AngularJS application:

  • Isipin ang iyong mga modelo. Gumawa ng mga serbisyo o iyong sariling mga JavaScript na mga bagay para sa mga modelong ito.
  • Isipin kung paano mo gustong ipakita ang iyong mga modelo - ang iyong mga pananaw. Lumikha ng mga template ng HTML para sa bawat pagtatanghal, gamit ang mga kinakai>
  • Maglakip ng isang controller sa bawat pagtingin (gamit ng-view at routing o ng-controller). Tanungin ang dispatcher upang mahanap / kunin lamang ang anumang data ng modelo na dapat gawin ng mga pagtingin. Gawin ang mga controllers bi>

Prototype na mana

Magagawa mo nang maraming gamit ang jQuery nang hindi nalalaman kung paano gumagana ang prototype JavaScript inheritance. Kapag ang pagbubuo ng mga application ng AngularJS, maiiwasan mo ang i>Ano ang mga nuances ng prototype / prototype na dami ng mana sa AngularJS?

408
21 февр. Sumagot na ibinigay ni Mark Rajcok Pebrero 21. 2013-02-21 07:09 '13 sa 7:09 2013-02-21 07:09

AngularJS vs. jQuery