Полезные для работы с Angular примеры решения задач использование различных функций

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

React для Angular-разработчиков

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

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

Фреймворки против библиотек

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

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

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

Возможности из коробки

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

  • шаблоны HTML с динамическими выражениями в фигурных скобках << >>
  • встроенные директивы типа ng-model , ng-repeat и ng-class для расширения возможностей HTML
  • контроллеры для группирования логики и передачи данных в представление
  • двухстороннее связывание как простой способ синхронизации контроллера и представления
  • большая коллекция модулей, таких как $http для коммуникации с сервером и ngRoute для маршрутизации
  • кастомные директивы для создания собственного синтаксиса HTML
  • инъекция зависимостей для ограничения доступа объектов к отдельным частям приложения
  • сервисы для общей бизнес-логики
  • фильтры для хелперов, форматирующих представления

С другой стороны, вот арсенал React:

  • синтаксис JSX для шаблонов с выражениями JavaScript в одиночных скобках
  • компоненты, напоминающие директивы элементов в Angular

React не предъявляет требований к структуре вашего приложения и рекомендует использовать стандартный API JavaScript поверх абстракций фреймворка. Здесь нет аналога $http — вы можете использовать для коммуникации с сервером fetch(). Вы свободны в конструировании сервисов и фильтров, но React не предоставляет никакого слоя абстракции для управления ими. Вы можете поместить их в модули JavaScript и подключать по необходимости в своих компонентах.

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

Инициализация

Для инициализации приложения Angular требуется модуль, список зависимостей и корневой элемент.

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

Шаблоны

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

В компонентах React данные всегда передаются в одном направлении: от вершины дерева компонента вниз к узлам. JSX является самым распространенным синтаксисом для написания компонентов, трансформирующим структуру XML в JavaScript. Несмотря на сходство с синтаксисом шаблонов, это компилируется в вызовы вложенных функций.

Показанный ниже скомпилированный код помогает уяснить, как наши выражения JSX выглядят в вызовах функции createElement(component, props, children) .

Директивы шаблонов

Рассмотрим, как можно реализовать некоторые наиболее используемые директивы шаблонов Angular с помощью компонентов React. Так как в React нет шаблонов, в наших примерах мы взглянем на код JSX, расположенный внутри функции render компонента, как здесь:

Директива ng-repeat

Мы можем использовать стандартные механизмы цикла в JavaScript, чтобы получить массив элементов в JSX.

Директива ng-class

В React мы своими силами создаем списки классов для свойства className . Обычно для этого используется какая-нибудь готовая функция типа classNames от Джеда Уотсона.

Атрибуты в JSX стоит рассматривать как непосредственное присваивание атрибутов узлу. Именно поэтому функция называется className , а не по названию атрибута class

Директива ng-if

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

Директивы ng-show / ng-hide

В React вы можете задавать стили непосредственно или путем добавления служебного класса в CSS типа .hidden < display: none >, чтобы скрывать элементы (на самом деле Angular обрабатывает их тем же самым образом).

Вам надо потратить время и потренироваться с этим. Вместо использования специального синтаксиса шаблонов и атрибутов надо добиваться того же результата с помощью JavaScript.

Сравнение на примере компонента слайдшоу

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

Слайдшоу в Angular

В React этот компонент должен выводится внутри другого компонента и передавать данные слайдов через props.

У компонентов React есть локальное пространство this.state , которое вы можете модифицировать, вызывая this.setState(< key: value >) . Все изменения состояния влекут новый рендеринг компонента.

События в React выглядят как олдскульные строчные обработчики событий типа onClick . Не заморачивайтесь по этому поводу, под капотом там работают высокопроизводительные делегированные обработчики событий.

Слайдшоу в React

Двухстороннее связывание

В Angular ng-model и $scope формируют связь, по которой данные перетекают вперед и назад между элементом формы и объектом JavaScript в контроллере.

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

в данном случае это “контролируемый input”, то есть его значение меняется только при вызове функции рендеринга (в примере выше это делается при каждом нажатии клавиш). Компонент сам отслеживает свое состояние, то есть управляет своими данными. Это не рекомендуется делать для большинства компонентов, в идеале компоненты не должны отслеживать свое состояние, данные должны передаваться через props .

Обычно отслеживающий компонент-контейнер или контроллер представления располагается вверху дерева, а не отслеживающие дочерние компоненты располагаются ниже, более подробная информация есть в разделе документации What Components Should Have State?

Вызов методов родительского элемента

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

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

Инъекция зависимостей, сервисы и фильтры

Модули JavaScript это намного лучший способ обработки зависимостей, вы можете их использовать с помощью Webpack, SystemJS или Browserify.

Звучит отлично, дайте две

Да. Мы можем выводить компоненты React внутри существующего приложения Angular, у Бена Надела есть хороший пост со скринкастом о рендеринге компонентов React внутри директивы Angular. Также есть модуль Angular ngReact, предоставляющий директиву react-component , действующую как клей между React и Angular.

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

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

Как насчет Angular 2?

Компоненты в Angular 2 во многом напоминают компоненты React. У образцов компонентов в документации есть аналогичные класс и шаблон, похожими выглядят события, в документации показано как строить представления используя иерархию компонентов так, как если бы вы это делали в React, а для инъекции зависимостей используются модули ES6.

Большая часть работы над Angular 2 заключалась в повышении эффективности обновления DOM. Старый синтаксис шаблонов и сложность зоны видимости влекли множество проблем с производительностью в больших приложениях.

Полное приложение

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

Возможно, вас заинтересует этот образец, чтобы сравнить различия в React и Angular, пример React написан на CoffeeScript с CJSX, который мне нравится до сих пор (декабрь 2015). Сообщество React ориентируется на ES6 с Babel и Webpack, поэтому сейчас я рекомендую использовать именно их.

А вот для сравнения образцы простого приложения TodoMVC:

Ресурсы для изучения

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

Производительность Angular: оптимизация шаблонных выражений

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

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

Совет: используйте Bit (GitHub) для ваших Angular компонентов. Это поможет вам организовать, обмениваться и повторно использовать их между приложениями, чтобы быстрее создавать приложения. Также интересно обнаружить ваши компоненты в визуальной коллекции, попробовать игровую площадку и установить код.

Выражения в шаблонах

Давайте начнем с примера:

У нас есть две привязки в нашем шаблоне: viewRun и count . Это говорит Angular, что поле в шаблоне является динамическим, то есть оно будет динамически обновляться во время запуска CD Angular.

count является свойством a viewRun методом ChatComponent. Когда Cd запускается на ChatComponent, Angular получает текущее значение свойства count и заменяет его на <> в шаблоне. viewRun будучи функцией, выполняется и возвращаемое значение заменяет в шаблоне выражение <> .

Вы видите, почему они называются привязками. Они склеивают свойства / методы компонента класса с представлением. При каждом нажатии кнопки Click Me , свойство count увеличивается на 1. Теперь приращение обновляется в представлении <> при каждом запуске CD.

Запуск CD на Angular запускается:

  • Асинхронные события:
  • События DOM, например, клик, изменения, наведение мыши и т.д.
  • setTimeout, setInterval и т.д.
  • Неявный вызов CD компонентом.

Узкое место в производительности в выражениях шаблонов

Всякий раз, когда CD запускается на ChatComponent, привязки запускаются и обновляются. Привязки в компоненте, особенно в функции viewRun, вызываются, и результат отображается в DOM во время интерполяции DOM.

На самом деле мы вызываем функцию в шаблоне компонента ChatComponent. Что произойдет, если функция ‘viewRun’ не завершится быстро? Пользователи будут испытывать дергание или замедление.

В демонстрационных целях давайте заставим функцию ‘viewRun’ выполняться очень медленно, например, несколько секунд до ее завершения.

Видите, мы запустили viewRun за 20 секунд! Это огромное снижение производительности. Таким образом, пользователям придется подождать более 20 секунд, чтобы увидеть что-то на экране.

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

Оптимизировать выражения шаблона

Давайте посмотрим на другой пример:

У нас есть два компонента, Users и компоненты App. В компоненте Users он перечисляет данные пользователей, хранящиеся в массиве, используя директиву *ngFor . Он отображает имя, идентификатор и факторный номер идентификатора пользователя. Компонент Users — это OnPush компонент, это «чистый» компонент в том смысле, что Angular обновляет компонент при изменении входных привязок в компоненте. Когда мы нажимаем кнопку Add A User , новый пользователь добавляется в массив users , это вызывает повторный рендеринг компонента Users для отображения нового пользователя.

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

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

Мы будем использовать Caching / Memoization, чтобы наша функция факториала выполнялась реже. Что это значит?

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

Чтобы найти факториал числа, его умножают на его разность.

Посмотри на 4! = 4 * 3 * 2 * 1, знаете ли вы, что мы можем рассчитать только для 4 * 3 и вернуть его предыдущий расчет 2!. Вместо того, чтобы вычислять все заново, тогда как мы уже сделали это ранее.

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

Изменим функцию factorial:

Вот это да!! много кода. Все, что мы здесь сделали, это просто посмотрим на число в объекте кеша factorial.cache , если он присутствует, возвращается результат, если нет, выполняется поиск факториала, а результат добавляется в кеш и возвращается.

Давайте проверим это.

Отлично!! как мы и ожидали. Если мы применим это к нашему компоненту Users, мы значительно минимизируем частоту глубоких вычислений, не запутывая их, функция factorial всегда будет вызываться при изменении входных привязок и срабатывании CD, мы просто оптимизировали его, чтобы не делать ненужные вычисления, которые он ранее уже делал.

Используем чистые Pipe

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

Примерами чистых Pipe в Angular являются Decimal pipe, Number pipe, Percent pipe, Currency pipe и Date pipe.

Эти pipe чисты, потому что:

  • У них нет побочных эффектов
  • Они возвращают определенный вывод для конкретного ввода.

Возьмем Date pipe в качестве примера

Теперь, когда мы в первый раз его вызвали 10 June 1985 , Angular оценит выражение, но при последующих вызовах с тем же вводом выражение будет оцениваться не ранее, а в prev. значение будет возвращено, потому что аргументы не изменились.

Давайте сделаем нашу факториальную функцию чистым pipe:

Видите, мы переместили некэшированную версию нашей факториальной функции в чистый канал, нам больше не понадобится наша кэшированная версия, которую Angular предоставит нам!!

Теперь мы можем удалить выражение шаблона << factorial(user.id) >> и заменить его на << user.id | factorial >> .

Использование декораторов

Декоратор — это новая функция в TypeScript, добавленная для добавления дополнительной информации к классу, методу, свойству во время выполнения. Обозначается с помощью символа @ .

Angular сделал интенсивное использование декораторов:

Мы можем использовать декоратор для добавления механизмов кэширования в наше приложение.

У нас есть наш метод декоратора purify , он возвращает функцию, которая принимает три параметра: target класс метода, который будет декорирован; key название метода; descriptor объект, содержащий функцию / метод в свойстве value.

В реализации мы сохраняем исходную функцию в переменной oldFunc, затем запоминаем ее, передавая oldFunc функции memoize . Функция memoize является общей функцией , используемой для memoize функций. Возвращенная запомненная функция сохраняется в переменной newFunc. Затем мы присваиваем новую функцию свойству descriptor.value , реализация функции вызывает newFunc (запомненную версию) и возвращает значение.

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

Смотрите, мы украсили факториальный метод с @purify() . Давайте запустим это:

Видите, у нас есть кэш-промах на 2, потому что это первый раз, когда он вызывается в следующий раз, когда он будет возвращен из кеша. Для 4 мы имеем промах кэша для 4 и 3 и хит для 2, потому что 2 были кэшированы ранее. Если мы вызовем 6, у нас будет попадание в кэш для 4,3,2, но не для 6 и 5, потому что это первый раз, когда функция видит это.

Теперь давайте применим его к нашему компоненту класса Angular:

Заключение

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

В следующем цикле проверки производительности Angular мы рассмотрим, как оптимизировать директиву *ngFor в нашем шаблоне, чтобы избежать ненужных манипуляций с DOM.

Angular.JS. Быстрое знакомство с популярным фреймворком от Google

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

Проблемы JavaScript

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

Но неужели проблема только в отсутствии профессионалов? Ведь рано или поздно зеленые юнцы, рубящие с плеча, должны набраться опыта и превратится в продвинутых учителей своего дела. Конечно же, нет. Причины лежат в самом языке и его архитектурных проблемах. Разработку JavaScript можно сравнить с гонками формула 1 – спорт-кары развивают реактивную скорость, но крайне ненадежны. Времени на создание языка было потрачено непростительно мало. Добавим сюда внезапную смену концепции проекта (изначально JavaScript планировался как функциональный язык) и в итоге получим то, что получили. Местами запутанный синтаксис, непредсказуемость работы некоторых операторов, бесконечные нюансы со слабой типизацией, проблемы с областью видимости переменных и кучу других дефектов, способных нарушить психику людей, привыкших работать с нормальными языками.

Первым, кто отважился по-настоящему развернуть неповоротливый JavaScript, стал Джон Резиг. Он разглядел в гадком утенке невидимое изящество и отважился решить одну из самых важных на то время проблем: покончить с бесконечным переписыванием одного и того же кода. В то время он занимался разработкой сайта компании Brand Logic и нюансы JavaScript прочувствовал на собственной шкуре.

Результатом его рвения стал первый релиз библиотеки jQuery. Она должна была решить не только проблему одноразового кода, но и добиться хоть какой-то кросс-браузерности. Не оставленным без внимания остался и синтаксис JavaScript. Библиотека позволила сократить многие монструозные конструкции и стала неким кусочком синтаксического сахара. Каждый новый релиз библиотека совершенствовалась и вбирала в себя новые возможности. Сегодня jQuery является неотъемлемыми инструментом любого web-разработчика и представить современный сайт без ее использования (или альтернатив) уже проблематично.

Ну а дальше началось самое интересное. jQuery показала, что JavaScript способен на многое и возможно именно это послужило своеобразным пинком для многих игроков web’а. К языку стали относится более снисходительно и пытаться всячески развивать. Чего только стоит пример Google, подаривший нам быстрейший JavaScript-движок V8. Благодаря ему появилась возможность создавать тяжелые js приложения. Вновь открывшиеся перспективы стали подспорьем для создания принципиально новых технологий на базе JavaScript. Достаточно назвать Node.JS и сразу становится ясным, что сегодня JavaScript намного больше, чем скриптовый язык. Сегодня он готов взять на себя все этапы создания приложения (клиентскую и серверную часть) не прибегая к вспомогательным инструментам.

JavaScript-фреймворки

На смену библиотекам вроде jQuery в мир JavaScript стали приходить фреймворки, реализующие популярный паттерн MVC (MVVM, MVP и т.д.). Фреймворки стали приносить новую культуру разработки и альтернативные взгляды на устоявшиеся в умах девелоперов вещи. Все больше стали подниматься вопросы применения паттернов, хорошо зарекомендовавших себя в мире большего программирования, и в умах js-разработчиков наконец-то стала укладываться аксиома: «Нельзя мешать логику с представлением».

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

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

Лежащий в основе большинства современных фреймворков паттерн проектирования MVC хорошо зарекомендовал себя и теперь стал доступен для JavaScript мира. Конечно, особой новизны и революции в этом событии нет. Любой продвинутый разработчик может без всяких фреймворков спроектировать приложение, следуя этому паттерну. Однако «может» и «обязывают» разные вещи. Учитывая, что в JS сообществе на передовые методики долго все клали железный болт, то требование применение паттерна со стороны фреймворка будет весьма кстати.

Angular JS

Проект Angular.JS относительно новый. Впервые был представлен в 2009 году. За это время вышло несколько версий и вокруг продукта сколотилось плотное сообщество. Успех к проекту во многом определил его родитель – компания Google. К релизам корпорации добра гики относится с особым трепетом, особенно если речь идет об инструментарии для разработчиков. В этот раз получилось тоже самое. Не буду вдаваться в технические дебри, а лучше сразу расскажу, чем зацепил проект лично меня.

Он предельно прост

Angular.JS имеет достаточно низкий порог вхождения по сравнению со многими подобными решениями. Документация носит слегка противоречивый характер. Она вроде хорошо структурирована, есть примеры кода, но некоторые вещи освещены крайне слабо. С ними придется разбираться самостоятельно путем изучения исходников или комментариев от коллег по цеху. Например, трудности понимания работы scope (областей видимости) развеют комментарии Misko Hevery на StackOverflow и просмотр видео «AngularJS. Best Practices» (http://goo.gl/UYG6Q).

Декларативный подход

Разработчики Angular.JS отошли от традиционной идеи: «HTML враг и нужно с ним бороться». Вместо этого они решили естественным образом расширить язык разметки, путем ввода дополнительных директив.

Тестирование

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

Выражения

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

Директивы Angular.JS

Директивы являются одной из ключевых возможностей Angular.JS. Они позволяют разработчику описать поведение отдельных элементов и расширить синтаксис HTML. В состав angular входит лишь базовый набор директив. Однако, никто не мешает нам его расширить своими собственными наработками. Правильно созданные директивы могут использоваться и в других проектах. Некоторые разработчики даже практикуют выкладывать свои коллекции компонент в публичный доступ. Ярким примером тому является команда AngularUI, которые выложили и поддерживают в актуальном состоянии порядка двадцати готовых к использованию компонент.

Я неспроста сказал, что директивы являются одной из ключевых возможностей. Начинающие разработчики частенько пропускают эту мысль мимо ушей и начинают мудрить по своему – изменяют напрямую DOM. Этого делать ни в коем случае нельзя. Почему? Во-первых, так гласят священные заповеди Angular.JS, а во-вторых разработчик лишается вкусностей вроде многоразового использования своих наработок, простого сопровождения кода и т.д.

Scope, производительность и мифы

О производительности Angular можно найти много негативных мнений. По некоторым заявлениям, производительность фреймворка недостаточно хороша и не годится для серьезных приложений. Например, нередко можно встретить примеры, авторы которых демонстрируют непригодность фреймворка для обработки нескольких десятков тысяч объектов. «Тормозит, ваш angular с его продвинутым биндингом!» — кричат ярые противники. При детальном рассмотрении примеров становится, очевидно, что проблема надуманна и их авторы не удосужились прочитать до конца документацию и вспомогательные материалы с официального блога.

Чтобы раз и навсегда развеять мифы о производительности разберемся с таинственной сущностью scope (область видимости). Scope – это не модель и ненужно пытаться ее из него делать. Ничего хорошего из этого не получится. В руководстве по angular четко сказано, что под моделью подразумевается любой массив данных, а scope может содержать ссылку на модель. Не нужно пихать все данные из модели в scope. Да, в таком контексте ими удобно манипулировать, но кроме тормозов никакой выгоды ты не получишь. Не стоит считать все вышесказанное банальным обходным маневром и отмазкой со стороны разработчиков angular. Это архитектура angular.js и с ней нужно считаться. Тем более, не стоит забывать о паттерне MVVM. Помимо традиционной сущности «модель» он выделяет «модель-представление» и в данном случае, scope это есть модель-представление, а значит, в ней должны быть данные, которые требуется отображать.

Получается, что наезды на производительность angular по большей части неуместны. Во всяком случае, на озвученных выше примерах. Хорошо, один миф разрушен. Но ведь, проблемы могут случиться (теоретически) и на более скромных объемах. Некоторые разработчики утверждают, что тормоза могут проявляться, когда в scope напихано ни много, ни мало, а 2000-3000 объектов. Как быть с этим аргументом? Частично ответ я уже дал – не нужно пихать в scope то, что не нужно отображать прямо сейчас. Вот серьезно, я не могу представить ни одной задачи, которая может потребовать вывод такого большего количества объектов на одной странице. Тут либо закралась ошибка в архитектуре приложения, либо разработчик неправильно трактует решаемую задачу.

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

Загрузка angular-приложения

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

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

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

    ToDo лист. Держим задачи под зорким надзором

    Я долго думал, какой лучше подобрать пример для демонстрации angular. Скажу честно, сначала у меня была грандиозная идея сотворить матерое расширение для браузера Google Chrome, способное взаимодействовать с различными сервисами корпорации добра. Но, к сожалению, до конца отладить весь задуманный функционал у меня не вышло. Что-то постоянно не работало и глючило. В итоге я решил рассмотреть классический пример – создание ToDo листа, а про разработку расширений для Google Chrome, когда-нибудь сделаю, с позволения редактора рубрики, отдельную статью.

    Для начала сформулируем задачу. Что из себя представляет типичный ToDo лист? В первую очередь – это список задач, которые необходимо выполнить в определенное время. Каждая задача это отдельный элемент, обладающий минимум двумя свойствами: наименование (описание задачи) и состояние.

    Представление

    Часть кода представления я привел в первом листинге, а полную версию ты всегда можешь взять с нашего диска. Любое angular приложение начинается с объявление директивы ngApp. Обрати внимание, что в коде название директив пишется через тире, а в хелпе и в тексте стать слитно. Для директивы ngApp можно указать дополнительный атрибут – имя модуля, который будет загружен при инициализации приложения. Пока оставим этот вопрос открытым, а в качестве имени модуля укажем todomvc. Далее я привожу описание формы с одним единственным полем. В него пользователь будет вводить новую задачу и при нажатии кнопки «Отправить» она будет отправляться в общий список.

    Обработать событие отправки данных введенных в форму поможет директива ngSubmit. Она позволяет забиндить действие, которое будет выполняться при отправке данных из формы. В нашем случае таким действием будет метод контроллера addTodo(). В теле метода будет описан код, добавляющий новую задачу в модель. Сам текст задачи будет вводиться в поле ввода, для которого я указываю директиву ngModel, тем самым устанавливая двухстороннюю привязку с моделью отображения.

    Теперь взглянем на вывод данных из модели. Каждая новая задача обрамляется тегом li, включающий в себя элементы управления: изменение состояния, редактирование или удаление. Функционал этих кнопок реализуется тем же способом, что и был применен для добавления новых задач. С одним лишь отличием, вместо директивы ngSubmit используется ngClick (обрабатываем клик по кнопке) или ngDblClick (двойной щелчок).

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

    Для пущей красоты нам необходимо позаботиться об альтернативном оформлении выполненных задач. По задумке, ко всем завершенным таскам должны применяться стиль «зачеркнуто». Эффективно решить эту задачу поможет директива ngClass. Она устанавливает класс оформления для определенного html элемента в зависимости от результата вычисления выражения.

    Последнее, что нуждается в пояснении – конструкция filter:statusFilter . Здесь filter – встроенная функция, позволяющая отфильтровать данные из массива todos, соответствующие значению переменной statusFilter (ее значение будет изменяться в контроллере).

    Контроллер

    В втором листинге я привел описание контроллера — ключевой части нашего примера. Контроллер в angular оформляется в виде обычной JavaScript-функции. Например: function MyController () .

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

    Правда, при вынесении контроллера в отдельный файл мы должны как-то сообщить angular, что в контексте нашего приложения необходимо использовать именно этот контроллер. Решением этого вопроса занимается директива ngApp. В качестве дополнительного атрибута она принимает имя модуля, который будет загружен при инициализации приложения. Под модулем в Angular подразумевается совокупность служб, директив, фильтров и различной вспомогательной информации, которая может быть использована для конфигурирования injector. Для нашего примера в качестве модуля я указываю «todomvc», а его создание описываю в файле app.js:

    Топ-пост этого месяца:  Для чего нужны в TypeScript модули синтаксис внутренних и внешних, примеры кода

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

    Давай разберем ее на кусочки:

  • todomvc – имя модуля (вспоминаем про директиву ngApp и файл app.js);
  • controller – служба, отвечающая за создание экземпляра контроллера. В качестве параметров мы должны передать название функции с контроллером и ссылка на объект, соответствующий контроллеру. Обрати внимание, как я передаю ссылку на объект контроллера. Поскольку отдельной функции контроллера у нас нет, то я ее определяю прямо в параметре.
  • function TodoCtrl($scope, $location, todoStorage) – функция, определяющая контроллер.В качестве параметров передаем:
  • $scope. Область видимости, созданная при объявлении директивы ngController;
  • $location. Служба, предназначенная для работы с URL, введенным в адресной строке браузера;
  • todoStorage. Самописная служба, созданная для взаимодействия с локальным хранилищем.

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

    С объявлением контроллера разобрались. Теперь посмотрим на его внутренности. В самой первой строчке я объявляю модель (todos), которая представляет собой обычный массив. В нем будут храниться все добавленные пользователем задачи. Чтобы получить список задач, который отображен в представлении в настоящее время, достаточно обратиться к свойству todos в scope. Однако, нас должны интересовать не только текущие данные, но и ранее сохраненные в локальном хранилище, которые мы можем получить через описанную мной службу todoStorage. После этих манипуляций, в модели будут абсолютно все данные.

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

  • значение, за которым требуется наблюдать;
  • функция, которая вызывается при изменении значения переданного в качестве первого параметра;
  • признак необходимости сравнивать объект;

    В теле функции, которая будет вызывать при изменении содержимого модели, я определяю всего лишь один метод – todoStorage.put(todos) . Он отвечает за сохранение списка задач в локальное хранилище.

    Чуть ниже по тексту второго листинга ты можешь увидеть похожий трюк. Только на этот раз следить нужно за изменением адресной строки. Появление параметра «active» означает необходимость установки фильтра, отображающего пользователю только невыполненные задачи. Ну а если в url присутствует параметр «completed», то делаем обратную операцию – невыполненные задачи скрываем, а завершенные отображаем.

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

    Тестируем

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

    Вместо заключения

    Однозначно, Angular.JS получился качественным и интересным решением, которое стоит применять в своих проектах. Компания Google вновь смогла удивить нас релизом хорошо продуманного продукта. Нельзя сказать, что он получился идеальным, но с возложенными на него задачами ему справиться под силу, а это самое главное. На этом спешу откланяться и пожелать тебе взглянуть иначе на мир JS разработки.

    Листинг 1. Представление

    Листинг 2. Контроллер в Angular.JS

    Листинг 3. Тестируем код контроллера

    Как изучать Angular.JS

    Братья по духу

    Как отладить Angular приложение

    При разработке на angular тебе однозначно понадобится дополнительный инструмент отладки. К счастью, такой инструмент уже создан и выполнен в виде расширения для Google Chrome. Называется оно Angular JS Batarag и после установки из Google Play расширение встраивается дополнительной примочкой в Developers Tools. Batarag позволит тебе просматривать иерархию scope, их содержимое и при желании изменять значения прямо из консоли. Более подробную информацию ты сможешь получить из видео, доступного на странице расширения в Google Play.

    Введение в AngularJS и простейший пример приложения

    | Среда, 5 июня, 2013

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

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

    В основном, статические документы становятся динамическими, используя два подхода:

    • Использование библиотеки: Набор функций облегчает написание приложений. Код приложения при необходимости вызывает функции библиотеки. (Пример: jQuery.)
    • Использование фреймворка: Это применение конкретной реализации веб-приложения, когда ваш код отвечает за детали. Здесь наоборот фреймворк это основа и он вызывает код приложения, который выполняет специфичную работу. (Пример: knockout, ember.)

    Полноценное решение на стороне клиента

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

    • Инструменты и техники для построения CRUD-приложений: связывание данных, базовые директивы, валидация форм, маршрутизация, глубокие ссылки, повторно используемые компоненты, внедрение зависимости.
    • Тестируемость: модульное тестирование (unit testing), тестирование end-to-end, фиктивные объекты (mocks), вспомогательные средства тестирования.
    • Базовое приложение с примером организации директорий и сценариями тестирования, в качестве стартовой точки разработки приложения.

    Где Angular не рекомендуется использовать

    Angular упрощает разработку приложения, предоставляя разработчику более высокий уровень абстракции. А любая абстракция жертвует гибкостью. Проще говоря, не любое приложение подходит Angular. Angular был создан в основном для CRUD-приложений. К счастью CRUD-приложения составляют 90% от всех веб-приложений. Чтобы понять подходит ли Angular для конкретного приложения, лучше объясним, когда приложению не нужен Angular.

    Игры или редакторы с богатым пользовательским интерфейсом — это примеры, где идет очень интенсивная работа с DOM-элементами. Этот вид приложений сильно отличается от CRUD-приложений, и соответственно, не очень подходит для Angular. В таких случаях нужно что-то близкое к голому металлу, наверно jQuery окажется более удачным выбором.

    Простейший пример приложения с Angular

    Рассмотрим простое CRUD-приложение, которое содержит форму. Значения формы отслеживаются и используются для вычисления общего результата, который форматируется к определенному виду. Вот некоторые общие ключевые моменты, с которыми разработчик столкнется:

    • Связывание модели данных с пользовательским интерфейсом.
    • Чтение и проверка данных введенных пользователем.
    • Вычисление новых значений на основе данных модели.
    • Форматирование вывода в нужном формате.

    Разберемся с тем, что происходит в примере выше. В теге с помощью директивы ng-app мы указали, что документ является приложением Angular. Также директива ng-app заставляет среду Angular автоматически выполнить инициализацию приложения.

    Angular 5 Material для начинающих

    Данный материал посвящен изучению Angular 5 Material. В примере будет использоваться именно пятая версия, потому что с новыми релизами появляются все новые и новые возможности в фреймворке. Так, например, переход с AngularJS на Angular 2 ознаменовался полной переработкой всего фреймворка.

    Начало работы с Angular 5 Material

    Для начала необходимо установить Angular CLI глобально во всей системе. Для этого нужно выполнить следующую команду:

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

    Создание проекта

    В командной строке выполните следующую команду:

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

    Установка Angular Material и Angular CDK

    В командной строке введите команду для установки компонентов и их зависимостей:

    Установка модуля Animations

    Для работы с Angular Material нужно установить модуль Animations:

    Теперь надо импортировать модули в файле app.module.ts :

    Затем нужно добавить новый модуль, который будет отвечать за Angular Material Components. Для этого создется файл в src/app с именем ngmaterial.module.ts :

    Теперь модуль MatButtonModule добавлен в приложение. Далее надо
    зарегистрировать MaterialAppModule в app.module.ts :

    Подключение тем оформления

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

    Для примера будем использовать заранее подготовленную тему Angular Material Indigo-Pink. Подключим ее в приложение, добавив следующую строку в style.css :

    Также подключим поддержку иконок в стиле material. Для этого добавим следующую строку в index.html :

    Поддержка жестов

    Некоторые элементы ( mat-slide-toggle , mat-slider , matTooltip ) используют HammerJS для обработки жестов. Для полной поддержки возможностей этих элементов надо подключить HammerJS в приложение.

    Это можно сделать несколькими способами: через npm, с использованием CDN (например Google CDN) или же напрямую из приложения.

    10 преимуществ использования фреймворка Angular.js при разработке веб-приложений

    Сегодня разработку одностраничных приложений сложно представить без Angular.js. Давайте вместе разберемся, что это за «фрукт» и какие у него преимущества.

    Во-первых, что такое Angular.js фреймворк? Это open source-фреймворк (не библиотека!), который позволяет создавать популярные сегодня одностраничные приложения. После запуска в 2009 году Angular.js быстро набрал популярность и не собирается сдавать позиции — он остается самым востребованным JavaScript-фреймворком на GitHub (в топе как по форкам, так и по количеству «звезд»).

    Ниже мы перечислили исчерпывающие причины, почему стоит выбрать AngularJS.

    1. Большое комьюнити

    Начнем с того, что у Angular.js огромнейшее комьюнити. В него входят как участники постоянной команды разработки, так и просто те, кто хотят внести свою лепту в развитие фреймворка с открытым исходным кодом. По Angular.js проходит множество конференций, о нем говорят на хакатонах и спорят в тематических ИТ-коммьюнити. Существует много книг и он-лайн ресурсов по Angular.js для разработчиков. Для клиентов это означает: выбрав Angular.js, вы будете не только в тренде, но и всегда сможете найти разработчиков для поддержки своего проекта.

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

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

    3. Использование директив

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

    4. Высокая скорость разработки

    При правильном подходе с помощью Angular.js можно быстро разрабатывать даже большие приложения.

    5. MVC из коробки

    В AngularJS используется схема MVC, разделяющая логику, представление и данные приложения:

    Это позволяет создавать одностраничные веб-приложения (Single Page Application). В Angular.js имеется служба $http, которая обеспечивает взаимодействие с удаленными HTTP-серверами с помощью XMLHttpRequest или JSONP. При передаче объекта JavaScript на сервер он будет автоматически преобразован в строку JSON. После получения ответа служба также попытается преобразовать полученную строку JSON в JavaScript. Используя службу $http можно создать собственную службу с полным контролем над обработкой URL и данных.

    6. Полезные фичи для SPA

    Angular.js для вебприложений – это как вода для рыб. Трудно представить, чтобы они могли существовать друг без друга. Например, Angular.js предоставляет возможности по работе с валидацией форм. Если на странице используются формы, FormController записывает их состояние. Используя эту информацию, мы можем задавать поведение HTML-элементов в UI (например, скрыть кнопку «Очистить форму», если пользователь еще не начал вводить данные в форму). Для обработки ошибок в Angular.js предусмотрены встроенные валидаторы (required, ng-required, ng-minlength, ng-pattern и другие), но при необходимости мы также можем создавать собственные. Сообщения об ошибках можно выводить как для всей формы, так и для ее отдельных полей.

    Шаблоны или темплейты в Angular.js представляют собой HTML-код, дополненный элементами и атрибутами Angular.js. Фреймворк дополняет шаблон информацией из модели, чтобы показать пользователю динамическую страницу. Для обработки данных и форматирования значений, полученных от модели, используются фильтры. Они позволяют показать нужные данные пользователю без необходимости вносить изменения в исходные данные.

    7. Модульность

    В Angular.js можно организовывать приложения из отдельных модулей. Такие модули могут как зависеть друг от друга, так и быть автономными. Например, в последнем случае модуль входа через Facebook можно использовать сразу в нескольких частях приложения, скажем, на странице входа и на странице оформления заказа. А благодаря встроенному механизму внедрения зависимостей Angular.js сам распознает ситуацию, когда нужно предоставить вспомогательные объекты, предоставляет их и связывает объекты между собой.

    8. Наличие готовых решений

    Что важно, для Angular.js существует огромное количество готовых решений, которые позволяют решать довольно разнообразные задачи, используя уже готовые модули. Например, существует несколько модулей для роутинга самый популярный из которых ui-router, так же есть различные модули для работы с таблицами ui-grid, ng-table и много других.

    Из-за отсутствия жесткой структуры проекта в AngularJS можно создавать приложения с достаточно разнообразной структурой. Также вы можете использовать AngularJS для мобильной разработки (разумеется, речь идет о создании так называемых гибридных приложений). Как использовать Angular.js фреймворк в этих целях можно почитать здесь.

    9. Двустороннее связывание данных

    В Angular.js применяется двустороннее связывание: любые изменения в пользовательском интерфейсе сразу же отражаются на объектах приложения и наоборот. Фреймворк сам следит за событиями браузера, изменениями модели и действиями пользователя на странице, чтобы сразу обновлять нужные шаблоны. При этом в коде JavaScript не требуется хранить ссылки на DOM-элементы и явно ими манипулировать. Мы просто описываем необходимый результат в терминах состояния модели, и нам не нужно использовать низкоуровневые конструкции.

    10. Простота тестирования

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

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

    1. Сложность освоения. Трудности обычно возникают у тех, кто раньше использовал библиотеку jQuery, ведь в отличие от Angular.js она полагается на выполнение манипуляций с деревом DOM.
    2. Замедление работы при использовании более 2000 вотчеров (или слушателей событий).
    3. Отсутствие обратной совместимости со второй версией. Разумеется, вы можете начать подготовку своего кода к миграции уже сейчас, но гарантий, что она пройдет гладко, нет.

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

    Нужен MVP, разработка под iOS, Android или прототип приложения? Ознакомьтесь с нашим портфолио и сделайте заказ уже сегодня!

    Знакомство с AngularJS

    Содержание статьи

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

    Темная сторона JavaScript

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

    Но неужели проблема только в отсутствии профессионалов? Ведь рано или поздно новички должны были превратиться в гуру? Да, должны, но причины лежали и в самом языке и его архитектурных проблемах. Разработку JavaScript можно сравнить с гонками «Формулы-1» — спорткары развивают реактивную скорость, но крайне ненадежны. Времени на создание языка было потрачено непростительно мало. Добавим сюда внезапную смену концепции проекта (изначально JavaScript планировался как функциональный язык) — и в итоге получили то, что получили. Местами запутанный синтаксис, непредсказуемость работы некоторых операторов, бесконечные нюансы со слабой типизацией, проблемы с областью видимости переменных и кучу других дефектов, способных нарушить психику людей, привыкших работать с нормальными языками.

    Первым, кто отважился по-настоящему развернуть неповоротливый JavaScript, стал Джон Резиг. Он разглядел в гадком утенке невидимое изящество и отважился взяться за одну из самых важных на то время проблем — покончить с беспрестанным переписыванием одного и того же кода. В то время он занимался разработкой сайта компании Brand Logic и нюансы JavaScript прочувствовал на собственной шкуре.

    Результатом его рвения стал первый релиз библиотеки jQuery. Она должна была не только решить проблему одноразового кода, но и добиться хоть какой-то кросс-браузерности. Не остался без внимания и синтаксис JavaScript. Библиотека позволила сократить многие монструозные конструкции и стала самым настоящим кусочком «синтаксического сахара». С каждым новым релизом библиотека совершенствовалась и вбирала в себя новые возможности. Сегодня jQuery входит в число обязательных инструментов любого веб-разработчика, и представить современный сайт без ее (или альтернатив) использования уже проблематично.

    Ну а дальше началось самое интересное. jQuery показала, что JavaScript способен на многое, и, возможно, именно это послужило своеобразным пинком для многих игроков веба. К языку стали относиться более снисходительно, и его начали всячески развивать. Чего только стоит пример Google, подаривший нам быстрейший JavaScript-движок V8! Благодаря ему появилась возможность создавать тяжелые JS-приложения. Открывшиеся перспективы стали подспорьем для создания принципиально новых технологий на базе JavaScript. Достаточно назвать Node.JS, и сразу становится ясно, что сегодня JavaScript намного больше, чем скриптовый язык. Сегодня он готов взять на себя все этапы создания приложения (клиентскую и серверную часть), не прибегая к вспомогательным инструментам.

    Они пришли с миром

    На смену библиотекам вроде jQuery в сообщество JavaScript стали приходить фреймворки, реализующие популярный паттерн MVC (MVVM, MVP и так далее). Фреймворки стали приносить новую культуру разработки и альтернативные взгляды на устоявшиеся в умах девелоперов вещи. Все больше стали подниматься вопросы применения паттернов, хорошо зарекомендовавших себя в мире большого программирования, и в умах JS-разработчиков наконец-то стала укладываться аксиома: «Нельзя мешать логику с представлением».

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

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

    Лежащий в основе большинства современных фреймворков паттерн проектирования MVC хорошо зарекомендовал себя и теперь стал доступен для JavaScript-мира. Конечно, особой новизны и революции в этом событии нет. Любой продвинутый разработчик может без всяких фреймворков спроектировать приложение, следуя этому паттерну. Однако «может» и «обязывают» — разные вещи. Учитывая, что в JS-сообществе на передовые методики долго все клали железный болт, то требование применять паттерн со стороны фреймворка будет весьма кстати.

    Хакер #174. Собираем квадрокоптер

    AngularJS

    Проект AngularJS относительно новый. Впервые он был представлен в 2009 году. За это время вышло несколько версий и вокруг продукта сколотилось плотное сообщество. Успех проекта во многом определил его родитель — компания Google. К релизам корпорации добра гики относятся с особым трепетом, особенно если речь идет об инструментарии для разработчиков. В этот раз получилось то же самое. Не буду вдаваться в технические дебри, а лучше сразу расскажу, чем зацепил проект лично меня.

    Как изучать AngularJS

    • Официальная документация goo.gl/uLYIh. Над ее составлением потрудились хорошо, и для первого легкого заплыва ее будет более чем достаточно.
    • Бесплатный видеокурс от egghead www.egghead.io. На момент написания статьи это был, пожалуй, самый большой видеокурс по применению AngularJS. Автор освещает темы биндинга, применения контроллеров/фильтров, тестирования и многое другое. Все насчитывается 42 видеоурока.
    • Вводные уроки на Code School goo.gl/YXBGA. Несмотря на большое количество видеоуроков по различным кодерским дисциплинам, AngularJS затронут слабенько. Всего два видео, но посмотреть их однозначно стоит.
    • Wiki на проекте docs.angularjs.ru goo.gl/20lCB. Проект стартовал в конце апреля этого года и нацелен на коллективный перевод официальной документации. Пока у ребят нет полноценного сайта, поэтому готовые части перевода они выкладывают на wiki популярного хостинга проектов GitHub. На момент написания этих строк процент переведенного материала достиг отметки 22%. Вполне возможно, что к выходу журнала перевод документации будет готов.
    • Статья «Практикум AngularJS — разработка административной панели», опубликованная на Хабре goo.gl/BLSvA, goo.gl/eSpBk.
    • Официальный твиттер-аккаунт goo.gl/TyLM0. Здесь всегда можно узнать последние новости и найти ссылки на свежие мануалы.
    • Отличная статья о моделях в AngularJs goo.gl/V0U2C.

    Предельная простота

    С одной стороны, AngularJS имеет достаточно низкий порог вхождения по сравнению со многими подобными решениями. С другой — документация носит слегка противоречивый характер. Она вроде бы хорошо структурирована, есть примеры кода, но некоторые вещи освещены крайне слабо. С ними придется разбираться самостоятельно, изучая исходники или запрашивая комментарии от коллег по цеху. Например, понять работу scope (областей видимости) помогут комментарии Мишко Хевери (Misko Hevery) на StackOverflow и просмотр видео AngularJS: Best Practices goo.gl/UYG6Q.

    Декларативный подход

    Разработчики Angular отошли от традиционной идеи: «HTML — враг, и нужно с ним бороться». Вместо этого они решили естественным образом расширить язык разметки, введя дополнительные директивы.

    Тестирование

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

    Выражения

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

    Директивы

    Директивы являются одной из ключевых возможностей Angular. Они позволяют разработчику описать поведение отдельных элементов и расширить синтаксис HTML. В состав Angular входит лишь базовый набор директив. Однако никто не мешает нам его расширить своими собственными наработками. Правильно созданные директивы могут использоваться и в других проектах. Некоторые разработчики даже практикуют выкладывание своих коллекций компонентов в публичный доступ. Ярким примером тому служит команда AngularUIgoo.gl/tauKU, которые выложили и поддерживают в актуальном состоянии около двадцати готовых к использованию компонентов.

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

    Scope, производительность и мифы

    О производительности Angular можно найти много негативных отзывов. По некоторым заявлениям, производительность фреймворка недостаточно хороша и не годится для серьезных приложений. Например, нередко можно встретить примеры, авторы которых демонстрируют непригодность фреймворка для обработки нескольких десятков тысяч объектов. «Тормозит ваш Angular с его продвинутым биндингом!» — кричат ярые противники. При детальном рассмотрении примеров становится очевидно, что проблема надуманна и их авторы не удосужились прочитать до конца документацию и вспомогательные материалы с официального блога.

    Чтобы раз и навсегда развеять мифы о производительности, разберемся с таинственной сущностью scope (область видимости). Scope — это не модель, и не нужно пытаться ее из него делать. Ничего хорошего из этого не получится. В руководстве по Angular четко сказано, что под моделью подразумевается любой массив данных, а scope может содержать ссылку на модель. Не нужно пихать все данные из модели в scope. Да, в таком контексте ими удобно манипулировать, но никакой выгоды ты не получишь, а только тормоза. Не стоит считать все сказанное банальным обходным маневром и отмазкой со стороны разработчиков Angular. Это архитектура Angular, и с ней нужно считаться. Тем более не стоит забывать о паттерне MVVM. Помимо традиционной сущности «модель», он выделяет «модель-представление», и в данном случае scope — это есть модель-представление, а значит, в ней должны быть данные, которые требуется отображать.

    Получается, что наезды на производительность Angular по большей части несправедливы. Во всяком случае, в озвученных выше примерах. Хорошо, один миф разрушен. Но ведь проблемы могут случиться (теоретически) и на более скромных объемах. Некоторые разработчики утверждают, что тормоза могут проявляться, когда в scope напихано ни много ни мало 2000–3000 объектов. Как быть с этим аргументом? Частично ответ я уже дал — не нужно пихать в scope то, что не требуется отображать прямо сейчас. Вот серьезно, я не могу представить ни одной задачи, которая может потребовать вывод такого большего количества объектов на одной странице. Тут либо закралась ошибка в архитектуре приложения, либо разработчик неправильно трактует решаемую задачу.

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

    Загрузка Angular-приложения

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

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

    По завершении загрузки начинается самая настоящая слежка за всеми биндингами. Если произойдут какие-нибудь события (например, банальный клик мышкой или ввод текста), то Angular немедленно обновит представление и биндинги.

    Как отладить Angular-приложение?

    При разработке на Angular тебе однозначно понадобится дополнительный инструмент отладки. К счастью, такой инструмент уже создан и выполнен в виде расширения для Google Chrome. Называется оно AngularJS Batarang goo.gl/jqEW7, и после установки из Google Play расширение встраивается дополнительной примочкой в Developers Tools. Batarang позволит тебе просматривать иерархию scope, их содержимое и при желании изменять значения прямо из консоли. Более подробную информацию ты сможешь получить из видео, доступного на странице расширения в Google Play.

    ToDo-лист. Держим задачи под бдительным надзором

    Я долго думал, какой лучше подобрать пример для демонстрации Angular. Скажу честно, сначала у меня была грандиозная идея сотворить матерое расширение для браузера Google Chrome, способное взаимодействовать с различными сервисами корпорации добра. Но, к сожалению, до конца отладить весь задуманный функционал у меня не вышло. Что-то постоянно не работало и глючило. В итоге я решил рассмотреть классический пример — создание ToDo-листа, а про разработку расширений для Google Chrome когда-нибудь сделаю, с позволения редактора рубрики, отдельную статью.

    Для начала сформулируем задачу. Что собой представляет типичный ToDo-лист? В первую очередь это список задач, которые необходимо выполнить в определенное время. Каждая задача — это отдельный элемент, обладающий минимум двумя свойствами: наименование (описание задачи) и состояние.

    ToDo-лист в работе

    Представление

    Часть кода представления я привел в первом листинге, а полную версию ты всегда можешь взять с нашего диска. Любое Angular-приложение начинается с объявления директивы ngApp. Обрати внимание, что в коде название директив пишется через дефис, а в хелпе и в тексте статьи слитно. Для директивы ngApp можно указать дополнительный атрибут — имя модуля, который будет загружен при инициализации приложения. Пока оставим этот вопрос открытым, а в качестве имени модуля укажем todomvc. Далее я привожу описание формы с одним единственным полем. В него пользователь будет вводить новую задачу, и при нажатии кнопки «Отправить» она будет отправляться в общий список.

    Листинг 1. Представление

    Обработать событие отправки данных, введенных в форму, поможет директива ngSubmit. Она позволяет забиндить действие, которое будет выполняться при отправке данных из формы. В нашем случае таким действием будет метод контроллера addTodo(). В теле метода будет описан код, добавляющий новую задачу в модель. Сам текст задачи будет вводиться в поле ввода, для которого я указываю директиву ngModel, тем самым устанавливая двухстороннюю привязку с моделью отображения.

    Теперь взглянем на вывод данных из модели. Каждая новая задача обрамляется тегом li, включающим в себя элементы управления: изменение состояния, редактирование или удаление. Функционал этих кнопок реализуется тем же способом, что был применен для добавления новых задач. С одним лишь отличием — вместо директивы ngSubmit используется ngClick (обрабатываем клик по кнопке) или ngDblClick (двойной щелчок).

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

    Для пущей красоты нам необходимо позаботиться об альтернативном оформлении выполненных задач. По задумке, ко всем завершенным таскам должен применяться стиль «зачеркнуто». Эффективно решить эту задачу поможет директива ngClass. Она устанавливает класс оформления для определенного HTML-элемента в зависимости от результата вычисления выражения.

    Последнее, что нуждается в пояснении, — конструкция filter:statusFilter. Здесь filter — встроенная функция, позволяющая отфильтровать данные из массива todos, соответствующие значению переменной statusFilter (ее значение будет изменяться в контроллере).

    Рисуем прототип будущего приложения

    Контроллер

    Во втором листинге я привел описание контроллера — ключевой части нашего примера. Контроллер в Angular оформляется в виде обычной JavaScript-функции. Например: function MyController ().

    Листинг 2. Контроллер

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

    Правда, при вынесении контроллера в отдельный файл мы должны как-то сообщить Angular, что в контексте нашего приложения необходимо использовать именно этот контроллер. Решением этого вопроса занимается директива ngApp. В качестве дополнительного атрибута она принимает имя модуля, который будет загружен при инициализации приложения. Под модулем в Angular подразумевается совокупность служб, директив, фильтров и различной вспомогательной информации, которая может быть использована для конфигурирования injector. Для нашего примера в качестве модуля я указываю «todomvc», а его создание описываю в файле app.js:

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

    Давай разберем ее на кусочки:

    • todomvc — имя модуля (вспоминаем про директиву ngApp и файл app.js);
    • controller — служба, отвечающая за создание экземпляра контроллера. В качестве параметров мы должны передать название функции с контроллером и ссылку на объект, соответствующий контроллеру. Обрати внимание, как я передаю ссылку на объект контроллера. Поскольку отдельной функции контроллера у нас нет, то я ее определяю прямо в параметре;
    • function TodoCtrl($scope, $location, todoStorage) — функция, определяющая контроллер. В качестве параметров передаем:
    • $scope. Область видимости, созданная при объявлении директивы ngController;
    • $location. Служба, предназначенная для работы с URL, введенным в адресной строке браузера;
    • todoStorage. Самописная служба, созданная для взаимодействия с локальным хранилищем.

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

    С объявлением контроллера разобрались. Теперь посмотрим на его внутренности. В самой первой строчке я объявляю модель (todos), которая представляет собой обычный массив. В нем будут храниться все добавленные пользователем задачи. Чтобы получить список задач, который отображен в представлении в настоящее время, достаточно обратиться к свойству todos в scope. Однако нас должны интересовать не только текущие данные, но и ранее сохраненные в локальном хранилище, которые мы можем получить через описанную мной службу todoStorage. После этих манипуляций в модели будут абсолютно все данные.

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

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

    В теле функции, которая будет вызываться при изменении содержимого модели, я определяю всего лишь один метод — todoStorage.put(todos). Он отвечает за сохранение списка задач в локальное хранилище.

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

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

    Тестируем

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

    Листинг 3. Тест для контроллера

    Братья по духу

    • Flight — новый проект от команды Twitter. Предыдущий их проект (Twitter Bootstrap) до сих пор почивает на лаврах, и, судя по всему, Flight рано или поздно к нему присоединится. Тем более что полюбить его есть за что: компонентный подход, не требует выбора определенного подхода для отображения данных, в основе лежит событийная модель (для связи между компонентами), поддержка функциональных примесей и другие полезные плюшки.
    • Backbone — фреймворк заинтересует заядлых любителей jQuery, которые устали разгребать тонны неструктурированного JS-кода. Backbone поможет навести порядок и разгрузить искусственно усложненные решения.
    • CanJS — один из самых легковесных и простых JS-фреймворков, призванных упростить разработку веб-приложений. Из коробки CanJS прекрасно уживается с популярными JS-библиотеками jQuery, Zepto, Mootols, Yui, Dojo.
    • Ember — MVC-фреймворк с низким порогом вхождения. Возможности бедней, чем у Backbone, но и разобраться новичкам с ним значительно проще. Из главных преимуществ стоит выделить наличие функционала, упрощающего рутинные операции. Для многих вещей кода писать требуется меньше, чем, скажем, для Backbone.
    • KnockoutJS — пропагандирует модель MVVM, хвастается шикарной реализацией биндингов, хорошей производительностью и нетребовательностью к сторонним библиотекам.

    Вместо заключения

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

    Топ-пост этого месяца:  Хотите увеличить продажи

    Что такое ангуляр – основные функции и принципы работы

    основные функции и принципы работы

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

    Зачем нужен фреймворк?

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

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

    На самом деле, JS фреймворки появились не так давно. Я помню, когда сайты писали с плохо структурированным JS кодом (в большинстве случаев под управлением jQuery). Однако клиентские UI становились все сложнее, и JS потерял репутацию «игрушечного» языка. Современные сайты сильно полагаются на JS, поэтому необходимость правильной организации (и тестирования!) кода возросла. Поэтому клиентские фреймворки стали популярны, и на данный момент их, как минимум, десяток.

    Введение в Angular: что такое Angular

    Раньше среди JS фреймворков AngularJS был любимчиком, так как был представлен корпорацией google в 2012. Он был построен по концепции Model-View-Controller. Авторы же фреймворка называли концепцию “Model-View-*” или даже “Model-View-Whatever”.

    Практический курс по созданию веб-приложения на Angular4

    Скачайте БЕСПЛАТНЫЙ мини-курс и изучите базовые возможности JavaScript-фреймворка Angular 4 за ближайшие 3 дня

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

    В частности, была представлена интересная концепция привязки данных, по которой представление автоматически обновляется при любом изменении модели и наоборот. Поверх этого представили идею директив, которые позволяют создавать собственные HTML теги и оживлять их через JS. Например, можно написать:

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

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

    AngularJS стал популярен очень быстро и получил большую поддержку. Тем не менее, разработчики решили пойти еще дальше и перешли к созданию новой версии Angular 2 (позже просто Angular без части JS). Фреймворк получил новое имя не просто так: он был полностью переписан и перепроектирован, а многие концепции были пересмотрены.

    Первый стабильный релиз Angular 2 опубликован в 2020, после чего AngularJS стал терять популярность в угоду новой версии. Одна из главных функций Angular 2 – возможность разрабатывать под несколько платформ: веб, мобильные устройства и нативный десктоп (AngularJS по умолчанию не имел мобильной поддержки).

    Чтобы еще сильнее все усложнить в конце 2020 вышел Angular 4. «А где же версия 3?», спросите вы. У меня был тот же вопрос. Как оказалось, версии 3 вообще не было опубликовано! Но как так? В официальном блоге разработчики объяснили, что с Angular 2 перешли на семантическое управление версиями.

    Следуя этому принципу, изменение основной версии (например, 2.х.х становится 3.х.х) означает переломные изменения. Проблема в том, что компонент Angular Router уже был в версии 3. Чтобы исправить это несоответствие, было принято решение пропустить Angular 3. К счастью, переход с Angular 2 на 4 прошел легче, чем с AngularJS на Angular 2, но разработчиков все же смутила вся эта путаница.

    В ноябре 2020 вышел Angular 5. Он совместим с предыдущими версиями Angular. Скоро должен выйти Angular 6 и должен привнести еще больше крутых функций и улучшений.

    Введение в Angular: преимущества Angular

    Так почему же Angular? Потому что он поддерживается на разных платформах (веб, мобильные устройства, нативный десктоп), он мощный, современный, у него отличная экосистема, и он просто крутой. Не убеждены? Позвольте немного углубиться в подробности:

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

    Это JS, но лучше. Angular построен на TypeScript, который, в свою очередь, полагается на ES6. Вам не нужно учить полностью новый язык, и вы получаете функции типа статической типизации, интерфейсов, классов, пространства имен, декораторы и т.д.

    Не нужно изобретать велосипед. В Angular уже есть много инструментов для создания приложения. Благодаря директивам, HTML элементы могут вести себя динамически. Вы можете усилить формы с помощью FormControl и представить различные правила валидации. Можно легко посылать асинхронные HTTP запросы различных типов. Можно без труда настроить маршрутизацию. В Angular есть еще много функций!

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

    Практический курс по созданию веб-приложения на Angular4

    Скачайте БЕСПЛАТНЫЙ мини-курс и изучите базовые возможности JavaScript-фреймворка Angular 4 за ближайшие 3 дня

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

    Тестирование в центре внимания. Angular тщательно протестирован и поддерживает юнит тесты и сквозное тестирование с помощью инструментов типа Jasmine и Protractor.

    Angular подготовлен к мобильным устройствам и десктопу – один фреймворк под множество платформ.

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

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

    Введение в Angular: сложности Angular

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

    Рекомендуется писать приложения Angular на TypeScript, поэтому его нужно понимать. Можно писать код на современном JS (ES6), но я редко вижу такое.

    TypeScript – надстройка JS. Поэтому ее тоже нужно знать.

    Чтобы еще сильнее ускорить процесс разработки, нужно понять Angular CLI.

    Для установки Angular и других компонентов активно используется npm. Его также нужно знать.

    Умение настраивать таск раннеры типа Gulp или Grunt также может пригодиться. С их помощью можно много чего сделать перед развертыванием приложения в продакшене.

    Сейчас широко используются минификаторы типа UglifyJS и упаковщики типа Webpack.

    Во время разработки приложения очень важно иметь возможность отлаживать код. Нужно уметь работать в инструментах отладки типа Augury.

    Очень важно тестировать приложения Angular, которые могут стать очень сложными. Один из самых популярных инструментов тестирования — Jasmine (фреймворк для тестирования) и Protractor (используется для сквозного тестирования).

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

    Стоит отметить, что иногда использовать Angular для приложения будет излишне. Если проект маленький или средний без сложного UI и взаимодействия, возможно, лучше взять старый добрый JS. Поэтому очень важно оценить все требования, функции нового приложения и дедлайны перед принятием решения об использовании JS фреймворка.

    Заключение

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

    Надеюсь, теперь вы понимаете основную идею Angular, и где он может пригодиться!

    Автор: Ilya Bodrov-Krukowski

    Источник: https://www.sitepoint.com/

    Редакция: Команда webformyself.

    Практический курс по созданию веб-приложения на Angular4

    Скачайте БЕСПЛАТНЫЙ мини-курс и изучите базовые возможности JavaScript-фреймворка Angular 4 за ближайшие 3 дня

    Angular 4. Быстрый старт

    Овладейте азами работы с Angular 4

    Что такое Angular? — Блог ITVDN

    Miško рассказал о том, как возникла идея создать фреймворк в интервью 2013 года:

    “Мы хотели понять, можно ли упростить работу веб-дизайнеров, а не только разработчиков. Смогут ли они добавить еще больше HTML в свой код, чтобы превратить обычную статическую форму во что-то более стоящее, что можно отправить по емейлу. Идея заключалась в следующем: будь у вас небольшой бизнес, продающий пиццу или что-либо другое, то вы могли бы добавить простую систему заказа, используя необходимые теги, и они действительно отправляли бы письмо на сервер.»

    Поскольку домен angular.com был занят – собственно, как и сейчас – создатели фреймворка переименовали Angular в GetAngular и выпустили небольшой сайт, на котором можно было узнать о всех фичах фреймворка.

    Домашняя страница Angular по состоянию на декабрь 2009 года (из Internet Archive).

    Скоро Miško начал работать в Google, а в 2010 году занялся проектом Google Feedback. Miško убедил своего менеджера, Brad Green, переписать проект, используя его Angular. Оптимизация сроков и кода, которые показала команда в работе, помогли убедить Google в силе Angular.

    Brad Green и Miško Hevery показывают, как много времени и сил удалось сэкономить на проекте, используя Angular. Это скриншот презентации на конференции ng-conf 2014 keynote, которую стоит посмотреть, если вы хотите знать всё о происхождении Angular.

    Вскоре после успеха Google Feedback та же команда переписала open-source библиотеку и в мае 2011 года была выпущена версия Angular 1.0. В течение нескольких лет Angular стремительно набирал популярность, и сегодня Google заявляет, что более 1,5 миллиона разработчиков используют Angular.

    Что делает Angular?

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

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

    Когда использовать Angular?

    Технически вы можете использовать Angular где угодно, но лучше всего он работает в нестандартных приложениях с данными. Если вы ознакомитесь с различными приложениями Angular, собранными на madewithangular.com, вы увидите реальные приложения, которые собирают данные из форм и работают с ними.

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

    Окончательный результат демо-приложения Tour of Heroes из Angular документации.

    Angular хорош в form-based приложениях, он подходит для больших и сложных приложений. Angular — не самый простой и не самый маленький фреймворк JavaScript. Следовательно, если вы создаёте нечто небольшое, вам лучше подобрать для работы фреймворк попроще, например, jQuery. Angular хорошо подойдёт для разработчиков приложений в средних и больших командах. Если вы разрабатываете приложение самостоятельно, может показаться, что шаблонного кода и конвенций разработки в Angular намного больше, чем вам нужно.

    Angular также хорошо подходит для приложений, которые должны работать в нескольких средах разработки. Если приложение должно работать на веб, а также на Windows или Maс, вы можете придерживаться одного из многочисленных туториалов для запуска Angular-приложений с популярным Electron project.

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

    Кто поддерживает Angular?

    Angular Core Team состоит из большого количества людей во всем мире и из сообщества Angular. При этом большая часть разработок Angular изо дня в день осуществляется сотрудниками Google. Примерно 20 сотрудников Google входят в Angular Core Team и все ТОП-разработчики проекта Angular являются сотрудниками Google.

    Следует отметить, что, несмотря на контроль Google над Angular, сам фреймворк по-прежнему много в чём зависит от усилий сообщества. Более двух тысяч человек внесли свой вклад в open-source репозиторий Angular, в общем доступе есть бесчисленные туториалы и guides, многочисленные компании предлагают обучение и набор инструментов для разработчиков.

    Если контроль над проектом принадлежит одной компании, это неплохо, так как снижает конфликтные вопросы при принятия нестандартных решений.

    Какую версию Angular мне лучше использовать?

    На данный момент существует две популярные версии Angular. Версия 1 доступна на https://angularjs.org/ и является обновлённой версией того Angular, что был представлен Miško и его командой в 2011 году. Другая популярная версия теперь называется просто Angular и доступна на https://angular.io/. Современный Angular – это полностью переделанная версия для новых браузеров, рабочих процессов и платформ разработки.

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

    Как выглядит Angular-приложение?

    Теперь, когда вы имеете некоторое представление об Angular, давайте углубимся в код. Начнём с небольшого приложения “hello world”. Все приложения Angular начинаются с НТМL-страницы, которая выглядит следующим образом.

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

    Есть одна уникальная вещь в выше приведённом примере – элемент . Вы не используете этот элемент регулярно в веб-приложении. Цель Angular – постоянно расширять словарь НТМL, позволяя вам определять собственные теги.

    Такие пользовательские теги называют компонентами, и вы можете определять их поведение в коде. Вот простейшая реализация элемента :

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

    TypeScript – надстройка над JavaScript, то есть весь синтаксис JavaScript доступен на TypeScript. Кстати, весь приведённый выше синтаксис – import, export, @Component и остальные – это или нынешние фичи JavaScript, или те, что появятся в ближайшем будущем. Так что, когда вы учите TypeScript, вы изучаете будущее JavaScript. TypeScript, к тому же, отличается превосходной документацией, к которой вы можете обратиться в любое время.

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

    Давайте еще раз посмотрим на TypeScript-код, определяющий компонент :

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

      Свойство selector определяет имя тега при вводе в HTML. Использование селектора показывает Angular, что делать, когда он видит тег в HTML.

    Свойство template контролирует, что HTML должен делать, когда используется компонент. Пример использования template: « Hello World », тут видно, как Angular определяет, какие действия применять при и почему это приложение представляет базовый тег при предварительном просмотре в браузере.

    Отображение базового примера “Hello World” в браузере.

    Зачем мне использовать Angular?

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

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

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

    Пользуясь Angular, не рассчитывайте на простоту фреймворка, но будьте уверены в его невероятной надёжности и хорошей документации. Этот фреймворк прошёл не одно боевое испытание и заслужено используется миллионами разработчиков для написания крутых приложений. Сообщество Angular – огромное, и все хелпы легко найти в Google, Stack Overflow и по всему интернету. Ищите разработчика? Тысячи Angular девелоперов откликнутся на ваш запрос. Есть даже специальные рекрутинговые сайты.

    Я уже упоминал о том, что Angular – мультиплатформенный? Вернемся к нашему примеру Hello World. У вас уже есть начало для iOS и Android приложения – просто переключите элемент HTML на компонент, который NativeScript может отобразить в мобильной среде, как , например. Вот так примерно будет выглядеть код.

    А вот как этот код работает в нативных iOS и Android приложениях.

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

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

    Оригинал статьи: http://linkis.com/telerik.com/7vemI

    10 преимуществ использования фреймворка Angular.js при разработке веб-приложений | Блог | Разработка и дизайн сайтов и мобильных приложений

    Сегодня разработку одностраничных приложений сложно представить без Angular.js. Давайте вместе разберемся, что это за «фрукт» и какие у него преимущества.

    Во-первых, что такое Angular.js фреймворк? Это open source-фреймворк (не библиотека!), который позволяет создавать популярные сегодня одностраничные приложения. После запуска в 2009 году Angular.js быстро набрал популярность и не собирается сдавать позиции — он остается самым востребованным JavaScript-фреймворком на GitHub (в топе как по форкам, так и по количеству «звезд»).

    Ниже мы перечислили исчерпывающие причины, почему стоит выбрать AngularJS.

    1. Большое комьюнити

    Начнем с того, что у Angular.js огромнейшее комьюнити. В него входят как участники постоянной команды разработки, так и просто те, кто хотят внести свою лепту в развитие фреймворка с открытым исходным кодом. По Angular.js проходит множество конференций, о нем говорят на хакатонах и спорят в тематических ИТ-коммьюнити. Существует много книг и он-лайн ресурсов по Angular.js для разработчиков. Для клиентов это означает: выбрав Angular.js, вы будете не только в тренде, но и всегда сможете найти разработчиков для поддержки своего проекта.

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

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

    3. Использование директив

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

    4. Высокая скорость разработки

    При правильном подходе с помощью Angular.js можно быстро разрабатывать даже большие приложения.

    5. MVC из коробки

    В AngularJS используется схема MVC, разделяющая логику, представление и данные приложения:

    Это позволяет создавать одностраничные веб-приложения (Single Page Application). В Angular.js имеется служба $http, которая обеспечивает взаимодействие с удаленными HTTP-серверами с помощью XMLHttpRequest или JSONP. При передаче объекта JavaScript на сервер он будет автоматически преобразован в строку JSON. После получения ответа служба также попытается преобразовать полученную строку JSON в JavaScript. Используя службу $http можно создать собственную службу с полным контролем над обработкой URL и данных.

    6. Полезные фичи для SPA

    Angular.js для вебприложений – это как вода для рыб. Трудно представить, чтобы они могли существовать друг без друга. Например, Angular.js предоставляет возможности по работе с валидацией форм. Если на странице используются формы, FormController записывает их состояние. Используя эту информацию, мы можем задавать поведение HTML-элементов в UI (например, скрыть кнопку «Очистить форму», если пользователь еще не начал вводить данные в форму). Для обработки ошибок в Angular.js предусмотрены встроенные валидаторы (required, ng-required, ng-minlength, ng-pattern и другие), но при необходимости мы также можем создавать собственные. Сообщения об ошибках можно выводить как для всей формы, так и для ее отдельных полей.

    Шаблоны или темплейты в Angular.js представляют собой HTML-код, дополненный элементами и атрибутами Angular.js. Фреймворк дополняет шаблон информацией из модели, чтобы показать пользователю динамическую страницу. Для обработки данных и форматирования значений, полученных от модели, используются фильтры. Они позволяют показать нужные данные пользователю без необходимости вносить изменения в исходные данные.

    7. Модульность

    В Angular.js можно организовывать приложения из отдельных модулей. Такие модули могут как зависеть друг от друга, так и быть автономными. Например, в последнем случае модуль входа через Facebook можно использовать сразу в нескольких частях приложения, скажем, на странице входа и на странице оформления заказа. А благодаря встроенному механизму внедрения зависимостей Angular.js сам распознает ситуацию, когда нужно предоставить вспомогательные объекты, предоставляет их и связывает объекты между собой.

    8. Наличие готовых решений

    Что важно, для Angular.js существует огромное количество готовых решений, которые позволяют решать довольно разнообразные задачи, используя уже готовые модули. Например, существует несколько модулей для роутинга самый популярный из которых ui-router, так же есть различные модули для работы с таблицами ui-grid, ng-table и много других.

    Из-за отсутствия жесткой структуры проекта в AngularJS можно создавать приложения с достаточно разнообразной структурой. Также вы можете использовать AngularJS для мобильной разработки (разумеется, речь идет о создании так называемых гибридных приложений). Как использовать Angular.js фреймворк в этих целях можно почитать здесь.

    9. Двустороннее связывание данных

    В Angular.js применяется двустороннее связывание: любые изменения в пользовательском интерфейсе сразу же отражаются на объектах приложения и наоборот. Фреймворк сам следит за событиями браузера, изменениями модели и действиями пользователя на странице, чтобы сразу обновлять нужные шаблоны. При этом в коде JavaScript не требуется хранить ссылки на DOM-элементы и явно ими манипулировать. Мы просто описываем необходимый результат в терминах состояния модели, и нам не нужно использовать низкоуровневые конструкции.

    10. Простота тестирования

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

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

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

    Замедление работы при использовании более 2000 вотчеров (или слушателей событий).

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

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

    Нужен MVP, разработка под iOS, Android или прототип приложения? Ознакомьтесь с нашим портфолио и сделайте заказ уже сегодня!

    Об авторе

    Антон создавал проекты на AngularJS для студии.

    Похожие статьи

    Вернуться к списку записей
    К списку записей

    Введение в AngularJS

    Что такое AngularJS

    Последнее обновление: 26.04.2020

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

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

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

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

    Официальный сайт фреймворка: http://angularjs.org/.
    Там вы можете найти сами исходные файлы, обучающие материалы и другие сопроводительные материалы относительно библиотеки.

    На момент написания данного руководства последней версией фреймворка была версия 1.6.4.

    Начало работы c AngularJS

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

    Также можно использовать ссылку на библиотеку из сети CDN компании Google: https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js.

    При загрузке zip-пакета мы найдем в нем кроме самой библиотеки (angular.js) еще ряд дополнительных файлов и их минимизированные версии:

    angular-touch.js: предоставляет поддержку событий сенсорного экрана

    angular-animate.js: предоставляет функциональность анимации

    angular-aria.js: предоставляет поддержку aria-атрибутов (accesible rich internet application)

    angular-mocks.js: предоставляет mock-объекты для юнит-тестирования

    angular-route.js: обеспечивает механизм маршрутизации

    angular-sanitize.js: предоставляет функционал для управления потенциально опасным контентом (javascript, html)

    angular-cookies.js: обеспечивает функционал для управления куками

    angular-loader.js: используется для загрузки angularjs-скриптов

    angular-messages.js: предоставляет функционал для вывода сообщений

    angular-resource.js: обеспечивает функциональность для работы с ресурсами

    Папка i18n: содержит js-файлы для разных локалей

    Из всех загруженных скриптов в архиве нас будет интересовать прежде всего файл angular.min.js

    Теперь собственно создадим приложение. Оно будет стандартным HelloWorld. Код html-страницы будет следующим:

    Первое, наверное, что бросается в глаза — это новые атрибуты, добавленные к стандартным тегам html (в данном случае ng-app и
    ng-model ). Эти атрибуты являются директивами фреймворка AngularJS. Благодаря их встраиванию фреймворк позволяет добавить элементам определенное поведение.

    Конкретно в данном случае директива ng-app объявляет элемент корневым для всего приложения, а
    директива ng-model указывает модель «name», к которой будет привязано значение элемента input. И при изменении текста в элементе input, модель «name»
    также будет динамически изменять свое значение.

    Чуть ниже в элементе

    Добро пожаловать <>!

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

    что это такое и какие у его преимущества

    Всем привет! Сегодня мы начнем разбирать фреймворк от известной компании Google — Angular 2.

    Что такое Angular 2

    Это фреймворк, основной целью которого является создание одностраничных браузерных приложений или по другому Single Page Application (SPA). Многие фичи были взяты из AngularJs ( первая версия ).

    Вот какие отличительные достоинства имеет ангулар 2:

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

    Недостатком является малое количество документации именно для русскоязычной аудитории, преимущественно это связано из-за недавнего релиза во всемирную паутину.

    Для работы с Angular 2 используются:

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

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

    Возможности Angular 2

    В ангулар 2 большое количество фич, которые стоит разобрать. Сейчас мы пройдемся по основным из них.

    • Модульная система — это свойство отделение определенного функционала приложения в отдельные файлы (напоминает объектно-ориентированное-программирование).
    • Компоненты — с помощью их отображается содержимого html, css на экран браузера.
    • Метаданные — руководят правильным отображениям компонентов и их классов.
    • Анимация — компоненты работающие с интерфейсом по средством анимации.
    • Формы — компонент работающий с вводимыми формами. Что произайдет после клика по кнопке, после удаление всех символов с формы, за это все отвечает этот компонент.
    • Сервисы — компоненты которые внедряют (несут) логику во взаимодействие с приложением.
    • Роутер — компонент, который обеспечивает загрузку компонентов из другого компонента. Можно реализовать загрузку содержимого без перезагрузки самой страницы. Например, вы отправили форму, или перешли по ссылке. Такая загрузка реализована на официальном сайте.
    • Директивы — помогают улучшить взаимодействие с работой интерфейса.
    • Работа с сервером — взаимодействие с сервером.

    Обо всем этом и многом другом будут сделаны отдельные уроки.

    Если у вас имеются идеи по поводу создания новых статей, то пишите в комментарии.

    Поделиться ссылкой:

    Что такое AngularJS? — Артем Демо

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

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

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

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

    AngularJS позволяет сократить время разработки приложений. Это достигается за счет встроенных механизмов, которые сильно помогают разработчику. Один из таких механизмов – это встроенный шаблонизатор (template engine). Шаблонизатор позволяет использовать встроенные команды AngularJS для вывода данных. Например:

    Другой прекрасный инструмент, который предоставляет AngularJS, это то как фреймворк управляет DOM (Document Objerct Model) или, говоря иначе, HTML тегами. Если при разработке с использованием jQuery (и ее сестрами jQuery UI, jQuery Mobile) вам постоянно приходится вручную обновлять все данные на экране пользователя, то AngularJS делает всю работу за нас. Достаточно указать какие элементы к каким объектам данных привязаны и при каждом изменении состояния на экране будут выводиться обновленная информация.

    AngularJS использует объектный подход для разработки. Эта архитектура называется MVC (Model View Controller), стоит отметить, что вместе с этим при классическом подходе эта модель не совсем соответствует тому как ангулар работает с данными. Существует более точное определение его архитектуры – MVVM (Model View – View Model), однако точная разница между это и MVC не сильно важна на этом этапе, так что можно пока не заморачиваться.

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

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

    Please enable JavaScript to view the comments powered by Disqus.
    comments powered by

    Зачем нужен Angular.js и почему именно он

    DevOps и Infrastructure консультант, эксперт по AWS, программист, автор двух книг, ментор и основатель mkdev.me. Я проектирую и разрабатываю программные продукты. Ещё я пишу об этом и учу людей.

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

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

    Есть большая вероятность, что вам не придётся использовать JS фреймворки ближайшие месяцы и\или годы. Область их применения довольно специфична: так называемые одностраничные приложения (Single Page Applications, SPA). Типичные примеры: Google Drive, Gmail, Evernote. Но даже в тех случаях, когда стоит задача написать одностраничное приложение, не всегда имеет смысл использовать полноценный JavaScript фреймворк: всё зависит от того, насколько динамичный и сложный UI вы пытаетесь построить.

    Веб-версия Evernote – типичное SPA приложение

    Полезный гайд для начинающих в Angular

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

    Что такое Angular js и зачем он нужен?

    Angular js это javascript фреймворк представляющий из себя своеобразный каркас для разработки веб-приложений, в частности для создания SPA (single page application). Для построения Angular приложений используется подход MVVW. Данный подход позволяет разработчику при разработке приложения больше думать о самом потоке данных и не уделять внимание на отрисовку, все изменения в моделях, отображаются в приложении В этом посте я не буду приводить какие-то конкретные примеры работы с кодом, расскажу лишь в какой последовательности и как изучать.

    С чего начать ?

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

    Директивы

    Вполне возможно, что первое с чем вы столкнетесь, это работа с директивами и их создание. Перед началом работы следует почитать эту статью, а затем вдумчиво и пару раз эту и эту статью. Кстати очень много реализовано уже в Bootstrap директивах. В целом все, что связано с работой шаблонами и отдельными html блоками, а также их связью с $scope ложиться на директивы. Скорее всего вы столкнетесь с задачей по реализации модальных окон на angular и у вас будет два пути, использовать вариант из коробки + добавлять bootstrap стили в ваш проект, или же писать самим директиву по работе с модальными окнами, хороший урок по созданию модального окна можно почитать тут.

    Сервисы

    В Angular также существуют некоторые сервисы для работы с нашими объектами

    • Factory — Фабрика, самый распространненый тип объектов. Данный сервис не накладывает правил по формированию будущего объекта, мы просто используем фабрику для получения новых экземпляров класса.
    • Service — по сути это синглтон, для работы с неким одним объектом. В отличии от фабрики сервис вызывает функцию конструктор для инстанцирования экземпляра объекта
    • Provider — провайдер представляет из себя расширенную фабрику и обычно используется для доступа к приложению через JSONP, сам провайдер ожидает в возвращаемом объекте функцию $get .

    Понимание типов сервисов и фабрик доступно изложено тут, в более емком варианте можно прочесть здесь.

    Еще для чтения

    Изначально Angular js заточен под язык Ruby и у вас могут возникнуть некоторые проблемы с связкой Angular+php. Вам следует ознакомиться с данной статьей. Конечно предлагают некий костыль и мне он совсем не по душе, предлагаю воспользоваться следующим приемом для получения POST запроса в php от Angular

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

    Если хотите дополнить или поправить список заметок, пишите в комментариях.

    Что такое ангуляр – основные функции и принципы работы

    основные функции и принципы работы

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

    Зачем нужен фреймворк?

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

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

    На самом деле, JS фреймворки появились не так давно. Я помню, когда сайты писали с плохо структурированным JS кодом (в большинстве случаев под управлением jQuery). Однако клиентские UI становились все сложнее, и JS потерял репутацию «игрушечного» языка. Современные сайты сильно полагаются на JS, поэтому необходимость правильной организации (и тестирования!) кода возросла. Поэтому клиентские фреймворки стали популярны, и на данный момент их, как минимум, десяток.

    Введение в Angular: что такое Angular

    Раньше среди JS фреймворков AngularJS был любимчиком, так как был представлен корпорацией google в 2012. Он был построен по концепции Model-View-Controller. Авторы же фреймворка называли концепцию “Model-View-*” или даже “Model-View-Whatever”.

    Практический курс по созданию веб-приложения на Angular4

    Скачайте БЕСПЛАТНЫЙ мини-курс и изучите базовые возможности JavaScript-фреймворка Angular 4 за ближайшие 3 дня

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

    В частности, была представлена интересная концепция привязки данных, по которой представление автоматически обновляется при любом изменении модели и наоборот. Поверх этого представили идею директив, которые позволяют создавать собственные HTML теги и оживлять их через JS. Например, можно написать:

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

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

    AngularJS стал популярен очень быстро и получил большую поддержку. Тем не менее, разработчики решили пойти еще дальше и перешли к созданию новой версии Angular 2 (позже просто Angular без части JS). Фреймворк получил новое имя не просто так: он был полностью переписан и перепроектирован, а многие концепции были пересмотрены.

    Первый стабильный релиз Angular 2 опубликован в 2020, после чего AngularJS стал терять популярность в угоду новой версии. Одна из главных функций Angular 2 – возможность разрабатывать под несколько платформ: веб, мобильные устройства и нативный десктоп (AngularJS по умолчанию не имел мобильной поддержки).

    Чтобы еще сильнее все усложнить в конце 2020 вышел Angular 4. «А где же версия 3?», спросите вы. У меня был тот же вопрос. Как оказалось, версии 3 вообще не было опубликовано! Но как так? В официальном блоге разработчики объяснили, что с Angular 2 перешли на семантическое управление версиями.

    Следуя этому принципу, изменение основной версии (например, 2.х.х становится 3.х.х) означает переломные изменения. Проблема в том, что компонент Angular Router уже был в версии 3. Чтобы исправить это несоответствие, было принято решение пропустить Angular 3. К счастью, переход с Angular 2 на 4 прошел легче, чем с AngularJS на Angular 2, но разработчиков все же смутила вся эта путаница.

    В ноябре 2020 вышел Angular 5. Он совместим с предыдущими версиями Angular. Скоро должен выйти Angular 6 и должен привнести еще больше крутых функций и улучшений.

    Введение в Angular: преимущества Angular

    Так почему же Angular? Потому что он поддерживается на разных платформах (веб, мобильные устройства, нативный десктоп), он мощный, современный, у него отличная экосистема, и он просто крутой. Не убеждены? Позвольте немного углубиться в подробности:

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

    Это JS, но лучше. Angular построен на TypeScript, который, в свою очередь, полагается на ES6. Вам не нужно учить полностью новый язык, и вы получаете функции типа статической типизации, интерфейсов, классов, пространства имен, декораторы и т.д.

    Не нужно изобретать велосипед. В Angular уже есть много инструментов для создания приложения. Благодаря директивам, HTML элементы могут вести себя динамически. Вы можете усилить формы с помощью FormControl и представить различные правила валидации. Можно легко посылать асинхронные HTTP запросы различных типов. Можно без труда настроить маршрутизацию. В Angular есть еще много функций!

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

    Практический курс по созданию веб-приложения на Angular4

    Скачайте БЕСПЛАТНЫЙ мини-курс и изучите базовые возможности JavaScript-фреймворка Angular 4 за ближайшие 3 дня

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

    Тестирование в центре внимания. Angular тщательно протестирован и поддерживает юнит тесты и сквозное тестирование с помощью инструментов типа Jasmine и Protractor.

    Angular подготовлен к мобильным устройствам и десктопу – один фреймворк под множество платформ.

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

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

    Введение в Angular: сложности Angular

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

    Рекомендуется писать приложения Angular на TypeScript, поэтому его нужно понимать. Можно писать код на современном JS (ES6), но я редко вижу такое.

    TypeScript – надстройка JS. Поэтому ее тоже нужно знать.

    Чтобы еще сильнее ускорить процесс разработки, нужно понять Angular CLI.

    Для установки Angular и других компонентов активно используется npm. Его также нужно знать.

    Умение настраивать таск раннеры типа Gulp или Grunt также может пригодиться. С их помощью можно много чего сделать перед развертыванием приложения в продакшене.

    Сейчас широко используются минификаторы типа UglifyJS и упаковщики типа Webpack.

    Во время разработки приложения очень важно иметь возможность отлаживать код. Нужно уметь работать в инструментах отладки типа Augury.

    Очень важно тестировать приложения Angular, которые могут стать очень сложными. Один из самых популярных инструментов тестирования — Jasmine (фреймворк для тестирования) и Protractor (используется для сквозного тестирования).

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

    Стоит отметить, что иногда использовать Angular для приложения будет излишне. Если проект маленький или средний без сложного UI и взаимодействия, возможно, лучше взять старый добрый JS. Поэтому очень важно оценить все требования, функции нового приложения и дедлайны перед принятием решения об использовании JS фреймворка.

    Заключение

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

    Надеюсь, теперь вы понимаете основную идею Angular, и где он может пригодиться!

    Автор: Ilya Bodrov-Krukowski

    Источник: https://www.sitepoint.com/

    Редакция: Команда webformyself.

    Практический курс по созданию веб-приложения на Angular4

    Скачайте БЕСПЛАТНЫЙ мини-курс и изучите базовые возможности JavaScript-фреймворка Angular 4 за ближайшие 3 дня

    Angular 4. Быстрый старт

    Овладейте азами работы с Angular 4

    Что такое Angular? — Блог ITVDN

    Miško рассказал о том, как возникла идея создать фреймворк в интервью 2013 года:

    “Мы хотели понять, можно ли упростить работу веб-дизайнеров, а не только разработчиков. Смогут ли они добавить еще больше HTML в свой код, чтобы превратить обычную статическую форму во что-то более стоящее, что можно отправить по емейлу. Идея заключалась в следующем: будь у вас небольшой бизнес, продающий пиццу или что-либо другое, то вы могли бы добавить простую систему заказа, используя необходимые теги, и они действительно отправляли бы письмо на сервер.»

    Поскольку домен angular.com был занят – собственно, как и сейчас – создатели фреймворка переименовали Angular в GetAngular и выпустили небольшой сайт, на котором можно было узнать о всех фичах фреймворка.

    Домашняя страница Angular по состоянию на декабрь 2009 года (из Internet Archive).

    Скоро Miško начал работать в Google, а в 2010 году занялся проектом Google Feedback. Miško убедил своего менеджера, Brad Green, переписать проект, используя его Angular. Оптимизация сроков и кода, которые показала команда в работе, помогли убедить Google в силе Angular.

    Brad Green и Miško Hevery показывают, как много времени и сил удалось сэкономить на проекте, используя Angular. Это скриншот презентации на конференции ng-conf 2014 keynote, которую стоит посмотреть, если вы хотите знать всё о происхождении Angular.

    Вскоре после успеха Google Feedback та же команда переписала open-source библиотеку и в мае 2011 года была выпущена версия Angular 1.0. В течение нескольких лет Angular стремительно набирал популярность, и сегодня Google заявляет, что более 1,5 миллиона разработчиков используют Angular.

    Что делает Angular?

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

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

    Когда использовать Angular?

    Технически вы можете использовать Angular где угодно, но лучше всего он работает в нестандартных приложениях с данными. Если вы ознакомитесь с различными приложениями Angular, собранными на madewithangular.com, вы увидите реальные приложения, которые собирают данные из форм и работают с ними.

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

    Окончательный результат демо-приложения Tour of Heroes из Angular документации.

    Angular хорош в form-based приложениях, он подходит для больших и сложных приложений. Angular — не самый простой и не самый маленький фреймворк JavaScript. Следовательно, если вы создаёте нечто небольшое, вам лучше подобрать для работы фреймворк попроще, например, jQuery. Angular хорошо подойдёт для разработчиков приложений в средних и больших командах. Если вы разрабатываете приложение самостоятельно, может показаться, что шаблонного кода и конвенций разработки в Angular намного больше, чем вам нужно.

    Angular также хорошо подходит для приложений, которые должны работать в нескольких средах разработки. Если приложение должно работать на веб, а также на Windows или Maс, вы можете придерживаться одного из многочисленных туториалов для запуска Angular-приложений с популярным Electron project.

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

    Кто поддерживает Angular?

    Angular Core Team состоит из большого количества людей во всем мире и из сообщества Angular. При этом большая часть разработок Angular изо дня в день осуществляется сотрудниками Google. Примерно 20 сотрудников Google входят в Angular Core Team и все ТОП-разработчики проекта Angular являются сотрудниками Google.

    Следует отметить, что, несмотря на контроль Google над Angular, сам фреймворк по-прежнему много в чём зависит от усилий сообщества. Более двух тысяч человек внесли свой вклад в open-source репозиторий Angular, в общем доступе есть бесчисленные туториалы и guides, многочисленные компании предлагают обучение и набор инструментов для разработчиков.

    Если контроль над проектом принадлежит одной компании, это неплохо, так как снижает конфликтные вопросы при принятия нестандартных решений.

    Какую версию Angular мне лучше использовать?

    На данный момент существует две популярные версии Angular. Версия 1 доступна на https://angularjs.org/ и является обновлённой версией того Angular, что был представлен Miško и его командой в 2011 году. Другая популярная версия теперь называется просто Angular и доступна на https://angular.io/. Современный Angular – это полностью переделанная версия для новых браузеров, рабочих процессов и платформ разработки.

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

    Как выглядит Angular-приложение?

    Теперь, когда вы имеете некоторое представление об Angular, давайте углубимся в код. Начнём с небольшого приложения “hello world”. Все приложения Angular начинаются с НТМL-страницы, которая выглядит следующим образом.

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

    Есть одна уникальная вещь в выше приведённом примере – элемент . Вы не используете этот элемент регулярно в веб-приложении. Цель Angular – постоянно расширять словарь НТМL, позволяя вам определять собственные теги.

    Такие пользовательские теги называют компонентами, и вы можете определять их поведение в коде. Вот простейшая реализация элемента :

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

    TypeScript – надстройка над JavaScript, то есть весь синтаксис JavaScript доступен на TypeScript. Кстати, весь приведённый выше синтаксис – import, export, @Component и остальные – это или нынешние фичи JavaScript, или те, что появятся в ближайшем будущем. Так что, когда вы учите TypeScript, вы изучаете будущее JavaScript. TypeScript, к тому же, отличается превосходной документацией, к которой вы можете обратиться в любое время.

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

    Давайте еще раз посмотрим на TypeScript-код, определяющий компонент :

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

      Свойство selector определяет имя тега при вводе в HTML. Использование селектора показывает Angular, что делать, когда он видит тег в HTML.

    Свойство template контролирует, что HTML должен делать, когда используется компонент. Пример использования template: « Hello World », тут видно, как Angular определяет, какие действия применять при и почему это приложение представляет базовый тег при предварительном просмотре в браузере.

    Отображение базового примера “Hello World” в браузере.

    Зачем мне использовать Angular?

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

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

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

    Пользуясь Angular, не рассчитывайте на простоту фреймворка, но будьте уверены в его невероятной надёжности и хорошей документации. Этот фреймворк прошёл не одно боевое испытание и заслужено используется миллионами разработчиков для написания крутых приложений. Сообщество Angular – огромное, и все хелпы легко найти в Google, Stack Overflow и по всему интернету. Ищите разработчика? Тысячи Angular девелоперов откликнутся на ваш запрос. Есть даже специальные рекрутинговые сайты.

    Я уже упоминал о том, что Angular – мультиплатформенный? Вернемся к нашему примеру Hello World. У вас уже есть начало для iOS и Android приложения – просто переключите элемент HTML на компонент, который NativeScript может отобразить в мобильной среде, как , например. Вот так примерно будет выглядеть код.

    А вот как этот код работает в нативных iOS и Android приложениях.

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

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

    Оригинал статьи: http://linkis.com/telerik.com/7vemI

    10 преимуществ использования фреймворка Angular.js при разработке веб-приложений | Блог | Разработка и дизайн сайтов и мобильных приложений

    Сегодня разработку одностраничных приложений сложно представить без Angular.js. Давайте вместе разберемся, что это за «фрукт» и какие у него преимущества.

    Во-первых, что такое Angular.js фреймворк? Это open source-фреймворк (не библиотека!), который позволяет создавать популярные сегодня одностраничные приложения. После запуска в 2009 году Angular.js быстро набрал популярность и не собирается сдавать позиции — он остается самым востребованным JavaScript-фреймворком на GitHub (в топе как по форкам, так и по количеству «звезд»).

    Ниже мы перечислили исчерпывающие причины, почему стоит выбрать AngularJS.

    1. Большое комьюнити

    Начнем с того, что у Angular.js огромнейшее комьюнити. В него входят как участники постоянной команды разработки, так и просто те, кто хотят внести свою лепту в развитие фреймворка с открытым исходным кодом. По Angular.js проходит множество конференций, о нем говорят на хакатонах и спорят в тематических ИТ-коммьюнити. Существует много книг и он-лайн ресурсов по Angular.js для разработчиков. Для клиентов это означает: выбрав Angular.js, вы будете не только в тренде, но и всегда сможете найти разработчиков для поддержки своего проекта.

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

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

    3. Использование директив

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

    4. Высокая скорость разработки

    При правильном подходе с помощью Angular.js можно быстро разрабатывать даже большие приложения.

    5. MVC из коробки

    В AngularJS используется схема MVC, разделяющая логику, представление и данные приложения:

    Это позволяет создавать одностраничные веб-приложения (Single Page Application). В Angular.js имеется служба $http, которая обеспечивает взаимодействие с удаленными HTTP-серверами с помощью XMLHttpRequest или JSONP. При передаче объекта JavaScript на сервер он будет автоматически преобразован в строку JSON. После получения ответа служба также попытается преобразовать полученную строку JSON в JavaScript. Используя службу $http можно создать собственную службу с полным контролем над обработкой URL и данных.

    6. Полезные фичи для SPA

    Angular.js для вебприложений – это как вода для рыб. Трудно представить, чтобы они могли существовать друг без друга. Например, Angular.js предоставляет возможности по работе с валидацией форм. Если на странице используются формы, FormController записывает их состояние. Используя эту информацию, мы можем задавать поведение HTML-элементов в UI (например, скрыть кнопку «Очистить форму», если пользователь еще не начал вводить данные в форму). Для обработки ошибок в Angular.js предусмотрены встроенные валидаторы (required, ng-required, ng-minlength, ng-pattern и другие), но при необходимости мы также можем создавать собственные. Сообщения об ошибках можно выводить как для всей формы, так и для ее отдельных полей.

    Шаблоны или темплейты в Angular.js представляют собой HTML-код, дополненный элементами и атрибутами Angular.js. Фреймворк дополняет шаблон информацией из модели, чтобы показать пользователю динамическую страницу. Для обработки данных и форматирования значений, полученных от модели, используются фильтры. Они позволяют показать нужные данные пользователю без необходимости вносить изменения в исходные данные.

    7. Модульность

    В Angular.js можно организовывать приложения из отдельных модулей. Такие модули могут как зависеть друг от друга, так и быть автономными. Например, в последнем случае модуль входа через Facebook можно использовать сразу в нескольких частях приложения, скажем, на странице входа и на странице оформления заказа. А благодаря встроенному механизму внедрения зависимостей Angular.js сам распознает ситуацию, когда нужно предоставить вспомогательные объекты, предоставляет их и связывает объекты между собой.

    8. Наличие готовых решений

    Что важно, для Angular.js существует огромное количество готовых решений, которые позволяют решать довольно разнообразные задачи, используя уже готовые модули. Например, существует несколько модулей для роутинга самый популярный из которых ui-router, так же есть различные модули для работы с таблицами ui-grid, ng-table и много других.

    Из-за отсутствия жесткой структуры проекта в AngularJS можно создавать приложения с достаточно разнообразной структурой. Также вы можете использовать AngularJS для мобильной разработки (разумеется, речь идет о создании так называемых гибридных приложений). Как использовать Angular.js фреймворк в этих целях можно почитать здесь.

    9. Двустороннее связывание данных

    В Angular.js применяется двустороннее связывание: любые изменения в пользовательском интерфейсе сразу же отражаются на объектах приложения и наоборот. Фреймворк сам следит за событиями браузера, изменениями модели и действиями пользователя на странице, чтобы сразу обновлять нужные шаблоны. При этом в коде JavaScript не требуется хранить ссылки на DOM-элементы и явно ими манипулировать. Мы просто описываем необходимый результат в терминах состояния модели, и нам не нужно использовать низкоуровневые конструкции.

    10. Простота тестирования

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

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

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

    Замедление работы при использовании более 2000 вотчеров (или слушателей событий).

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

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

    Нужен MVP, разработка под iOS, Android или прототип приложения? Ознакомьтесь с нашим портфолио и сделайте заказ уже сегодня!

    Об авторе

    Антон создавал проекты на AngularJS для студии.

    Похожие статьи

    Вернуться к списку записей
    К списку записей

    Введение в AngularJS

    Что такое AngularJS

    Последнее обновление: 26.04.2020

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

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

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

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

    Официальный сайт фреймворка: http://angularjs.org/.
    Там вы можете найти сами исходные файлы, обучающие материалы и другие сопроводительные материалы относительно библиотеки.

    На момент написания данного руководства последней версией фреймворка была версия 1.6.4.

    Начало работы c AngularJS

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

    Также можно использовать ссылку на библиотеку из сети CDN компании Google: https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js.

    При загрузке zip-пакета мы найдем в нем кроме самой библиотеки (angular.js) еще ряд дополнительных файлов и их минимизированные версии:

    angular-touch.js: предоставляет поддержку событий сенсорного экрана

    angular-animate.js: предоставляет функциональность анимации

    angular-aria.js: предоставляет поддержку aria-атрибутов (accesible rich internet application)

    angular-mocks.js: предоставляет mock-объекты для юнит-тестирования

    angular-route.js: обеспечивает механизм маршрутизации

    angular-sanitize.js: предоставляет функционал для управления потенциально опасным контентом (javascript, html)

    angular-cookies.js: обеспечивает функционал для управления куками

    angular-loader.js: используется для загрузки angularjs-скриптов

    angular-messages.js: предоставляет функционал для вывода сообщений

    angular-resource.js: обеспечивает функциональность для работы с ресурсами

    Папка i18n: содержит js-файлы для разных локалей

    Из всех загруженных скриптов в архиве нас будет интересовать прежде всего файл angular.min.js

    Теперь собственно создадим приложение. Оно будет стандартным HelloWorld. Код html-страницы будет следующим:

    Первое, наверное, что бросается в глаза — это новые атрибуты, добавленные к стандартным тегам html (в данном случае ng-app и
    ng-model ). Эти атрибуты являются директивами фреймворка AngularJS. Благодаря их встраиванию фреймворк позволяет добавить элементам определенное поведение.

    Конкретно в данном случае директива ng-app объявляет элемент корневым для всего приложения, а
    директива ng-model указывает модель «name», к которой будет привязано значение элемента input. И при изменении текста в элементе input, модель «name»
    также будет динамически изменять свое значение.

    Чуть ниже в элементе

    Добро пожаловать <>!

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

    что это такое и какие у его преимущества

    Всем привет! Сегодня мы начнем разбирать фреймворк от известной компании Google — Angular 2.

    Что такое Angular 2

    Это фреймворк, основной целью которого является создание одностраничных браузерных приложений или по другому Single Page Application (SPA). Многие фичи были взяты из AngularJs ( первая версия ).

    Вот какие отличительные достоинства имеет ангулар 2:

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

    Недостатком является малое количество документации именно для русскоязычной аудитории, преимущественно это связано из-за недавнего релиза во всемирную паутину.

    Для работы с Angular 2 используются:

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

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

    Возможности Angular 2

    В ангулар 2 большое количество фич, которые стоит разобрать. Сейчас мы пройдемся по основным из них.

    • Модульная система — это свойство отделение определенного функционала приложения в отдельные файлы (напоминает объектно-ориентированное-программирование).
    • Компоненты — с помощью их отображается содержимого html, css на экран браузера.
    • Метаданные — руководят правильным отображениям компонентов и их классов.
    • Анимация — компоненты работающие с интерфейсом по средством анимации.
    • Формы — компонент работающий с вводимыми формами. Что произайдет после клика по кнопке, после удаление всех символов с формы, за это все отвечает этот компонент.
    • Сервисы — компоненты которые внедряют (несут) логику во взаимодействие с приложением.
    • Роутер — компонент, который обеспечивает загрузку компонентов из другого компонента. Можно реализовать загрузку содержимого без перезагрузки самой страницы. Например, вы отправили форму, или перешли по ссылке. Такая загрузка реализована на официальном сайте.
    • Директивы — помогают улучшить взаимодействие с работой интерфейса.
    • Работа с сервером — взаимодействие с сервером.

    Обо всем этом и многом другом будут сделаны отдельные уроки.

    Если у вас имеются идеи по поводу создания новых статей, то пишите в комментарии.

    Поделиться ссылкой:

    Что такое AngularJS? — Артем Демо

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

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

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

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

    AngularJS позволяет сократить время разработки приложений. Это достигается за счет встроенных механизмов, которые сильно помогают разработчику. Один из таких механизмов – это встроенный шаблонизатор (template engine). Шаблонизатор позволяет использовать встроенные команды AngularJS для вывода данных. Например:

    Другой прекрасный инструмент, который предоставляет AngularJS, это то как фреймворк управляет DOM (Document Objerct Model) или, говоря иначе, HTML тегами. Если при разработке с использованием jQuery (и ее сестрами jQuery UI, jQuery Mobile) вам постоянно приходится вручную обновлять все данные на экране пользователя, то AngularJS делает всю работу за нас. Достаточно указать какие элементы к каким объектам данных привязаны и при каждом изменении состояния на экране будут выводиться обновленная информация.

    AngularJS использует объектный подход для разработки. Эта архитектура называется MVC (Model View Controller), стоит отметить, что вместе с этим при классическом подходе эта модель не совсем соответствует тому как ангулар работает с данными. Существует более точное определение его архитектуры – MVVM (Model View – View Model), однако точная разница между это и MVC не сильно важна на этом этапе, так что можно пока не заморачиваться.

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

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

    Please enable JavaScript to view the comments powered by Disqus.
    comments powered by

    Зачем нужен Angular.js и почему именно он

    DevOps и Infrastructure консультант, эксперт по AWS, программист, автор двух книг, ментор и основатель mkdev.me. Я проектирую и разрабатываю программные продукты. Ещё я пишу об этом и учу людей.

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

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

    Есть большая вероятность, что вам не придётся использовать JS фреймворки ближайшие месяцы и\или годы. Область их применения довольно специфична: так называемые одностраничные приложения (Single Page Applications, SPA). Типичные примеры: Google Drive, Gmail, Evernote. Но даже в тех случаях, когда стоит задача написать одностраничное приложение, не всегда имеет смысл использовать полноценный JavaScript фреймворк: всё зависит от того, насколько динамичный и сложный UI вы пытаетесь построить.

    Веб-версия Evernote – типичное SPA приложение

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