AngularJS. Работа с jQuery. jqLite

Содержание материала:

Stepan Suvorov Blog

Release 2.0

Как правильно готовить Angular

Пост составлен на основе развернутого ответа John David Miller о том, как человеку, который писал сайты с jQuery, переключится на AngularJS – мышление.

1. Проектируйте страницу в момент написания HTML

В jQuery-ориентированном подходе вы сначала верстаете страницу, а потом – делаете ее “динамической”.

В AngularJS вы должны начинать с архитектуры в самом начале. Вместо того, чтобы думать “У меня есть этот кусок DOM и я хочу заставить его делать что-то такое …”, сразу думать о том, что хотите достичь в целом(от приложения), и только затем переходить к структуре, и в самую последнюю очередь – к дизайну конкретного отображения.

2. Не пытайтесь “разогнать” jQuery с помощью AngularJS

Проще говоря: не начинайте с мысли “у меня есть jQuery, оно делает делает X, Y и Z, и я просто добавлю AngularJS для создания моделей и контроллеров”. Это очень заманчиво, особенно тогда, когда вы только начали работать с AngularJS и еще не понимаете всех концептов. Именно поэтому я всегда рекомендую начинающим AngularJS разработчикам не использовать jQuery вообще . До тек пор, пока они не почувствуют как делать “Angular-way“.

Я видел много разработчиков создающих эти запутанные решения с jQuery плагинами на 150-200 строчек кода, которые они пытаются прикрутить к AngularJS с помощью набора колбеков совместно с использованием $apply, что крайне запутано и сбивает с толку, но они таки заставляют “Это” работать. Проблема состоит в том, что в большинстве случаев jQuery плагин может быть переписан в несколько строчек AngularJS, где все бы стало на свои места и было просто и понятно.

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

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

Single page applications – это приложение, но не в коем случае не набор веб-страниц. Поэтому мы должны думать не только как разработчики клиентской части, но так же как сервер-сайд разработчики(в плане взаимодействия данных). Мы должны думать о том, как разбить наше приложение на индивидуальные, расширяемые компоненты, которые легко будет потом покрыть тестами.

И как это сделать? Как думать Angular-way? Далее представлены основные принципы, контрастирующие с jQuery:

Место действия View

В jQuery мы программно изменяем представление(view). Рассмотрим пример выпадающего меню:

В jQuery мы активируем логику нашего приложения как-то так:

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

В AngularJS представление определяет логику представления. Наше объявление View будет следующим:

Обе версии(jQuery & AngularJS) делают одно и тоже, но в случае с AngularJS – любой смотря в шаблон может понять суть. Когда новый разработчик изучает проект, он может посмотреть на этот код и сделать вывод что тут используется директива dropdownMenu. Представление раскажет все, что ожидается в плане функциональности намного яснее, чем какой-то сторонний код, прикрепленный непонятно где.

Разработчики начиная использовать AngularJS часто задают вопрос типа: как я могу выбрать все нужные элементы и добавить к ним директиву. И они застынут от изумления, когда услышат ответ “вам не нужно искать элементы”. Но причина, по которой вы не дожны так делать: это полу-jQuery полу-AngularJS – что к добру не приведет. Проблема тут заключается в том, что разработчик пытается “делать jQuery” в контексте AngularJS. Снаружи директивы вы никогда не изменяете DOM, а директивы применяются во View. Замысел должен быть ясен.

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

Связывание данных (Data binding)

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

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

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

Немного хардкорно, но в AngularJS мы можем сделать так:

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

Но наше представление так же может выглядеть так:

Теперь мы используем бустраповские алерты вместо списка. И мы даже не прикасались к коду контроллера! Но еще важнее, что каким бы способом не обновлялся log – представление тоже обновится. Автоматически!

Связывание данных двух стороннее(two-way). Лог-сообщения могут быть редактируемыми, просто вот так:

Разве не повод для радости?

Выделение уровня модели

В jQuery DOM является моделью, но в AngularJS у нас отдельный уровень модели, которым мы можем управлять как захотим, и полностью независимо от представления.

Разделение концептов

Ваше представление (View) определяет поведение, ваша модель представляет данные, ваш уровень сервисов служит для различных задач, которые будут выполнятся не один раз. Вы работаете с DOM и расширяете представление в директивах, и соединяете все вместе с помощью контроллеров.

Внедрение зависимости (Dependency injection)

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

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

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

4. Разработка через тестирование (Test-driven development) – всегда

На самом деле это тоже часть секции 3, но это довольно важно, поэтому выношу в отдельный пункт.

Из множества jQuery плагинов, которые вы видели/использовали, сколько из них идут покрытые тестами? – Не так много. Это потому что jQuery не очень поддается тестированию, а вот AngularJS в тестировании очень хорош.

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

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

Теперь мы можем написать тест:

Запускаем тест, убеждаемся, что он не проходит, и пишем директиву:

Теперь тест проходит и меню рабоает. TDD.

5. Директивы – это не запакованый jQuery код

Вы часто слышите “работа с DOM только в директиве”. Это необходимо. Отнеситесь к этому серьезно!

Но давайте нырнем глубже…

Некоторые директивы просто являются декораторами того, что уже есть в представлении (ngClass) и поэтому иногда работают с DOM напрямую(без нашего кода). Но, если директива типа “виджет” и имеет шаблон, она также должна следовать принципу разделения концептов. То есть, шаблон также должен быть независим от области его применения в link-методе и контроллере.

В AngularJS есть целый набор готовых директив, что серьезно упрощает нашу работу: с ngClass мы можем динамически обновлять классы, ngBind позволяет делать двусторонне связывание данных, ngShow и ngHide показывают и прячут элемент. Другими словами: мы можем делать “конфетку” даже без манипуляций с DOM. Чем меньше работы с DOM – тем проще тестировать директиву, а также изменять в будущем.

Я вижу многие начинающие AngularJS используют директивы как место, куда можно вкинуть jQuery код. Другими словами: они думают “если я не могу работать с DOM в контроллере, то я напишу этот код в директиве”. Это намного лучше, но все еще не angualr-way.

Обратите внимание на систему логирования, которую мы описали в разделе 3. Даже, если мы поместим jQuery код в директиву, мы по прежнему хотим делат это angular-way. Есть много случаев, когда работа с DOM необходима, но этих случаев намного меньше, чем вы думаете! До того как сделать какие-либо операции с DOM, спросите себя нужны ли они вам. Возможно есть лучший способ, который позволит обойтись без них использовав встроенные инструменты фреймворка.

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

Но что-то с ним не так.

  • jQuery тут совсем не нужно.
  • даже если у нас где-то есть jQuery код на странице, то совсем не обязательно использовать его тут для совместимости. Мы можем просто использовать angular.element и все зависимости продолжат работать в проекте без jQuery
  • даже если jQuery нам необходим для использования конкретно в этой директиве, то мы опять же всегда можем использовать angular.element, который представляет из себя jqLite, а если jQuery подключена к проекту, то ссылку на jQuery. То есть нет необходимости использовать $ вобще – вместо него лучше использовать angular.element.
  • довольно тесно идет с предыдущим пунктом: element, который получает функция link как параметр уже является экземпляром jqLite и его не нужно дополнительно оборачивать в jQuery.
  • что мы говорили о смешении шаблона и представления с логикой в предыдущей секции?

Эта директива может быть переписана следующим образом:

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

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

Или по другому: если AngularJS что-то не делает “из коробки”, то подумайте, как бы вы могли это правильно сделать с ngClick, ngClass и так далее.

Итого

Даже не пытайтесь использовать jQuery. Даже не подключайте ее. И каждый раз, при желании воспользоваться $, думайте как бы вы могли сделать это в рамках AngularJS. Если не знаете – спросите! В 19ти случаях из 20ти лучший способ решения задачи не требует использования jQuery.

Топ-пост этого месяца:  Альфа канал в CSS

Как сделать Angular использование jQuery над jqLite

В моем проекте я использую jQuery и angular. Я установил их через bower, и я использую браузер для загрузки файлов. Кажется, что это работает нормально, кроме angular используется jqLite. Когда я пытаюсь запустить

Я получаю сообщение об ошибке: jqLite не поддерживает селектора запросов. Как я могу обойти это и сделать angular использование jQuery?

Я хочу использовать angular.element over $для целей тестирования.

javascript jquery angularjs browserify jqlite

2 ответа

Чтобы использовать jQuery, просто убедитесь, что он загружен перед файлом angular.js.

Итак, в вашем файле index.html вам нужно что-то вроде этого:

После этого angular.element должен работать как замена $ :

Если jQuery доступен, angular.element является псевдонимом для функции jQuery. Если jQuery недоступен, делегаты angular.element для Angular встроенного подмножества jQuery, называемого «jQuery lite» или «jqLite».

Т.е. angular.element(‘.foo’) будет таким же, как $(‘.foo’) .

1 benek [2015-10-02 18:12:00]

Чтобы заставить его работать с браузером, вам нужно его потребовать: добавьте зависимость jquery к bower и выполните в основном файле:

Пока здесь, это не видно из-за браузера, потому что ссылка только в bower. Поэтому используйте прокрутку браузера, чтобы сделать клей:

  • Установить browserify-shim
  • В вашем пакете .json добавьте:

Изучаем AngularJS на пяти практических примерах

Скачать рабочие материалы к данной статье

Вы, наверное, слышали уже о AngularJS – JS-фреймворке с открытым исходным кодом, разработанном специалистами Google, который реально меняет представление о веб-приложениях. О нем уже много было написано, но до сих пор в Сети очень трудно найти что-то действительно ориентированное на разработчиков.

Где бы лаконично и конкретно, на практических примерах были описаны принципы работы AngularJS. Цель этой статьи – изменить подобное положение вещей. Ниже приводится описание основных составляющих элементов Angular: Модели,Представления, Контроллеры, Сервисы и Фильтры, созданное на основе пяти конкретных примеров.

Если вы предпочитаете редактировать код через ваш любимый редактор, скачайте ZIP-архив по ссылке выше.

Что такое AngularJS?

По большому счету AngularJS является основой, которая связывает HTML-код (который генерируется для просмотра страницы в окне браузера) с JavaScript объектов /моделей. Когда изменяется один из объектов, автоматически обновляется и генерируемая страница. Верно и обратное — модели связаны с текстовым полем (контентом страницы). Когда изменяется контент, это вызывает изменения и в коде сайта.

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

Для использования AngularJS вы должны добавить его в код своей страницы. Для этого в тэг нужно прописать соответствующие параметры. Google’s CDN для более быстрой загрузки рекомендую еще такой код:

AngularJS включает в себя большое количество директив , которые позволяют связать HTML-элементы моделей. Они представляют из себя атрибуты, начинающиеся с префикса ng-, их можно добавлять к любому элементу. Самым важным атрибутом, который, если вы хотите использовать Angular, нужно включить во все страницы сайта является ng- приложений:

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

Но довольно теории. Давайте рассмотрим непосредственно некоторые коды.

Меню навигации

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

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

Если вы использовали шаблоны JavaScript раньше, то вы знакомы с синтаксисом команды <>. Когда фреймворк видит такую строку, он заменяет содержимое переменной. Эта операция повторяется каждый раз, когда изменяется переменная.

Встроенный редактор

Для второго примера, мы создадим простой встроенный редактор – при нажатии пункта меню всплывает небольшое текстовое поле с подсказкой. Мы используем контроллер, который будет инициализировать модели и задавать два разных метода отображения подсказки. Контроллеры являются стандартными функциями JavaScript, которые автоматически выполняются фреймворком Angular. Они связаны с кодом отображения страницы вашего сайта через директивы ng-controller .

Когда функция контроллера запускается на исполнение, для нее в качестве параметра задается специальный объект $scope. Он отвечает за ввод текста в текстовый редактор. Для того, чтобы вывести его на экран, нужно прописать дополнительные свойства и функции, которые описывают отображение его элементов. С помощью NG-моделей осуществляется связь кода сайта с текстом, который вводится в рабочее поле редактора. При вводе текста Angular задает соответствующие изменения переменных.

Форма заказа

В этом примере мы рассмотрим код формы заказы, в которой автоматически выводится общая сумма. Здесь использована еще одна полезная функция AngularJS — фильтры . Фильтры позволяют вносить изменения в модели, а также объединять их с помощью символа «|». В приведенном ниже примере, используется фильтр валюты , чтобы перевести числовое значение в корректный формат цены — с разделением долларов и центов. Когда вы рассмотрите пример № 4, вы сможете с легкостью задавать свои собственные фильтры.

Связка ng-repeat ( описание ) – это еще один полезный элемент Angular. Она позволяет запустить цикл обработки массива элементов, а также задать разметку для каждого из них. Она автоматически обновляет код, если один из элементов был изменен или удален.

Функция поиска

В этом примере приводится функция, позволяющая фильтровать список элементов по определенному критерию. Это еще одно направление, где с успехом может применяться AngularJS.

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

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

Для того, чтобы создать модуль приложения, нужно выполнить всего два действия:

  1. Использовать функцию angular.module(«name»,[]) при вызове JS. Это установит границы нового модуля;
  2. Задать имя модуля в качестве значения директивы ng-app.

После этого фильтр создается очень просто функцией filter(). Также просто потом вызвать его через обращение к соответствующему модулю angular.module(«name», []).

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

Функция переключения режима вывода элементов на странице

Еще одна популярная функция – переключение по выбору пользователя различных режимов вывода элементов на странице (список или плитка). Через Angular это делается очень просто.

Кроме того, в этом примере описывается еще один важный элемент фреймворка – сервисы. Это объекты, которые могут быть использованы приложениями для взаимодействия с сервером, API или другими источниками данных. В нашем случае, мы напишем сервис, который взаимодействует с Instagram’s API и выводит массив с самыми популярными на текущий момент фотографиями.

Обратите внимание, что для работы этого кода, нам потребуется использовать на странице дополнительный файл Angular.js:

Для оптимизации работы с AJAX API здесь используется модуль ngResource (в коде модуля задействована переменная $resource).

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

Например, во время тестирования, вы можете предпочесть выводить данные из четко заданного массива фотографий (без фильтров и обработки), что ускорит отладку всей системы.

Дополнительная литература

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

Сайт AngularJS
Руководство по AngularJS
Официальное пособие по AngularJS
Список сайтов, где представлено еще много информации по теме, видео и учебники

Данная публикация представляет собой перевод статьи « Learn AngularJS With These 5 Practical Examples » , подготовленной дружной командой проекта Интернет-технологии.ру

AngularJS. Работа с jQuery. jqLite

194 просмотра

3 ответа

1070 Репутация автора

Я использую angularJS для разработки приложений и использую пользовательский интерфейс JQuery в нескольких местах своего кода. 1. Будет ли это в конечном итоге в производительности, когда я использую JQuery в моем коде. 2. Зачем использовать angular, если я могу использовать JQuery / JQLite непосредственно для моего приложения.

Ответы (3)

-2 плюса

1 Репутация автора

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

плюса

122 Репутация автора

Angular — это фреймворк, а jQuery — библиотека. Вы не можете спросить «почему я должен использовать AngularJs вместо Jquery?» так как они не одинаковы.

Angular as Framework предоставляет множество мощных инструментов, которые могут помочь в создании веб-приложений. Однако, если вы не создаете что-то особенно сверх того, вы можете просто использовать несколько необходимых вам jQuery.

В целом все сводится к тому, что вы пытаетесь сделать. Если вы хотите построить мощный SPA с легкостью, Angular — это здорово. Если вы просто добавляете немного стиля в статическую веб-страницу, jQuery, вероятно, является лучшим подходом.

плюса

4120 Репутация автора

Ну, это довольно широкий вопрос!

Короче говоря, JQuery можно рассматривать как набор инструментов, а Angular — это фреймворк, поэтому он (надеюсь, положительно) влияет на дизайн приложения.

Блог Makeomatic: разработка сайтов и мобильных приложений

Angular VS jQuery

Ангуляр для jQuery разработчиков

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

jQuery сам по себе – это набор утилит для упрощения работы с DOM. Это обертка вокруг действий с DOM, а не инструмент для построения веб приложений. Мы очевидно можем использовать jQuery, чтобы строить интерактивные сайты, но это тоже самое что и использовать молоток, чтобы рубить дерево… Почему бы не купить пилу для этих целей?

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

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

Как мы разрабатываем веб-приложения с jQuery

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

Сначала мы создаем структуру нашего веб сайта, затем изменяем дизайн компонентов в CSS и добавляем интерактивность на страницу. Таким образом, мы как бы наслаиваем интерактивность на наш HTML код как запоздалое дополнение и принимаем интерактивность как что-то второсортное.

Почему не jQuery для разработки веб- приложений?

Во всем исходном коде мы постоянно создаем действия для конкретных элементов с конкретными идентификаторами. Что если член команды утверждает, что название message не достаточно точное? Мы полностью меняем DOM, чтобы соответствовать новому дизайну или мы добавляем новый функционал, который включает идентификатор name ?

Тесная связь

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

Беспорядок в коде

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

Низкоуровневые инструменты для высокоуровневой функциональности

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

Топ-пост этого месяца:  Урок 7. Webpack 4+. Webpack Dev Server

Angular использует другой подход к построению веб приложений: он воспринимает создание интерактивности как родной компонент веб-приложений и поощряет ее создание в течение всего рабочего процесса над приложением.

Следующие 8 идей всегда держите в голове, когда строите Angular приложения:

1) Добавляйте интерактивность к странице прямо в ее разметке

Когда мы пишем наши приложения на Angular, мы не разделяем то, как мы создаем разметку страницы и описываем взаимодействия с ней; мы определяем функциональность прямо в html. Если мы хотим произвести действие после нажатия на кнопку, то мы прикрепляем действие прямо к кнопке:

Это позволяет нам делать код понятным и декларативным. В добавок DOM нам явно говорит, что он сделает в браузере.

Императивное программирование: говорить «машине» как что-то сделать и, в результате, все что вы хотите, чтобы случилось — случится.

Декларативное программирование: говорить «машине» что вы хотите сделать и давать компьютеру разобраться с тем, как это сделать.

2) Оставьте DOM в покое

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

Добро пожаловать

Ни при каких условиях в этом примере мы не должны напрямую изменять DOM. Этот факт позволяет нам создавать и проектировать HTML одновременно.

3) Создание архитектуры приложения

Создание Angular приложения позволяет нам думать с точки зрения построения самого приложения. Мы можем сфокусироваться на функциональности, начиная с понимания того как приложение взаимодействует с серверным АПИ, и заканчивая тем какое действие должно произойти когда мы нажмем на кнопку.
Мы должны думать о том, как разделить функционал нашего приложения на маленькие компоненты, которые позволяют легко расширять и тестировать наше приложение.

4) Оставим jQuery безучастным

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

5) Вид – ядро приложения

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

Директива fs-modal , использованная, выше отчетливо демонстрирует, какие задачи выполняет элемент div . В отличии от неприятной ситуации, когда мы добавляем функционал во внешнем документе, единственный способ изменить выполняемые видом задачи — это изменить HTML код.

6) Модели обновляют вид, который обновляет модели.

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

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

К примеру, чтобы показать индикатор загрузки, мы можем установить булев флаг, который показывает или скрывает элемент, основываясь на значении модели:

Теперь, когда мы загружаем наши данные, мы можем включить этот «переключатель» ( делая isLoading равным true ). Когда мы закончим с загрузкой данных, мы можем переключить значение модели обратно в false и индикатор будет спрятан.

Попробуйте Данный код включит isLoading на 2 секунды, но не будет загружать никаких данных на самом деле Load new data
Если мы обновим модель в наших контроллерах, тогда и вид будет обновлен. Если мы меняем и воздействуем на модель в виде на экране, то модель в наших контроллерах также будет обновлена и все останется синхронизированным.

Магия Angular в том, что на протяжении всего процесса у нас вообще не должен возникать вопрос как, мы можем просто заниматься созданием требуемого функционала.

7) Зависимости, зависимости и зависимости — о, Господи!

Другая задача, которую Ангуляр отлично выполняет за нас в фоне — это внедрение зависимостей. Мы просто говорим Ангуляру, какие зависимости нам нужны и если Ангуляр сможет их найти, то он выполнит их загрузку за нас.

8) Разработка через тестирование

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

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

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

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

В заключение

Когда мы думаем в терминах Ангуляра, мы думаем о:

• Видах, не о DOM элементах
• Директивах, не о привязках действий
• Моделях как о проекциях видов
• Функциональном разделении

Чат приложение на jQuery

Например, предположим у нас есть простое чат приложение, созданное с помощью jQuery. Приложение невероятно простое и имеет следующие особенности:
• Позволяет пользователям вводить свое никнейм

• Позволяет пользователям вводить сообщение и отправлять его получателям- подписчикам чата.

• Показывать список пользователей, связанных с нашим чат приложением

Приложение, которое мы будем создавать имеет следующую HTML структуру (с убранными стилями для упрощения)

Когда форма отправлена, функция addMessage()будет вызвана и у значения username и message будут доступны нам… но где же мы можем их получить?

##$scope
$scope – это «клей» между видом и контроллером. Все, что мы привязываем к виду станет доступным в $scope контроллера и наоборот. Таким образом, мы можем просто изменять массив сообщений в нашем scope, изменится и вид.

Функция addMessage() выглядит таким образом:

##Ага, это все!
Ангуляр позаботится о загрузке данных из модели в DOM и отрисует наш вид.

Ссылки на признаки в структурах

у меня есть черта Foo

и структура, которая ссылается на эту черту

пытаясь скомпилировать, я получаю

изменение структуры к

говорит error: missing lifetime specifier

изменение определения на

однако, когда я хочу, чтобы функция возвращала foo on bar — что-то вроде:

Ну, очевидно, bar.foo это Box , так что ожидаемо я error: reference to trait `Foo` where a type is expected; try `Box ` or `&Foo`

но теперь я понимаю error: cannot move out of dereference of `&`-pointer при попытке разыменования self .

  1. почему & на bar структура работы? Я предполагаю, что я должен боксировать поскольку структуры имеют заданный макет памяти, поэтому мы должны сказать, что это указатель к черте (как мы не можем знать, как большой, что будет), но почему компилятор предлагает что-то, что не компилируется?
  2. почему я не могу разыменовать self на get_foo() — все примеры, которые я видел, используют заимствованные self синтаксис?
  3. каков смысл удаления & и просто используя self ?

изучение ржавчины увлекательно, но безопасность памяти одновременно увлекательна и пугает!

код полностью компилируется:

2 ответов

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

действительно, когда вы используете признак в качестве типа, базовый объект должен храниться где-то, поскольку объекты признака фактически являются ссылками на объект, реализующий данный признак. Вот почему вы не можете иметь голый MyTrait как тип, он должен быть либо ссылкой &MyTrait или Box .

ссылки

первый способ вы попробовали было со ссылкой, и компилятор пожаловался на отсутствующий спецификатор времени жизни:

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

в идея вот добавить lifetimes:

то, что вы говорите здесь компилятору : «мой объект Bar не может пережить ссылку Foo внутри него». Вы должны указать время жизни два раза: один раз для времени жизни ссылки и один раз для самого объекта признака, потому что признаки могут быть реализованы для ссылок, и если базовый объект является ссылкой, Вы также должны указать его время жизни.

на специальном случае было бы пишу:

в этом случае ‘static требует, чтобы базовый объект должен быть реальной структурой или &’static ссылка, но другие ссылки не будут разрешены.

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

вы в конечном итоге с чем-то вроде этого :

Коробок

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

если вы знаете, что базовый объект не может быть ссылкой, Вы также можете написать:

и проблема жизни полностью исчезает.

конструкция объекта таким образом подобна, но проще, поскольку вам не нужно хранить базовый объект самостоятельно, он обрабатывается box:

в этом случае ‘static версия будет :

с голым значением

чтобы ответить на ваш последний вопрос:

что подразумевает удаление & и просто использование self?

если метод имеет такое определение:

это означает, что он будет потреблять ваш объект в процессе, и после вызова bar.unwrap() , вы не сможете использовать bar любой длиннее.

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

AngularJS. Работа с jQuery. jqLite

194 просмотра

3 ответа

1070 Репутация автора

Я использую angularJS для разработки приложений и использую пользовательский интерфейс JQuery в нескольких местах своего кода. 1. Будет ли это в конечном итоге в производительности, когда я использую JQuery в моем коде. 2. Зачем использовать angular, если я могу использовать JQuery / JQLite непосредственно для моего приложения.

Ответы (3)

-2 плюса

1 Репутация автора

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

плюса

122 Репутация автора

Angular — это фреймворк, а jQuery — библиотека. Вы не можете спросить «почему я должен использовать AngularJs вместо Jquery?» так как они не одинаковы.

Angular as Framework предоставляет множество мощных инструментов, которые могут помочь в создании веб-приложений. Однако, если вы не создаете что-то особенно сверх того, вы можете просто использовать несколько необходимых вам jQuery.

В целом все сводится к тому, что вы пытаетесь сделать. Если вы хотите построить мощный SPA с легкостью, Angular — это здорово. Если вы просто добавляете немного стиля в статическую веб-страницу, jQuery, вероятно, является лучшим подходом.

плюса

4120 Репутация автора

Ну, это довольно широкий вопрос!

Короче говоря, JQuery можно рассматривать как набор инструментов, а Angular — это фреймворк, поэтому он (надеюсь, положительно) влияет на дизайн приложения.

Блог Makeomatic: разработка сайтов и мобильных приложений

Angular VS jQuery

Ангуляр для jQuery разработчиков

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

jQuery сам по себе – это набор утилит для упрощения работы с DOM. Это обертка вокруг действий с DOM, а не инструмент для построения веб приложений. Мы очевидно можем использовать jQuery, чтобы строить интерактивные сайты, но это тоже самое что и использовать молоток, чтобы рубить дерево… Почему бы не купить пилу для этих целей?

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

Топ-пост этого месяца:  Теги форматирования текста в HTML

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

Как мы разрабатываем веб-приложения с jQuery

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

Сначала мы создаем структуру нашего веб сайта, затем изменяем дизайн компонентов в CSS и добавляем интерактивность на страницу. Таким образом, мы как бы наслаиваем интерактивность на наш HTML код как запоздалое дополнение и принимаем интерактивность как что-то второсортное.

Почему не jQuery для разработки веб- приложений?

Во всем исходном коде мы постоянно создаем действия для конкретных элементов с конкретными идентификаторами. Что если член команды утверждает, что название message не достаточно точное? Мы полностью меняем DOM, чтобы соответствовать новому дизайну или мы добавляем новый функционал, который включает идентификатор name ?

Тесная связь

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

Беспорядок в коде

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

Низкоуровневые инструменты для высокоуровневой функциональности

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

Angular использует другой подход к построению веб приложений: он воспринимает создание интерактивности как родной компонент веб-приложений и поощряет ее создание в течение всего рабочего процесса над приложением.

Следующие 8 идей всегда держите в голове, когда строите Angular приложения:

1) Добавляйте интерактивность к странице прямо в ее разметке

Когда мы пишем наши приложения на Angular, мы не разделяем то, как мы создаем разметку страницы и описываем взаимодействия с ней; мы определяем функциональность прямо в html. Если мы хотим произвести действие после нажатия на кнопку, то мы прикрепляем действие прямо к кнопке:

Это позволяет нам делать код понятным и декларативным. В добавок DOM нам явно говорит, что он сделает в браузере.

Императивное программирование: говорить «машине» как что-то сделать и, в результате, все что вы хотите, чтобы случилось — случится.

Декларативное программирование: говорить «машине» что вы хотите сделать и давать компьютеру разобраться с тем, как это сделать.

2) Оставьте DOM в покое

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

Добро пожаловать

Ни при каких условиях в этом примере мы не должны напрямую изменять DOM. Этот факт позволяет нам создавать и проектировать HTML одновременно.

3) Создание архитектуры приложения

Создание Angular приложения позволяет нам думать с точки зрения построения самого приложения. Мы можем сфокусироваться на функциональности, начиная с понимания того как приложение взаимодействует с серверным АПИ, и заканчивая тем какое действие должно произойти когда мы нажмем на кнопку.
Мы должны думать о том, как разделить функционал нашего приложения на маленькие компоненты, которые позволяют легко расширять и тестировать наше приложение.

4) Оставим jQuery безучастным

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

5) Вид – ядро приложения

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

Директива fs-modal , использованная, выше отчетливо демонстрирует, какие задачи выполняет элемент div . В отличии от неприятной ситуации, когда мы добавляем функционал во внешнем документе, единственный способ изменить выполняемые видом задачи — это изменить HTML код.

6) Модели обновляют вид, который обновляет модели.

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

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

К примеру, чтобы показать индикатор загрузки, мы можем установить булев флаг, который показывает или скрывает элемент, основываясь на значении модели:

Теперь, когда мы загружаем наши данные, мы можем включить этот «переключатель» ( делая isLoading равным true ). Когда мы закончим с загрузкой данных, мы можем переключить значение модели обратно в false и индикатор будет спрятан.

Попробуйте Данный код включит isLoading на 2 секунды, но не будет загружать никаких данных на самом деле Load new data
Если мы обновим модель в наших контроллерах, тогда и вид будет обновлен. Если мы меняем и воздействуем на модель в виде на экране, то модель в наших контроллерах также будет обновлена и все останется синхронизированным.

Магия Angular в том, что на протяжении всего процесса у нас вообще не должен возникать вопрос как, мы можем просто заниматься созданием требуемого функционала.

7) Зависимости, зависимости и зависимости — о, Господи!

Другая задача, которую Ангуляр отлично выполняет за нас в фоне — это внедрение зависимостей. Мы просто говорим Ангуляру, какие зависимости нам нужны и если Ангуляр сможет их найти, то он выполнит их загрузку за нас.

8) Разработка через тестирование

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

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

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

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

В заключение

Когда мы думаем в терминах Ангуляра, мы думаем о:

• Видах, не о DOM элементах
• Директивах, не о привязках действий
• Моделях как о проекциях видов
• Функциональном разделении

Чат приложение на jQuery

Например, предположим у нас есть простое чат приложение, созданное с помощью jQuery. Приложение невероятно простое и имеет следующие особенности:
• Позволяет пользователям вводить свое никнейм

• Позволяет пользователям вводить сообщение и отправлять его получателям- подписчикам чата.

• Показывать список пользователей, связанных с нашим чат приложением

Приложение, которое мы будем создавать имеет следующую HTML структуру (с убранными стилями для упрощения)

Когда форма отправлена, функция addMessage()будет вызвана и у значения username и message будут доступны нам… но где же мы можем их получить?

##$scope
$scope – это «клей» между видом и контроллером. Все, что мы привязываем к виду станет доступным в $scope контроллера и наоборот. Таким образом, мы можем просто изменять массив сообщений в нашем scope, изменится и вид.

Функция addMessage() выглядит таким образом:

##Ага, это все!
Ангуляр позаботится о загрузке данных из модели в DOM и отрисует наш вид.

Getting Started with AngularJS

This chapter is from the book

This chapter is from the book

This chapter is from the book 

AngularJS is a JavaScript framework that provides a very structured method of creating websites and web applications. Essentially, AngularJS is a JavaScript library that is built on a lightweight version of jQuery—a combination that enables AngularJS to provide the best of JavaScript and jQuery and at the same time enforce a structured Model View Controller (MVC) framework.

AngularJS is a perfect client-side library for most web applications because it provides a very clean and structured approach. With a clean, structured front end, you will find that it is much easier to implement clean, well-structured server-side logic.

This chapter introduces you to AngularJS as well as the major components involved in an AngularJS application. Understanding these components is critical before you try to implement an AngularJS application because the framework is different from more traditional JavaScript web application programming.

After you have a good grasp of the components and the life cycle of an AngularJS application, you’ll learn how to construct a basic AngularJS application, step-by-step. This should prepare you to jump into the following chapters, which provide much more detail on implementing AngularJS.

Why AngularJS?

AngularJS is an MVC framework that that is built on top of JavaScript and a lightweight version of jQuery. MVC frameworks separate the business logic in code from the view and the model. Without this separation, JavaScript-based web applications can quickly get out of hand when you are trying to manage all three together and a complex maze of functions.

Everything that AngularJS provides, you could implement yourself by using JavaScript and jQuery, or you could even try using another MVC JavaScript framework. However, AngularJS has a lot of functionality, and the design of the AngularJS framework makes it easy to implement MVC in the correct manner. The following are some of the reasons to choose AngularJS:

  • The AngularJS framework forces correct implementation of MVC and also makes it easy to implement MVC correctly.
  • The declarative style of AngularJS HTML templates makes the intent of the HTML more intuitive and makes the HTML easier to maintain.
  • The model portion of AngularJS is basic JavaScript objects, making it easy to manipulate, access, and implement.
  • AngularJS uses a declarative approach to extend the functionality of HTML by having a direct link between the HTML declaratives and the JavaScript functionality behind them.
  • AngularJS provides a very simple and flexible filter interface that enables you to easily format data as it passes from the model to the view.
  • AngularJS applications tend to use a fraction of the code that traditional JavaScript applications use because you need to focus only on the logic and not all the little details, such as data binding.
  • AngularJS requires a lot less Document Object Model (DOM) manipulation than traditional methods and guides you to put the manipulations in the correct locations in applications. It is easier to design applications based on presenting data than on DOM manipulation.
  • AngularJS provides several built-in services and enables you to implement your own in a structured and reusable way. This makes your code more maintainable and easier to test.
  • Due to the clean separation of responsibilities in the AngularJS framework, it is easy to test your applications and even develop them using a test-driven approach.

Webpack: как сделать угловые автоопределения Jquery и использовать его как angular.element вместо jqLite?

Я использую Webpack построить угловую 1.4 проекта. Проект использует несколько плагин JQuery, которые обернуты в угловые директивы. Эти директивы внутренне использовать angular.element , вероятно , это означает , что angular.element является реальным JQuery, не jqLite.

Я хочу угловатых автоопределения Jquery и использовать его вместо jqLite. Я пытался требовать JQuery локально в моем модуле точки входа app.js : require(‘jquery’) и выставить JQuery глобально с require(expose?$!expose?jQuery!jquery) .

Тем не менее, все , что я делаю, angular.element относится к jqLite.

Мои исследования привели к нескольким выводам:

Добавить комментарий