"JQuery fonunda varsa" "AngularJS düşünün"?

JQuery-də müştəri proqramlarının inkişafı ilə tanış olduğumu düşünsəniz, indi mən AngularJS- dən istifadə etmək istərdim. Lazım olan paradiqma dəyişikliyini təsvir edə bilərsinizmi? Cavabın hazırlanmasına kömək edə biləcək bir neçə sual var:

  • Müxtəlif müştəri proqramlarını necə yarada və yaratmaq olar? Fərq nədir?
  • Nə etməliyəm / istifadə etməməliyəm; Bunun əvəzinə nə etməliyəm?
  • Hər hansı bir server tərəfinin mülahizələri / məhdudiyyətləri varmı?

Mən jQueryAngularJS arasında ətraflı bir müqayisə axtarıram.

4523
21 февр. Mark Rajcok tərəfindən 21 Fevralda təyin olundu 2013-02-21 07:09 '13 at 07:09 2013-02-21 07:09
@ 15 cavab

1. Sayfanızı yaratmayın və sonra DOM manipulasyonunu istifadə edərək dəyişdirin

JQuery-də bir səhifə yaradın və sonra dinamik olaraq yaradın. Bu, jQuery böyümək üçün nəzərdə tutulmuşdur və bu sadə mənbədən inanılmaz dərəcədə böyüdülmüşdür.

Ancaq AngularJS-də siz memarlığı nəzərə alaraq sıfırdan başlamaq lazımdır. "DOM-un bu parçası var və bunu etmək istəmirəm", "X" etməli olduğunuzu düşünmək əvəzinə, istədiyinizlə başlasın və tətbiqinizi inkişaf etdirməyə başlayın və sonra nəhayət inkişaf etməyə başlayın təqdimatınız.

2. AngularJS ilə jQuery artırmayın

Eynilə, jQuery X, Y və Z olduğunu düşünmədən başlamırsınız, buna görə yalnız modelləri və nəzarətçiləri üçün buraya AngularJS əlavə edəcəyəm. Yalnız başlamış olduğunuzda həqiqətən cazibədardır, buna görə də həmişə yeni AngularJS proqramçılarının jQuery-i heç istifadə etməmələrini, ən azı onlar "Açar şəkildə" nə istifadə etdiyinə qədər istifadə etməyini məsləhət görürəm.

Buradakı bir çox inkişafçıyı gördüm və poçt siyahısında, bu kompleks həllər, 150 və ya 200 kod satırlı jQuery plaginləri ilə birlikdə, birbaşa ardıcıllıqla birləşdirilmiş AngularJS-də yapışdırılan və $apply edənləri qarışdırmaq və çaşdırmaq üçün $apply olunan kodlar yaradır; amma sonunda işləyirlər! Məsələ ondadır ki, əksər hallarda, jQuery plugin birbaşa hər şey aydın və başa düşüləcək bir kod snippetində AngularJS-də yenidən yazıla bilər.

Aşağıdakı xətt isə: problemin həlli zamanı ilk növbədə "AngularJS düşünün"; Əgər bir həll yola gəlməsə, cəmiyyətdən soruşun; Bütün bunlardan sonra heç bir sadə həll yoxdur, onda jQuery ilə əlaqə saxlaya bilərsiniz. Amma jQuery-nin bir qolu halına gəlməsinə icazə verməyin, ya da heç vaxt AngularJS-yə sahib olma.

3. Həmişə memarlıq baxımından düşünün.

Bir səhifəli tətbiqlərin tətbiq olduğu bilinir. Bu veb səhifə deyil. Buna görə, bir server tərəfdarı kimi düşünmək və bir müştəri geliştiricisi kimi düşünməməliyik. Uygulamamızı ayrı, genişletilebilir, test edilebilen bileşenlere nasıl bölmek lazım olduğunu düşünmemiz lazımdır.

Beləliklə bunu necə edirsiniz? AngularJS-də nə düşünürsünüz? JQuery'den fərqli olaraq, bəzi ümumi prinsiplər.

Təqdimat "rəsmi qeyd"

JQuery-də, biz proqram baxımından dəyişdiririk. Ula etiketli bir açılan menəyə sahib ola bilərsiniz:

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> 

JQuery'de tətbiq məntiqimizdə biz onu aşağıdakı kimi bir şey ilə aktivləşdirəcəyik:

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

Bu ikisi eyni, ancaq AngularJS versiyasında şablona baxan hər kəs nə baş verdiyini bilir. Tərəqqi heyətinin yeni bir üzvü boarda gəldiyi zaman, ona baxa bilir və sonra dropdownMenu direktivinin yerində olduğunu bilir; düzgün cavab vermək və ya hər hansı bir koddan keçmək lazım deyil. Nə baş verəcəyini bir gözlə izah etdi. Çox təmiz.

AngularJS-yə yeni olan developers tez-tez müəyyən bir növün bütün əlaqələrini tapmaq və onlara direktivlər əlavə etmək üçün soruşurlar. Cavab olduğumuz zaman developer həmişə təəccüblənir: bunu etməyin. Amma bunu etməyinizin səbəbi yarım jQuery, yarı burularJS və yaxşı bir şey deyil. Buradaki problem, geliştiricinin AngularJS kontekstinde "jQuery'i yürütmeye" çalışıyor olmasıdır. Heç vaxt yaxşı işləməyəcək. Təqdimat rəsmi girişdir. Direktivin xaricində (daha aşağıda bu haqda daha çox) DOM-i heç vaxt dəyişmirsiniz. Təqdimatda direktivlər tətbiq olunur, buna görə niyyət aydındır.

Unutmayın: yaradın və sonra qeyd edin. Memarı və sonra dizaynınız var.

Data məcburi

Bu, mütləq AngularJS-in ən incə xüsusiyyətlərindən biridir və əvvəlki hissədə göstərilən DOM manipulyasiyalarının növlərini yerinə yetirmək üçün çox ehtiyacları aradan qaldırır. AngularJS, təqdimatınızı avtomatik olaraq yeniləyir, belə ki, sizə lazım deyil! JQuery'de biz hadisələrə cavab veririk və sonra məzmunu yeniləyirik. Kimi bir şey:

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

Qarışıqlıq problemlərindən əlavə, biz əvvəllər də qeyd etdiyimiz niyyətləri ifadə edən eyni problemlərə də sahibik. Amma daha önəmlisi, DOM node əl ilə çağırmaq və yeniləmək idi. Və bir günlük girişini silmək istəsəniz, DOM kodunu da kopyalayalım. Məntiqi DOM-dan ayrı olaraq necə test edirik? Və təqdimatı dəyişdirmək istəyiriksə?

Bir az dağınık və hiyləgər bir kövrək. Ancaq AngularJS-də bunu edə bilərik:

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

Ancaq bu mövzuda fikirlərimiz belə ola bilər:

, problemlərin ayrılmasını dəstəkləyir və daha çox yoxlama imkanı verir.  Digər cavablar bu nöqtədə qeyd olundu, buna görə də onu tərk edəcəyəm. 

Problemlərin ayrılması

Və yuxarıda göstərilən bütün bu kompleks mövzunu bağlayır: problemlərinizi ayrı saxlayırsınız. Sizin fikriniz nə baş verəcək (əksəriyyəti üçün) haqqında rəsmi bir hesabatdır; modeliniz məlumatlarınızı təmsil edir; yenidən istifadə edilə bilən vəzifələri yerinə yetirmək üçün xidmət səviyyəsinə sahibsiniz; DOM-i manipulyasiya edir və fikirlərini direktivlərlə genişləndirirsiniz; və nəzarətçiləri ilə hamısını birləşdirin. Bu da digər cavablarda da qeyd olunur və əlavə etmək istərdim ki, bir şeyin aşağıda göstərilən digər bir hissəsində müzakirə edəcəyi sınaqdan keçə bilərik.

Bağımlılıkları etkinleştirin

Problemlərin ayrılması ilə əlaqədar bizə kömək etmək üçün, bağımlılıq mübadiləsi (DI). Bir server tərəfi dilini ( Java'dan PHP'ye ) istifadə edirsinizsə, ehtimal ki bu anlayışla artıq tanışsınız, ancaq bir jQuery müştəri oğlansanız, bu konsepsiya, hiyləgərdən hipsterə lazımsız bir şey kimi görünə bilər. Ancaq bu belə deyil: -)

Geniş bir baxımdan DI, siz komponentləri elan etmək azadlığınızdır və hər hansı digər komponentdən yalnız bir nüsxəsini istəyə bilərsiniz və bu təmin ediləcəkdir. Bootu sifarişini, faylların yerini və ya buna bənzər bir şey bilmək lazım deyil. Güc dərhal görülə bilməz, amma yalnız bir (ümumi) nümunə verəcəyəm: test.

Diyelim ki, başvurumuzda, REST API'sinde sunucu depolamasını uygulayan bir servise ihtiyacımız var və tətbiqin durumuna bağlı olaraq depolama da yerli. Denetleyicilerimizde testlər həyata keçirərkən, biz serverlə əlaqə istəmirik - biz hələ də nəzarətçini test edirik. Biz sadəcə bizim orijinal komponentimizlə eyni adda bir xidmət sxemini əlavə edə bilərik və enjektör bizim nəzarətçimiz avtomatik olaraq saxta bir alıcıya çevriləcəkdir - nəzarətçimiz fərqini bilmir və bilməməlidir.

Məhkəmə haqqında danışarkən ...

4. Testə əsaslanan inkişaf - hər zaman

Bu, həqiqətən, 3-cü hissənin arxitektura hissəsindəki hissəsidir, amma mənim yüksək səviyyəli bölməmə yerləşdirmək çox vacibdir.

Gördüyünüz bütün çoxlu jQuery pluginlərindən, istifadə olunan və ya yazdıqları, neçə dənə yoldaşlıq test paketi var idi? Çox deyil, çünki jQuery bu üçün çox asandır. Lakin AngularJS edir.

JQuery-də sınaqdan keçirilmənin yeganə üsulu, testlərimizin DOM manipulyasiyalarını həyata keçirə biləcəyi bir nümunə / demo səhifəsi ilə müstəqil bir komponent yaratmaqdır. Beləliklə, biz komponenti ayrı-ayrılıqda inkişaf etdirməliyik və tətbiqimizi tətbiq edəcəyik. Qeyri-adekvat! JQuery ilə inkişaf edərkən çox vaxt, testə əsaslanan inkişafın yerinə yineleyici bir seçim seçirik. Və kim bizi günahlandırır?

Ancaq problemlərin ayrılması olduğundan, AngularJS-də testi inkişaf etdirə bilərik! Məsələn, deyirik ki, menyumuzdə mövcud marşrutumuzun nə olduğunu göstərmək üçün bir supersimple direktiv istəyirik. Ərizəmizin baxımından istədiyimizi deyə bilərik:

 

Bəli, indi qeyri when-active mövcud when-active direktiv üçün bir test yaza bilərik:

 

Və sınağımıza qoşulduğumuz zaman, bunun uğursuz olduğunu təsdiqləyə bilərik. Yalnız indi direktivimizi yaratmalıyıq:

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

Bunun bir neçə səhvi var:

  • Birincisi, jQuery heç vaxt tələb olunmamışdı. Burada jQuery üçün lazım olan bir şey etmədik!
  • İkincisi, bizim səhifəmizdə jQuery var, hətta burada istifadə etmək üçün heç bir səbəb yoxdur; biz yalnız angular.element istifadə edə bilərsiniz və jQuery olmayan bir layihəyə daxil olduğunuzda komponentiniz hələ də işləyəcək.
  • Üçüncüsü, bu direktivin jQuery tələb etdiyi varsalsa da, jqLite ( angular.element ) yüklənmişdirsə, həmişə jQuery istifadə edəcək! Beləliklə, biz $ istifadə etmək lazım deyil - biz yalnız angular.element istifadə edə bilərsiniz.
  • Üçüncüylə yaxından əlaqəli olan dördüncü, jqLite elementlərinin $ sarılmamasıdır - link funksiyasına ötürülən element artıq bir jQuery elementi olacaqdır!
  • Bəs, əvvəlki bölmələrdə qeyd etdiyimiz beşinci, niyə şablon materialını mantığa qarışdırırıq?

Bu direktiv yenidən yazıla bilər (hətta çox mürəkkəb hallarda!) Çox asan:

7185
22 февр. Josh David Miller tərəfindən verilən cavab 22 fevral 2013-02-22 00:26 '13 'da 0:26 2013-02-22 00:26

İmperativ → deklarativ

JQuery'de, bir seçici DOM'yu axtarmaq üçün istifadə olunur, sonra da olay işleyicilerini bağlayır / qeyd edir. Bir hadisə tetiklendiğinde, bu (zorunlu) kod DOM'u günceller / değiştirir.

AngularJS-də, DOM elementləri ilə deyil, fikirlər haqqında düşünmək istəyirsən. AngularJS direktivləri olan HTML təqdimatları (deklarativ) . Direktivlər bizim üçün səhnələrin arxasında hadisə işləyiciləri qurdular və bizə dinamik məlumatlar bağlayırlar. Seçicilər nadir hallarda istifadə olunur, buna görə identifikatorlar (və bəzi sinif növləri) ehtiyacları əhəmiyyətli dərəcədə azaldılır. Görünüşlər modellərə (sahələr vasitəsilə) bağlıdır. Views bir model bir proyektidir. Hadisələrin dəyişdirilməsi üçün modellər (məsələn, Data, region xüsusiyyətləri) və bu modelləri "avtomatik olaraq" hazırlayan görünüşlər.

AngularJS-də, modellər haqqında düşünün, jQuery sizin məlumatlarınızı ehtiva edən DOM elementlərini seçmir. Bu modellərin proqnozları kimi fikirləri düşünün, istifadəçi görənləri manipulyasiya etmək üçün geri çağırışları qeyd edin.

Problemlərin ayrılması

jQuery qeyri-səmimi JavaScript istifadə edir - davranış (JavaScript) strukturdan (HTML) ayrılır.

AngularJS görünüş / strukturdan (HTML) davranışı aradan qaldırmaq üçün nəzarətçi və direktivlərdən istifadə edir (hər biri öz nəzarətçi və / və ya kompilyasiya və əlaqə funksiyalarına malik ola bilər). Açısal da ərizənizi bölmək / təşkil etmək üçün xidmətfiltrelərə malikdir.

border=0

Həmçinin baxın on123.ru.site/questions/511 / ...

Ərizə dizaynı

AngularJS tətbiqinin inkişafına bir yanaşma:

  • Modellərinizi düşünün. Bu modellər üçün xidmətlər və ya öz JavaScript obyektlərinizi yaradın.
  • Modellərinizi necə təqdim etmək istədiyinizi düşünün - fikirləriniz. Dinamik məlumatların cəlb edilməsi üçün zəruri direktivlərdən istifadə edərək, hər bir təqdimat üçün HTML şablonları yaradın.
  • Hər bir görünüşə bir nəzarətçi əlavə edin (ng-baxım və marşrutlaşdırma və ya nəzarətçi ilə). Dispetçerdən görünüşlərin yerinə yetirilməsi lazım olan yalnız hər hansı bir model məlumatı tapmaq / götürməsini xahiş et. Kontrolörleri mümkün qədər incə olun.

Prototip mülkiyyəti

JQuery ilə çox şey edə bilərsiniz, necə prototip JavaScript irsinin işlədiyini bilmədən. AngularJS tətbiqlərini inkişaf etdirdiyinizdə JavaScript irsinin yaxşı başa düşülməsi üçün bəzi ümumi səhvlərdən qaçınacaqsınız. Təklif olunan oxu: AngularJS-də prototip / prototip miras həcminin nüansları hansılardır?

408
21 февр. Mark Rajcok tərəfindən verilmiş cavab 21 fevral. 2013-02-21 07:09 '13 at 07:09 2013-02-21 07:09

AngularJS və s. jQuery

AngularJS və jQuery tamamilə fərqli ideologiyaları qəbul edir. Если вы отправляетесь из jQuery, вы можете обнаружить некоторые отличия от удивления. Angular может рассердить вас.

Это нормально, вы должны проталкивать. Angular стоит того.

Большая разница (TL;DR)

jQuery дает вам набор инструментов для выбора произвольных бит DOM и создания для них специальных изменений. Вы можете делать почти все, что угодно, по частям.

Вместо этого AngularJS дает вам компилятор .

Это означает, что AngularJS считывает всю вашу DOM сверху вниз и обрабатывает ее как код, буквально как инструкции для компилятора. Когда он пересекает DOM, он ищет конкретные директивы (директивы компилятора), которые сообщают компилятору AngularJS, как вести себя и что делать. Директивы - это небольшие объекты, наполненные JavaScript, которые могут соответствовать атрибутам, тегам, классам или даже комментариям.

Когда компилятор Angular определяет, что часть DOM соответствует определенной директиве, она вызывает директивную функцию, передавая ей элемент DOM, любые атрибуты, текущую область $(которая является локальным хранилищем переменных) и некоторые другие полезные биты. Эти атрибуты могут содержать выражения, которые могут быть интерпретированы в Директиве и которые сообщают ему, как визуализировать, и когда он должен перерисовываться.

Затем директивы могут втягивать дополнительные компоненты Angular, такие как контроллеры, сервисы и т.д. То, что выходит в нижней части компилятора, является полностью сформированным веб-приложением, подключенным и готовым к работе.

Это означает, что Angular используется с шаблоном . Ваш шаблон управляет JavaScript, а не наоборот. Это радикальное изменение ролей и полная противоположность ненавязчивого JavaScript, который мы писали в течение последних 10 лет или около того. Это может занять некоторое время.

Если это звучит так, будто это может быть чрезмерно предписывающим и ограничивающим, ничто не может быть дальше от истины. Поскольку AngularJS рассматривает ваш HTML как код, вы получаете степень детализации HTML-кода в своем веб-приложении . Все возможно, и большинство вещей удивительно легко, как только вы совершите несколько концептуальных скачков.

Спуститесь к nitty gritty.

Сначала, Angular не заменяет jQuery

Angular и jQuery делать разные вещи. AngularJS предоставляет вам набор инструментов для создания веб-приложений. jQuery в основном предоставляет вам инструменты для изменения DOM. Если jQuery присутствует на вашей странице, AngularJS будет использовать его автоматически. Если это не так, AngularJS отправляется с jQuery Lite, который является сокращенной, но все же прекрасно используемой версией jQuery.

Misko любит jQuery и не возражает против вас, используя его. Однако вы найдете по мере продвижения, что вы можете получить практически всю свою работу, используя комбинацию области, шаблонов и директив, и вы должны предпочесть этот рабочий процесс, где это возможно, потому что ваш код будет более дискретным, более настраиваемым и более Angular.

Если вы используете jQuery, вы не должны разбрызгивать его повсюду. Правильное место для DOM-манипуляции в AngularJS находится в директиве. Подробнее об этом позже.

Ненавязчивый JavaScript с селекторами против декларативных шаблонов

jQuery обычно применяется ненавязчиво. Ваш код JavaScript связан в заголовке (или нижнем колонтитуле), и это единственное место, о котором упоминалось. Мы используем селекторы для выбора битов страницы и записи плагинов для изменения этих частей.

JavaScript находится под контролем. HTML имеет совершенно независимое существование. Ваш HTML остается семантическим, даже без JavaScript. Атрибуты Onclick - очень плохая практика.

Одна из первых вещей, которые вы заметите в AngularJS, заключается в том, что пользовательские атрибуты повсюду . Ваш HTML будет усеян атрибутами ng, которые по сути являются атрибутами onClick на стероидах. Это директивы (директивы компилятора) и являются одним из основных способов привязки шаблона к модели.

Когда вы впервые увидите это, у вас может возникнуть соблазн написать AngularJS, как старый школьный навязчивый JavaScript (как я сделал сначала). Фактически, AngularJS не играет по этим правилам. В AngularJS ваш HTML5 является шаблоном. Он скомпилирован AngularJS для создания вашей веб-страницы.

Это первая большая разница. Для jQuery ваша веб-страница - это DOM, которым нужно манипулировать. Для AngularJS ваш HTML-код должен быть скомпилирован. AngularJS читает на вашей всей веб-странице и буквально компилирует его на новую веб-страницу, используя встроенный компилятор.

Ваш шаблон должен быть декларативным; его смысл должен быть ясным, просто прочитав его. Мы используем пользовательские атрибуты со значимыми именами. Мы составляем новые HTML-элементы, опять же имеющие значащие имена. Дизайнер с минимальными знаниями HTML и без навыков кодирования может прочитать ваш шаблон AngularJS и понять, что он делает. Он или она может вносить изменения. Это способ Angular.

Шаблон находится на водительском сиденье.

Один из первых вопросов, которые я задавал себе при запуске AngularJS и проходящих через учебники, - "Где мой код?" . Я не написал JavaScript, и все же у меня есть все это. Ответ очевиден. Поскольку AngularJS компилирует DOM, AngularJS обрабатывает ваш HTML как код. Для многих простых случаев достаточно просто написать шаблон и позволить AngularJS скомпилировать его в приложение для вас.

Ваш шаблон управляет вашим приложением. Он рассматривался как DSL . Вы пишете компоненты AngularJS, и AngularJS позаботится о том, чтобы втянуть их и сделать их доступными в нужное время на основе структуры вашего шаблона. Это очень отличается от стандартного шаблона MVC , где шаблон предназначен только для вывода.

Это больше похоже на XSLT , чем Ruby on Rails , например.

Это радикальное обращение к управлению, которое требует некоторого привыкания.

Остановить попытку запустить приложение из вашего JavaScript. Пусть шаблон управляет приложением, и пусть AngularJS позаботится о подключении компонентов вместе. Это также способ Angular.

Семантический HTML против семантических моделей

С jQuery ваша HTML-страница должна содержать смысловое содержательное содержимое. Если JavaScript отключен (пользователем или поисковой системой), ваш контент остается доступным.

Потому что AngularJS рассматривает вашу HTML-страницу как шаблон. Шаблон не должен быть семантическим, поскольку ваш контент обычно хранится в вашей модели, которая в конечном итоге исходит из вашего API. AngularJS компилирует вашу DOM с моделью для создания семантической веб-страницы.

Ваш HTML-источник больше не является семантическим, вместо этого ваш API и скомпилированный DOM являются семантическими.

В AngularJS, что означает жизнь в модели, HTML - это просто шаблон, только для отображения.

На данный момент у вас, вероятно, есть всевозможные вопросы, касающиеся SEO и доступность, и это правильно. Здесь есть открытые проблемы. Большинство читателей экрана будут обрабатывать JavaScript. Поисковые системы могут также индексировать AJAXed . Тем не менее, вы захотите убедиться, что используете URL-адреса pushstate, и у вас есть достойная карта сайта. См. Здесь для обсуждения проблемы: on123.ru.site/questions/521/...

Разделение проблем (SOC) и MVC

Разделение проблем (SOC) - это шаблон, который вырос за многие годы веб-разработки по целому ряду причин, включая SEO, доступность и несовместимость браузера. Это выглядит так:

  • HTML - семантическое значение. HTML должен стоять в одиночестве.
  • CSS - Styling, без CSS страница по-прежнему доступна для чтения.
  • JavaScript - поведение, без script содержимое остается.

Опять же, AngularJS не играет по своим правилам. В результате, AngularJS удаляется с десятилетней мудростью и вместо этого реализует шаблон MVC, в котором шаблон уже не является семантическим, даже немного.

Он выглядит следующим образом:

  • Модель - ваши модели содержат ваши семантические данные. Обычно модели обычно JSON . Модели существуют как атрибуты объекта с именем $scope. Вы также можете хранить удобные служебные функции в $scope, к которым могут обращаться ваши шаблоны.
  • Вид. Ваши представления написаны в формате HTML. Представление обычно не является семантическим, потому что ваши данные находятся в модели.
  • Контроллер. Контроллер - это функция JavaScript, которая перехватывает представление модели. Его функция - инициализировать $scope. В зависимости от вашего приложения вам может понадобиться создать контроллер или нет. На странице может быть много контроллеров.

MVC и SOC не находятся на противоположных концах одинакового масштаба, они находятся на совершенно разных осях. SOC не имеет смысла в контексте AngularJS. Вы должны его забыть и двигаться дальше.

Если, как и я, вы пережили войны в браузере, вы могли бы найти эту идею довольно оскорбительной. Повернись, это будет стоить того, обещаю.

Плагины против директив

Плагины расширяют jQuery. Директивы AngularJS расширяют возможности вашего браузера.

В jQuery мы определяем плагины, добавляя функции к jQuery.prototype. Затем мы подключаем их к DOM, выбирая элементы и вызывая плагин на результат. Идея заключается в расширении возможностей jQuery.

Например, если вам нужна карусель на вашей странице, вы можете определить неупорядоченный список цифр, возможно, завернутый в элемент nav. Затем вы можете написать некоторый jQuery, чтобы выбрать список на странице и восстановить его как галерею с таймаутами, чтобы сделать скользящую анимацию.

В AngularJS мы определяем директивы. Директива - это функция, которая возвращает объект JSON. Этот объект сообщает AngularJS, какие элементы DOM нужно искать, и какие изменения внесены в них. Директивы привязаны к шаблону с использованием атрибутов или элементов, которые вы изобретаете. Идея состоит в том, чтобы расширить возможности HTML с новыми атрибутами и элементами.

Метод AngularJS - это расширение возможностей встроенного HTML. Вы должны написать HTML, который выглядит как HTML, расширенный с помощью настраиваемых атрибутов и элементов.

Если вы хотите использовать карусель, просто используйте элемент <carousel /> , затем определите директиву, чтобы вытащить шаблон, и сделайте эту присоску.

Множество небольших директив против больших плагинов с переключателями конфигурации

Тенденция с jQuery заключается в том, чтобы писать большие большие плагины, такие как lightbox, которые мы затем настраиваем, передавая многочисленные значения и параметры.

Это ошибка в AngularJS.

Возьмем пример выпадающего списка. При написании плагина выпадающего списка может возникнуть соблазн закодировать обработчики кликов, возможно, функцию добавления в шеврон, который находится вверх или вниз, возможно, изменит класс разворачиваемого элемента, покажет скрыть меню, все полезные материалы.

Пока вы не сделаете небольшое изменение.

Скажем, у вас есть меню, которое вы хотите развернуть при наведении. Ну, теперь у нас есть проблема. Наш плагин подключен к нашему обработчику кликов для нас, нам нужно будет добавить параметр конфигурации, чтобы он мог вести себя по-другому в этом конкретном случае.

В AngularJS мы пишем меньшие директивы. Наша директива о выделении была бы смехотворно мала. Он может поддерживать сложенное состояние и предоставлять методы fold(), unlold() или 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. Если мы хотим делать исключения по каждому случаю, шаблон делает это легко.

Закрытие против $scope

Плагины JQuery создаются в закрытии. Конфиденциальность поддерживается в пределах этого закрытия. Это зависит от вас, чтобы поддерживать цепочку видимости в пределах этого закрытия. У вас действительно есть доступ к набору узлов DOM, переданных в плагин jQuery, плюс любые локальные переменные, определенные в закрытии, и любые глобальные переменные, которые вы определили. Это означает, что плагины полностью автономны. Это хорошо, но при создании целого приложения может стать ограничительным. Попытка передать данные между разделами динамической страницы становится сложной задачей.

У AngularJS есть объекты $scope. Это специальные объекты, созданные и поддерживаемые AngularJS, в которых вы сохраняете свою модель. В некоторых директивах будет появляться новая область $, которая по умолчанию наследует от своей оболочки $scope с использованием прототипа наследования 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 обновляется, шаблон также будет обновляться.

Ajax все время

В jQuery создание Ajax-звонка довольно просто, но это все равно что-то, о чем вы могли бы подумать дважды. Там добавлена ​​сложность, о которой нужно подумать, и справедливый кусок script для поддержки.

В AngularJS Ajax является вашим решением по умолчанию, и это происходит постоянно, почти без вашего внимания. Вы можете включить шаблоны с ng-include. Вы можете применить шаблон с простейшей настраиваемой директивой. Вы можете обернуть вызов Ajax в службу и создать себе GitHub или Flickr , с которым вы можете получить доступ с удивительной легкостью.

Сервисные объекты и вспомогательные функции

В jQuery, если мы хотим выполнить небольшую задачу, не связанную с dom, такую ​​как вытягивание фида из API, мы могли бы написать небольшую функцию для этого в нашем закрытии. Это правильное решение, но что, если мы хотим часто обращаться к этому каналу? Что делать, если мы хотим повторно использовать этот код в другом приложении?

AngularJS предоставляет нам служебные объекты.

Службы - это простые объекты, содержащие функции и данные. Они всегда одиночные, то есть никогда не может быть более одного из них. Скажем, мы хотим получить доступ к API, мы можем написать StackOverflowService , который определяет методы для этого.

Скажем, у нас есть корзина для покупок. Мы можем определить ShoppingCartService, который поддерживает нашу корзину и содержит методы для добавления и удаления элементов. Поскольку служба является одноэлементной и используется всеми другими компонентами, любой объект, который должен записывать в корзину и извлекать данные из него. Это всегда одна и та же тележка.

Служебные объекты являются автономными компонентами AngularJS, которые мы можем использовать и повторно использовать по своему усмотрению. Это простые объекты JSON, содержащие функции и данные. Они всегда являются одноточиями, поэтому, если вы храните данные на службе в одном месте, вы можете получить эти данные в другом месте, запросив ту же службу.

Инъекционная инъекция (DI) vs. Instatiation - aka de-spaghettification

AngularJS управляет вашими зависимостями для вас. Если вы хотите объект, просто обратитесь к нему, и AngularJS получит его для вас.

Пока вы не начнете использовать это, трудно объяснить, что такое огромное время. В jQuery нет ничего подобного AngularJS DI.

DI означает, что вместо того, чтобы писать приложение и подключать его вместе, вместо этого вы определяете библиотеку компонентов, каждая из которых идентифицируется строкой.

Скажем, у меня есть компонент под названием "FlickrService", который определяет методы для вытаскивания JSON-каналов из Flickr. Теперь, если я хочу написать контроллер, который может получить доступ к 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 очень мало говорит о том, как вы должны организовать свой код. У AngularJS есть мнения.

AngularJS предоставляет вам модули, в которые вы можете разместить свой код. Если вы пишете script, который говорит с Flickr, например, вам может понадобиться создать модуль Flickr для переноса всех связанных с ним функций Flickr. Модули могут включать в себя другие модули (DI). Основное приложение обычно является модулем, и это должно включать в себя все остальные модули, от которых зависит ваше приложение.

Вы получаете простое повторное использование кода, если хотите написать другое приложение на основе Flickr, вы можете просто включить модуль Flickr и voila, у вас есть доступ ко всем вашим связанным с Flickr функциям в новом приложении.

Модули содержат компоненты AngularJS. Когда мы включаем модуль, все компоненты в этом модуле становятся доступными для нас как простой список, идентифицированный их уникальными строками . Затем мы можем вставлять эти компоненты друг в друга с использованием механизма инъекции зависимостей AngularJS.

Подводя итог

AngularJS и jQuery не являются врагами. Можно использовать jQuery внутри AngularJS очень хорошо. Если вы хорошо используете AngularJS (шаблоны, привязка данных, $scope, директивы и т.д.), Вам понадобится лот меньше jQuery, чем вам может потребоваться.

Главное, чтобы понять, что ваш шаблон управляет вашим приложением. Прекратите пытаться писать большие плагины, которые делают все. Вместо этого напишите небольшие директивы, которые делают одно, а затем напишите простой шаблон, чтобы связать их вместе.

Подумайте меньше о ненавязчивом JavaScript и вместо этого подумайте о расширениях HTML.

Моя маленькая книга

Я так сильно волновался об AngularJS, я написал короткую книгу, в которой вы можете читать онлайн http://nicholasjohnson.com/angular-book/ . Надеюсь, это будет полезно.

184
ответ дан superluminary 12 мая '14 в 13:22 2014-05-12 13:22

Lazım olan paradiqma dəyişikliyini təsvir edə bilərsinizmi?

Императивный против декларативного

С jQuery вы сообщаете DOM, что должно произойти, шаг за шагом. С AngularJS вы описываете, какие результаты вы хотите, но не как это сделать. Подробнее об этом здесь . Кроме того, проверьте ответ Марка Райкока.

Как мне создавать и создавать клиентские веб-приложения по-другому?

AngularJS - это полная клиентская среда, которая использует шаблон графическое представление ). Он в значительной степени фокусируется на разделении проблем.

Fərq nədir? Что я должен прекратить делать/использовать; что я должен начать делать/использовать вместо этого?

jQuery - это библиотека

AngularJS - это красивая клиентская структура, высоко проверяемая, которая сочетает в себе массу классных вещей, таких как MVC, зависимость , привязка данных и многое другое.

Основное внимание уделяется разделению проблем и тестированию ( модульное тестирование и сквозное тестирование), что облегчает разработку, основанную на тестах.

Лучший способ начать - через их удивительный учебник . Через пару часов вы можете пройти через этапы; однако, если вы хотите освоить концепции за кулисами, они включают в себя множество ссылок для дальнейшего чтения.

Есть ли какие-либо соображения/ограничения на стороне сервера?

Вы можете использовать его в существующих приложениях, где вы уже используете чистый jQuery. Однако, если вы хотите полностью использовать функции AngularJS, вы можете подумать о кодировании серверной части, используя RESTful .

Это позволит вам использовать ресурс factory , который создает абстракцию вашей серверной части RESTful API и делает серверные вызовы (получение, сохранение, удаление и т.д.) невероятно легким.

152
ответ дан Ulises 21 февр. '13 в 7:29 2013-02-21 07:29

Чтобы описать "сдвиг парадигмы", я думаю, что достаточно короткого ответа.

AngularJS изменяет способ поиска элементов

В jQuery вы обычно используете селектор , чтобы найти элементы, а затем подключите их:
$('#id .class').click(doStuff);

В AngularJS вы используете директивы , чтобы пометить элементы напрямую, чтобы подключить их:
<a ng-click="doStuff()">

AngularJS не нуждается (или хочет) находить элементы с использованием селекторов - основное различие между AngularJS jqLite и полномасштабным jQuery заключается в том, что jqLite не поддерживает селекторов .

Поэтому, когда люди говорят "вообще не включать jQuery", это главным образом потому, что они не хотят, чтобы вы использовали селекторы; они хотят, чтобы вы научились использовать директивы вместо этого. Прямо, не выбирайте!

84
ответ дан Scott Rippey 21 февр. '14 в 10:57 2014-02-21 10:57

JQuery

jQuery производит смехотворно длинные команды JavaScript, такие как getElementByHerpDerp более короткие и кросс-браузерные.

AngularJS

AngularJS позволяет создавать собственные HTML-теги/атрибуты, которые хорошо работают с динамическими веб-приложениями (поскольку HTML был разработан для статических страниц).

Düzenle:

Говоря "У меня есть фон jQuery, как я могу думать в AngularJS?" это как сказать "У меня есть HTML-фон, как я могу думать в JavaScript?" Тот факт, что вы задаете вопрос, показывает, что вы, скорее всего, не понимаете основополагающих целей этих двух ресурсов. Вот почему я решил ответить на вопрос, просто указав фундаментальное различие, а не перейдя в список, в котором говорится: "AngularJS использует директивы, тогда как jQuery использует селектор CSS для создания объекта jQuery, который делает это и т.д."., Этот вопрос не требует длительных @.

jQuery - это способ облегчить программирование JavaScript в браузере. Более короткие, кросс-браузерные команды и т.д.

AngularJS расширяет HTML, поэтому вам не нужно ставить <div> на место просто для создания приложения. Это делает HTML действительно работающим для приложений, а не тем, для чего он предназначен, который является статичным, образовательным веб-страницам. Это достигается с помощью JavaScript, но в корне это расширение HTML, а не JavaScript.

69
ответ дан Nick Manning 04 февр. '14 в 8:07 2014-02-04 08:07

jQuery: вы много думаете о `QUERYing DOM 'для элементов DOM и что-то делать.

AngularJS: Модель - это правда, и вы всегда думаете об этом УГЛЕ.

Например, когда вы получаете данные с сервера, который вы собираетесь отображать в некотором формате в DOM, в jQuery вам нужно "1. FIND ', где в DOM вы хотите разместить эти данные," 2. UPDATE/APPEND ', создав новый node или просто установив innerHTML . Затем, когда вы хотите обновить это представление, вы затем "3. НАЙТИ" местоположение и" 4. ОБНОВИТЬ'. Этот цикл поиска и обновления, выполненный в том же контексте получения и форматирования данных с сервера, ушел в AngularJS.

С AngularJS у вас есть ваша модель (объекты JavaScript, к которой вы уже привыкли), и значение модели говорит вам о модели (очевидно) и о представлении, и операция над моделью автоматически распространяется на представление, поэтому вам не нужно об этом думать. Вы окажетесь в AngularJS, который больше не находит вещи в DOM.

Чтобы иначе, в jQuery, вам нужно подумать о селекторах CSS, то есть где div или td , который имеет класс или атрибут и т.д., чтобы я мог получить их HTML или цвет или значение, но в AngularJS вы обнаружите, что думаете, как это: с какой моделью я сталкиваюсь, я установил значение модели true. Вы не беспокоитесь о том, является ли представление, отражающее это значение, флажком или находится в элементе td (подробности, о которых вам часто нужно было бы подумать в jQuery).

И с манипуляциями DOM в AngularJS вы обнаружите, что добавляете директивы и фильтры, которые вы можете рассматривать как допустимые расширения HTML.

Еще одна вещь, которую вы испытаете в AngularJS: в jQuery вы часто вызываете функции jQuery, в AngularJS, AngularJS будет вызывать ваши функции, поэтому AngularJS "расскажет вам, как делать вещи", но преимущества того стоят, поэтому изучение AngularJS обычно означает изучение того, что хочет AngularJS, или способ, которым AngularJS требует, чтобы вы представили свои функции, и он будет называть его соответствующим образом. Это одна из вещей, которая делает AngularJS основой, а не библиотекой.

61
ответ дан Samuel 02 нояб. '13 в 19:53 2013-11-02 19:53

Это очень приятные, но длительные ответы.

Подводя итоги:

  • Контроллеры и поставщики (службы, фабрики и т.д.) предназначены для модификации модели данных, а не HTML.
  • HTML и директивы определяют макет и привязку к модели.
  • Если вам нужно обмениваться данными между контроллерами, создать службу или factory - это одноточие, которые совместно используются в приложении.
  • Если вам нужен виджет HTML, создайте директиву.
  • Если у вас есть данные и теперь вы пытаетесь обновить HTML... STOP! обновите модель и убедитесь, что ваш HTML привязан к модели.
46
ответ дан Dan 17 мая '14 в 0:50 2014-05-17 00:50

jQuery - библиотека манипуляций DOM.

AngularJS - это структура MV *.

Фактически, AngularJS является одной из немногих JavaScript MV * framework (многие инструменты JavaScript MVC по-прежнему попадают под категорию библиотеки).

Будучи каркасом, он размещает ваш код и принимает на себя ответственность за решения о том, что звонить и когда!

Сам AngularJS включает в себя jQuery-lite edition. Таким образом, для некоторых основных подборов/манипуляций с DOM вам действительно не нужно включать библиотеку jQuery (она экономит много байтов для работы в сети.)

У AngularJS есть понятие "Директивы" для манипуляций с DOM и проектирование многократно используемых компонентов пользовательского интерфейса, поэтому вы должны использовать его всякий раз, когда вам кажется, что вам нужно делать манипуляции с DOM (директивы - это только место, где вы должны писать код jQuery при использовании AngularJS).

AngularJS включает в себя некоторую кривую обучения (больше, чем jQuery: -).

- > Для любого разработчика, исходящего из фона jQuery, моим первым советом будет "изучить JavaScript как язык первого класса, прежде чем переходить на богатую инфраструктуру, такую ​​как AngularJS!" Я усвоил этот факт сложным образом.

Uğurlar.

45
ответ дан Sutikshan Dubey 10 окт. '13 в 11:58 2013-10-10 11:58

Это яблоки и апельсины. Вы не хотите сравнивать их. Это две разные вещи. У AngularJs уже встроен jQuery lite, который позволяет выполнять базовые манипуляции с DOM, даже без полноразмерной версии jQuery.

jQuery - все о манипуляциях с DOM. Он решает все боли в браузере, иначе вам придется иметь дело, но это не рамочная программа, которая позволяет разделить ваше приложение на такие компоненты, как AngularJS.

Хорошая вещь об AngularJs заключается в том, что она позволяет вам разделить/изолировать манипуляции DOM в директивах. Существуют встроенные директивы, готовые для использования, такие как ng-click. Вы можете создавать свои собственные директивы, которые будут содержать всю вашу логику просмотра или манипуляции с DOM, чтобы вы не смешивали код DOM-манипуляции в контроллерах или службах, которые должны заботиться о бизнес-логике.

Angular разбивает ваше приложение на - Контроллеры - Сервисы - Просмотры - и т.д.

и есть еще одна вещь, что директива. Это атрибут, который вы можете прикрепить к любому элементу DOM, и вы можете сходить с jQuery внутри него, не беспокоясь о том, что ваш jQuery когда-либо конфликтует с компонентами AngularJs или испортит его архитектуру.

Я слышал из встречи, на которой я присутствовал, один из основателей Angular сказал, что они очень много работали, чтобы отделить манипуляции с DOM, поэтому не пытайтесь включить их обратно.

34
ответ дан Jin 14 авг. '13 в 17:19 2013-08-14 17:19

Слушайте подкаст JavaScript Jabber: Episode # 32 , в котором представлены оригинальные создатели AngularJS: Misko Hevery и Igor Minar. Они много говорят о том, что ему нравится приходить в AngularJS из других фонов JavaScript, особенно jQuery.

Один из пунктов, сделанных в подкасте, сделал много вещей, которые меня интересуют с уважением к вашему вопросу:

MISKO : [...] одна из вещей, о которых мы думали очень мало в Angular, заключается в том, как мы предоставляем много побегов, чтобы вы могли выйти и в основном выяснить выход из этого. Таким образом, для нас ответ - это "Директивы". И с помощью директив вы по существу становитесь обычным jQuery JavaScript, вы можете делать все, что хотите.

IGOR . Так что подумайте о директиве как инструкции для компилятора, которая сообщает ее всякий раз, когда вы сталкиваетесь с этим определенным элементом или этим CSS в шаблоне, и вы держите этот код и этот код отвечающий за элемент и все ниже этого элемента в дереве DOM.

Сценарий всего эпизода доступен по ссылке, приведенной выше.

Итак, чтобы прямо ответить на ваш вопрос: AngularJS - очень самоуверенный и является истинным MV * framework. Тем не менее, вы все равно можете сделать все действительно классные вещи, которые знаете и любите с помощью jQuery внутри директив. Это не вопрос "Как мне сделать то, что я использовал в jQuery?" насколько это важно: "Как я могу дополнить AngularJS всеми вещами, которые я использовал в jQuery?"

Это действительно два очень разных состояния ума.

31
ответ дан codevinsky 08 нояб. '13 в 19:08 2013-11-08 19:08

Я нахожу этот вопрос интересным, потому что мое первое серьезное знакомство с JavaScript-программированием было Node.js и AngularJS. Я никогда не изучал jQuery, и я думаю, что это хорошо, потому что мне не нужно ничего отучивать. На самом деле, я активно избегаю решений jQuery для своих проблем, а вместо этого ищут "способ AngularJS" для их решения. Итак, я думаю, что мой ответ на этот вопрос, по сути, сводится к тому, "подумайте, как тот, кто никогда не изучал jQuery", и избегайте соблазна напрямую включить jQuery (очевидно, AngularJS использует его в некоторой степени за кулисами).

30
ответ дан Evan Zamir 13 сент. '13 в 2:21 2013-09-13 02:21

AngularJS и jQuery:

AngularJs и JQuery совершенно разные на каждом уровне, кроме JQLite, и вы увидите его, как только начнете изучать основные функции AngularJs (я объяснил это ниже).

AngularJs - это клиентская среда, которая предлагает создать независимое клиентское приложение. JQuery - это клиентская библиотека, которая работает с DOM.

AngularJs Cool Principle - Если вы хотите, чтобы некоторые изменения в пользовательском интерфейсе воспринимались с точки зрения изменения модели данных. Измените свои данные, и пользовательский интерфейс повторно отобразит себя. Вам не нужно разыгрывать DOM каждый раз, пока и до тех пор, пока он вряд ли понадобится, и который также должен быть обработан с помощью директив Angular.

Чтобы ответить на этот вопрос, я хочу поделиться своим опытом с первым корпоративным приложением с помощью AngularJS. Это самые удивительные функции, которые Angular предоставляют, где мы начинаем изменять наш подход к jQuery, и мы получаем Angular как фреймворк, а не библиотеку.

Двусторонняя привязка данных потрясающая: У меня была сетка со всеми функциональными возможностями UPDATE, DELTE, INSERT. У меня есть объект данных, который связывает модель сетки с помощью ng-repeat. Вам нужно всего лишь написать одну строку простого кода JavaScript для удаления и вставки, а также ее. сетка автоматически обновляется по мере изменения модели сетки. Функциональность обновления - это в реальном времени, для нее нет кода. Вы чувствуете себя потрясающе.

Многоразовые директивы супер: Записывайте директивы в одном месте и используйте их во всех приложениях. О, МОЙ БОГ!!! Я использовал эту директиву для подкачки, регулярное выражение, проверки и т.д. Это действительно здорово!

Маршрутизация сильная: Это зависит от вашей реализации, как вы хотите ее использовать, но для этого требуется очень мало строк кода для указания запроса на HTML и контроллер (JavaScript)

Контроллеры великолепны: Контроллеры заботятся о своем собственном HTML, но это разделение хорошо работает и для общей функциональности. Если вы хотите вызвать одну и ту же функцию одним нажатием кнопки на главном HTML, просто напишите одно и то же имя функции в каждом контроллере и напишите индивидуальный код.

Плагины: Есть много других подобных функций, таких как показ оверлея в вашем приложении. Вам не нужно писать код для этого, просто используйте плагин overlay, доступный как wc-overlay, и это автоматически позаботится обо всех XMLHttpRequest (XHR).

Идеально подходит для RESTful : Будучи полной основой, AngularJS отлично работает с архитектурой RESTful. Для вызова API REST CRUD очень просто и

Услуги . Записывайте общие коды, используя службы, и меньше кода в контроллерах. Серии могут использоваться для совместного использования общих функций между контроллерами.

Расширяемость : Angular расширила директивы HTML с помощью директив Angular. Выписывайте выражения внутри html и оценивайте их во время выполнения. Создайте свои собственные директивы и службы и используйте их в другом проекте без каких-либо дополнительных усилий.

23
ответ дан Sanjeev Singh 21 сент. '14 в 19:44 2014-09-21 19:44

Как новичок JavaScript MV * и чисто фокусировка на архитектуре приложения (а не на стороне сервера/клиента), я бы, конечно же, рекомендовал следующий ресурс (которого я удивлен еще не упоминался): "Шаблоны проектирования JavaScript" Адди Османи в качестве введения к различным шаблонам проектирования JavaScript . Термины, используемые в этом ответе, взяты из связанного документа выше. Я не буду повторять то, что было хорошо сказано в принятом ответе. Вместо этого этот ответ ссылается на теоретические фоны , которые влияют на AngularJS (и другие библиотеки).

Как и я, вы быстро поймете, что AngularJS (или Ember.js , Durandal и другие рамки MV *, если на то пошло) - это одна сложная структура, объединяющая многие из различные шаблоны проектирования JavaScript.

Мне также было проще протестировать (1) собственный JavaScript-код и (2) меньшие библиотеки для каждого из этих шаблонов отдельно перед погружением в одну глобальную структуру. Это позволило мне лучше понять, какие важные проблемы обращается к рамкам (потому что вы лично сталкиваетесь с проблемой).

Məsələn:

  • Объектно-ориентированное программирование JavaScript (это ссылка для поиска Google). Это не библиотека, но, безусловно, обязательное условие для любого прикладного программирования. Он научил меня встроенным реализациям прототипов , конструкторам, синглтонам и декораторам
  • jQuery / Underscore для фасадного рисунка ( как WYSIWYG для управления DOM)
  • Prototype.js для шаблона прототипа/конструктора/микса
  • RequireJS / Curl.js для шаблона модуля /AMD
  • KnockoutJS для шаблона наблюдаемого, опубликовать/подписаться

NB: этот список не является полным, а не "лучшие библиотеки"; они просто оказались библиотеками, которые я использовал. Эти библиотеки также включают в себя больше шаблонов, те, которые упомянуты, являются лишь их основным фокусом или оригинальными намерениями. Если вы чувствуете, что в этом списке чего-то не хватает, добавьте его в комментарии, и я буду рад добавить его.

20
ответ дан Tyblitz 21 июня '14 в 14:59 2014-06-21 14:59

На самом деле, если вы используете AngularJS, вам больше не нужно jQuery. Сам AngularJS имеет обязательную и директиву, что является очень хорошей заменой для большинства вещей, которые вы можете сделать с помощью jQuery.

Я обычно разрабатываю мобильные приложения, используя AngularJS и Cordova . Единственная вещь из jQuery, в которой я нуждаюсь, - это Селектор.

По googling, я вижу, что есть отдельный модуль селектора jQuery. Это Sizzle.

И я решил сделать крошечный фрагмент кода, который поможет мне быстро запустить веб-сайт с помощью AngularJS с мощью jQuery Selector (используя Sizzle).

Я поделился своим кодом здесь: https://github.com/huytd/Sizzular

12
ответ дан Huy Tran 27 авг. '14 в 9:04 2014-08-27 09:04

Другие вопросы по меткам или Задайте вопрос