"Мышление в AngularJS", если у меня есть фон jQuery? [закрытый]

предположим, я знаком с разработкой клиентских приложений в jQuery, но теперь я хотел бы начать использовать AngularJS. Можете ли вы описать необходимый сдвиг парадигмы? Вот несколько вопросов, которые могут помочь вам сформулировать ответ:

  • как я архитектор и дизайн клиентских веб-приложений по-разному? Какая самая большая разница?
  • что я должен прекратить делать / Использовать; что я должен начать делать/использовать вместо?
  • существуют ли какие-либо серверной/ограничения?

Я не ищу подробного сравнения между jQuery и AngularJS.

15 ответов


1. Не создавайте свою страницу, а затем измените ее с помощью дом манипуляции

в jQuery вы создаете страницу, а затем делаете ее динамической. Это потому, что jQuery был разработан для увеличения и невероятно вырос из этой простой предпосылки.

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

2. Не увеличивайте jQuery с помощью AngularJS

аналогично, не начинайте с идеи, что jQuery делает X, Y и Z, поэтому я просто добавлю AngularJS поверх этого для моделей и контроллеров. Это действительно заманчиво, когда вы только начинаете, поэтому я всегда рекомендую, чтобы новые разработчики AngularJS вообще не использовали jQuery по крайней мере, пока они не привыкнут делать вещи "угловым способом".

я видел, как многие разработчики здесь и в списке рассылки создают эти сложные решения с плагинами jQuery 150 или 200 строк кода, которые они затем склеивают в AngularJS с коллекцией обратных вызовов и $applys, которые сбивают с толку и запутанные; но они в конечном итоге заставить его работать! Проблема в том, что в большинство случаи, когда плагин jQuery может быть переписан в AngularJS во фракции кода, где вдруг все становится понятным и понятным.

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

3. Всегда думайте в терминах архитектуры

сначала знать, что одностраничные приложения are приложения. Они не веб-страниц. Поэтому нам нужно думать как серверный разработчик думать, как разработчик на стороне клиента. Мы должны подумать о том, как разделить наше приложение на отдельные, расширяемые, тестируемые компоненты.

вот тут как вы это делаете? Как вы "думаете в AngularJS"? Вот несколько общих принципов, противопоставленных на jQuery.

вид - это "официальная запись"

в jQuery мы программно меняем представление. Мы могли бы иметь выпадающее меню, определенное как ul вот так:

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

в jQuery, в нашей логике приложения, мы активировали бы его с чем-то вроде:

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

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

на AngularJS, правда, мнение, является официальным рекордом вид-функциональность. Наши!--14--> декларация будет выглядеть так:

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

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

разработчики, новые для AngularJS, часто задают вопрос: как найти все ссылки определенного типа и добавить на них директиву. Разработчик всегда поражается, когда мы отвечаем: нет. Но причина, по которой вы этого не делаете, заключается в том, что это наполовину jQuery, наполовину AngularJS, и ничего хорошего. Проблема здесь это то, что разработчик пытается "сделать jQuery" в контексте AngularJS. Это никогда не сработает. Вид is официальный рекорд. Вне директивы (подробнее об этом ниже), вы никогда, никогда, никогда измените DOM. И директивы применяются по мнению, так что цель ясна.

помните: не проектируйте, а затем отметьте. Вы должны архитектор, а затем дизайн.

привязка данных

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

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

для вида, который выглядит так:

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

помимо смешивания проблем, у нас также есть те же проблемы обозначения намерения, о которых я упоминал ранее. Но что еще более важно, нам пришлось вручную ссылаться и обновлять узел DOM. И если мы хотим удалить запись журнала, мы должны кодировать против DOM для этого тоже. Как мы проверяем логику отдельно от DOM? И что если мы хотим изменить представление?

это немного грязно и немного хрупко. Но в AngularJS мы можем сделать это:

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

и наш взгляд может выглядеть так:

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

но если на то пошло, наш взгляд может выглядеть это:

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

и теперь вместо использования неупорядоченного списка мы используем Bootstrap alert. И нам никогда не приходилось менять код контроллера! Но что более важно, неважно здесь или как журнал обновляется, представление тоже будет меняться. Автоматически. Ловко!

хотя я не показывал его здесь, привязка данных двусторонняя. Таким образом, эти сообщения журнала также могут быть доступны для редактирования в представлении, просто сделав это: <input ng-model="entry.msg" />. И было много веселье.

отдельный слой модели

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

разделение заботы

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

инъекции зависимостей

помочь нам с разделением забот - это инъекции зависимостей (DI). Если вы пришли с серверного языка (от Java to PHP) вы, вероятно, уже знакомы с этой концепцией, но если вы клиентский парень из jQuery, эта концепция может показаться чем угодно: от глупого до лишнего для хипстера. Но это не так. :-)

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

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

говоря о тестирование...

4. Тест-драйв разработки -всегда

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

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

в jQuery единственный способ проверить часто чтобы создать компонент самостоятельно с образцом / демонстрационной страницей, против которой наши тесты могут выполнять манипуляции DOM. Итак, мы должны разработать компонент отдельно и затем интегрировать его в наше приложение. Как неудобно! Большую часть времени при разработке с помощью jQuery мы выбираем итеративную, а не тестовую разработку. И кто может винить нас?

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

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

ладно, теперь мы можем написать тест для несуществующего :

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

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

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

и когда мы запускаем наш тест, мы можем подтвердить, что это не удается. Только теперь мы должны создать нашу директиву:

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

наш тест теперь проходит и нашем меню выполняет как запрошенный. Наше развитие и итерационный и


императив → декларативный

в jQuery, селекторы используются для поиска дом элементы, а затем привязать / зарегистрировать обработчики событий к ним. Когда событие запускается, этот (императивный) код выполняется для обновления / изменения DOM.

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

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

разделение

библиотека jQuery использует ненавязчивый JavaScript - поведение (JavaScript) отделено от структуры (HTML).

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

см. также https://stackoverflow.com/a/14346528/215945

дизайн приложения

один подход к разработке приложения AngularJS:

  1. подумайте о своих моделях. Создавать сервисы или собственные объекты JavaScript для этих моделей.
  2. подумайте, как вы хотите представить свои модели-ваши взгляды. Создайте HTML-шаблоны для каждого представления, используя необходимые директивы для получения динамической привязки данных.
  3. прикрепите контроллер к каждому представлению (используя ng-view и маршрутизацию или ng-controller). Попросите контроллер найти / получить только те данные модели, которые представление должно выполнить свою работу. Контроллеры как можно тоньше.

прототипного наследования

вы можете многое сделать с jQuery, не зная о том, как работает прототипное наследование JavaScript. Разрабатывая Приложения AngularJS, вы избежите некоторых общих подводных камней, если у вас есть хорошее понимание наследования JavaScript. Рекомендуемое чтение:каковы нюансы прототипического / прототипического наследования в AngularJS?


AngularJS против jQuery

AngularJS и jQuery принимают очень разные идеологии. Если вы пришли из jQuery, вы можете найти некоторые из различий удивительными. Угловатый может вас разозлить.

это нормально, вы должны протолкнуть. Угловой стоит.

большая разница (TLDR)

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

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

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

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

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

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

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

давайте перейдем к делу.

во-первых, угловой не заменяет jQuery

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

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

если вы используете 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 и понять, что он делает. Он или она может вносить изменения. это угловой путь.

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

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

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

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

это радикальная инверсия контроля, к которой нужно привыкнуть.

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

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

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

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

HTML-код источника больше не смысловой, а, API и скомпилированные дом семантичны.

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

на данный момент у вас, вероятно, есть всевозможные вопросы, касающиеся SEO и доступность, и это правильно. Здесь есть открытые вопросы. Наиболее теперь читатели экрана будут анализировать JavaScript. Поисковые системы также могут индексировать AJAXed содержание. Тем не менее, вы захотите убедиться, что используете URL-адреса pushstate и у вас есть достойная Карта сайта. См. здесь для обсуждения вопроса:https://stackoverflow.com/a/23245379/687677

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

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

  1. HTML-код - смыслового значения. HTML должен стоять отдельно.
  2. CSS-Styling, без CSS страница все еще читается.
  3. JavaScript-поведение, без скрипта содержимое остается.

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

это выглядит так:

  1. Model-ваши модели содержат ваши семантические данные. Модели обычно JSON объекты. Модели существуют как атрибуты объекта с именем $scope. Вы также можете хранить удобные функции утилиты в $scope, к которым ваши шаблоны могут получить доступ.
  2. View - ваши представления написаны в HTML. Представление обычно не является семантическим, потому что ваши данные живут в модели.
  3. Controller-ваш контроллер-это функция JavaScript, которая подключает представление к модели. Его функция заключается в инициализации $scope. В зависимости от приложения может потребоваться или не потребоваться создание контроллера. У вас может быть много контроллеров на странице.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

в AngularJS мы пишем меньшие директивы. Наша раскрывающаяся директива будет смехотворно мала. Он может поддерживать сложенное состояние и предоставлять методы для fold(), unfold() или toggle(). Эти методы просто обновят $scope.меню.видно что логическое проведение государственной.

теперь в нашем шаблоне мы можем подключить это:

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

нужно обновить на mouseover?

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

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

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

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

AngularJS имеет объекты $ scope. Это специальные объекты, созданные и поддерживаемые AngularJS, в которых вы храните свою модель. Некоторые директивы породят новую $scope, которая по умолчанию наследует от своей $scope с помощью прототипического наследования JavaScript. Масштаб объект доступен в контроллере и представлении.

это умная часть. Поскольку структура наследования $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 довольно просто, но это все еще то, о чем вы можете подумать дважды. Есть дополнительная сложность, о которой нужно думать, и справедливый кусок сценария для поддержания.

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

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

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

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

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

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

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

инъекции зависимостей (Ди) и Instatiation - ака-де-spaghettification

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

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

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 необходим для создания экземпляра контроллера, и предоставит один для нас.

это делает вещи проводки совместно очень легким, и в значительной степени исключает любую тенденцию к spagettification. У нас есть плоский список компонентов, и AngularJS передает их нам один за другим по мере необходимости.

модульная архитектура обслуживания

jQuery очень мало говорит о том, как вы должны организовать свой код. У AngularJS есть мнения.

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

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

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

подведем итоги

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

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

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

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

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


можете ли вы описать необходимый сдвиг парадигмы?

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

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

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

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

в чем самая большая разница? Что я должен прекратить делать/Использовать; что я должен начать делать / использовать вместо этого?

jQuery библиотека

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

Он посвящен разделение и тестирования (тестирование и сквозного тестирования), что облегчает тестирование.

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

существуют ли какие-либо соображения/ограничения на стороне сервера?

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

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


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

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

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

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

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


jQuery

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

AngularJS

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

Edit:

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

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

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


jQuery: вы много думаете о " запросе дом ' для элементов DOM и что-то делать.

AngularJS: модель-это правда,и вы всегда думаете с этого угла.

например, когда вы получаете данные с сервера, которые вы собираетесь отображать в некотором формате в DOM, в jQuery, вам нужно '1. Найдите "где в DOM вы хотите разместить эти данные," 2. Обновите / добавьте его там, создав новый узел или просто установив его innerHTML. Затем, когда вы хотите обновить это представление, вы затем '3. Найдите 'the location and' 4. UPDATE'. Этот цикл поиска и обновления все сделано в том же контексте получения и форматирования данных с сервера ушел в AngularJS.

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

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

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

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


Это некоторые очень хорошие, но длинные ответы.

чтобы подвести итог моему опыту:

  1. регуляторы и поставщики (обслуживания, фабрики, etc.) предназначены для изменения модели данных, а не HTML.
  2. HTML и директивы определяют макет и привязку к модели.
  3. Если вам нужно обмениваться данными между контроллерами, создайте службу или фабрику-это синглеты, которые совместно используются в приложении.
  4. Если вам нужен HTML виджет, создайте директиву.
  5. если у вас есть некоторые данные и теперь вы пытаетесь обновить HTML... Стоп! обновите модель и убедитесь, что ваш HTML привязан к модели.

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

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

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

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

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

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

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

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

удачи.


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

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

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

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

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

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


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

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

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

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

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

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

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


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


AngularJS и jQuery:

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

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

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

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

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

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

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

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

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

подходит для RESTful архитектура: Будучи полным фреймворком, AngularJS отлично подходит для работы с архитектурой RESTful. Вызвать Rest CRUD APIs очень просто и

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

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


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

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

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

например:

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


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

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

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

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

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