AngularJS для новичка вчера, сегодня, завтра


Содержание

AngularJS для новичка. #[email protected] #[email protected] #[email protected]

Каждый, кто начинал заниматься web-разработкой, сталкивался с проблемой выбора языка программирования, библиотеки и фреймворка. Перерывали десятки обзоров, видео, репозиториев GitHub и не могли определится по причине недостатка объективной информации. Особенно сложно новичкам — море непонятных терминов, авторов, мнений.

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

Перевести сайт на AngularJS и не потерять в органике. Как?

Как сделать «быстро, модно, молодёжно» и не погубить поисковую оптимизацию на сайте. Рассказывает Роман Леонов из агентства Peklo Studio.

  • Бизнес хочет быстрые сайты с хорошим UX.
  • Программисты устали кодить стандартные сайты на PHP, Django и хотят использовать свежие, современные решения.

Поэтому, казалось бы, сделать из сайта SPA (Single Page Application) с помощью фреймворков AngularJS, React или чего-нибудь подобного — идеальное решение для обеих сторон.

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

Но не всё так просто. Нужно учитывать, что:

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

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

Причина в том, что в SPA-сайтах весь контент страниц и вёрстка (HTML и CSS-стили) загружаются асинхронно, DOM-модель изменяется на лету. И по сути, в исходном коде страницы мы не видим практически ничего, кроме установленных скриптов в , набора тегов и ссылок на JS-файлы. Например:

Пакет «MUSTHAVE-2020» для digital-агентств и веб-студий

RUWARD анонсировал главный коммерческий пакет MUSTHAVE-2020 для digital-агентств и веб-студий на весь 2020 год.

В пакет включено сразу 7 различных крутых опций, сервисов и рекламных форматов в рейтингах Руварда на следующий год.

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

  1. Google может перестать видеть контент сайта полностью, либо частями, а это сразу ослабит позиции страниц в выдаче.
  2. В случае когда весь контент и вёрстка подтягивается через JS-файлы, инструмент в Search Console «Fetch as Googlebot» даже может показывать, что он видит страницу точно так же, как и пользователь. Но при этом мы за последние полгода на 4 проектах убеждались, что процесс краулинга и индексации происходит медленнее, чем на обычных сайтах, где весь контент и вёрстка доступны сразу в исходном коде.
  3. Есть мнение, что краулер Google в скором времени будет рендерить все страницы так, как это делают современные браузеры, но наша статистика говорит, что это не срабатывает всегда и пока надеяться на это рано.

Поэтому всё это дело надо поливать правильным SEO-шным соусом — тогда точно будет win-win, все будут горды проделанной работой, бизнес-показатели будут расти и все будут довольны.

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

  • Какие нюансы необходимо учитывать для SEO.
  • Как правильно нужно настраивать Google Analytics для сложных SPA-сайтов, сделанных на AngularJS, React, vue.js.
  • На какие этапы стоит разбить запуск новой версии сайта и как её тестировать, чтобы минимизировать риск просесть в органической выдаче.

Нюансы в SEO для SPA-сайтов на AngularJS, React и другом

  1. В случае с AngularJS рекомендуем использовать версию от 4.0 и выше.
  2. Рекомендуем использовать server side rendering, который даёт статику для поисковых роботов — таким образом, контент и вёрстка страниц будет уже доступна в исходном коде браузера.

Вкратце, SSR — это такой процесс, в котором веб-сервер, анализируя User Agent клиента, понимает, что это поисковый краулер, и рендерит весь контент перед отдачей сам, не полагаясь на браузер. Так краулер получает именно тот результирующий HTML, который видит юзер в SPA.

Пара статей на техническом языке на эту тему: первая на русском языке и вторая на английском.

Готовый пример правильной настройки рендеринга: credtion.kz.

В процессе работы над SSR, обязательно используйте инструмент «Посмотреть как Googlebot».

  • Также актуален стандартный набор требований по SEO в виде прописанных индивидуально для каждой страницы Title, Metadata, сгенерированного Sitemap.xml, SSL-сертификата и так далее. Ознакомьтесь с полным чеклистом для SEO 2020.
  • Рекомендуем закладывать в разработку админку для оперативного изменения контента страниц, а также тайтлов, метаданных и Open Graph текстов.
  • Обязательно используйте для каждой страницы отдельные URL-адреса. В контексте SPA эта штука называется url routing, когда при изменении стейтов страницы меняется URL в адресной строке браузера, но вся страница не перегружается. В первую очередь это нужно, чтобы отдельные страницы индексировались, а также это важно для корректной работы Google Analytics, чтобы можно было отслеживать UX, фиксировать события и конверсии в процессе использования вашего продукта.
  • Настройка Google Analytics для SPA-сайтов

    1. Настраивайте Google Analytics обязательно через Google Tag Manager.
      Специфика работы SPA в том, что страница загружается только один раз, а затем в процессе использования происходит подгрузка. И поэтому без дополнительных настроек скрипт Google Analytics загрузится 1 раз и сработает только 1 pageview. В итоге статистика будет кривой и недостоверной. Ссылка на адекватный мануал по настройке Google Analytics через GTM.
    2. Для достоверности установите в браузер Google Tag Assistant, который позволит проверить работу Google Analytics после всех настроек и проверить, правильно ли регистрируются pageviews.

    Для всех страниц, которые должны индексироваться в поиске и участвуют в UX (которые нужно фиксировать и отслеживать), обязательно создавайте отдельные URL-адреса.

    Ужасный пример: https://site.kz/order/ в случае если в процессе прохождения нескольких этапов заказа URL будет неизменным. В том числе и на финальной странице.

    Хороший пример: https://site.kz/order/finished — данная страница будет являться целевой. Удобно для отслеживания.

    Для всех кнопок в вёрстке, которыми будут пользоваться ваши клиенты, особенно важные пути вроде процесса регистрации и покупки, задавайте уникальные значения классов (class). Тогда маркетинг сможет отслеживать события и конверсии в Google Analytics и видеть реальную картину, как клиенты используют ваш продукт.

    Ужасный пример: — таких кнопок на сайте может быть миллион, и одну конкретную отслеживать не получится.

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

    Как безопасно перейти на SPA, не потерять в органике и стать ещё круче?

    Распишем этапы обновления сайта на примере crediton.kz, которые можно применить для других проектов.

    1. Подготовка новой версии сайта на субдомене new.crediton.kz и закрытие от индексации с помощью «Disallow: /» в robots.txt для данного субдомена.
    2. Многочисленные аудиты по перечисленным выше нюансам и доработки. А также сбор обратной связи от клиентов, которым предоставили возможность использовать новую версию сайта.
    3. В итоге устранение ошибок и доработка новой версии сайта после тестирований.
    4. Настройка Google Analytics по всей воронке продаж для каждого этапа через GTM.
    5. Перенос new.crediton.kz на основной домен c использованием 301 редиректов + возможность пользователям перейти на старую версию old.crediton.kz.
    6. Отключение старой версии сайта в пользу новой более эффективной.

    Результаты

    • Увеличение скорости загрузки страниц в 2 раза.
    • Отсутствие провалов в средних позициях выдачи.
    • Снижение показателя отказов на 10%.

    Над проектом работали:

    • Рахимов Ислам — Digital marketer (CreditOn)
    • Волобуев Евгений — Head of marketing department (CreditOn)
    • Амренов Бакберген — Senior web developer (CreditOn)
    • Федченко Леся — Digital marketer (Peklo)
    • Роман Леонов — SEO-jedi (Peklo)

    Использовать SPA-сайты круто, но главное — делать это аккуратно, не торопиться и тщательно всё проверять и настраивать. Скорость и удобство сайта будут радовать пользователей, вас и поисковые системы.

    Уроки Angular

    Уроки Angular для начинающих / #1 — Введение в Angular

    Видеоурок

    Полезные ссылки:

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

    Сразу стоит сказать, Angular вовсе не является простой библиотекой и она на порядок сложнее чем React и не говоря уже про VueJS библиотеку. Тем не менее, эта сложность оправдана, так как ни одна другая библиотека не представляет такой гигантский набор функций и возможностей. Благодаря этому созданных проектов на Angular в 5, а то и в 6 раз больше нежели у её конкурентов.

    Сложность Angular заключается даже в многочисленном количестве её версий. Новички попросту теряются, ибо есть Angular JS, Angular 2, Angular 3, Angular 4 и сейчас Angular 5 и 6. При этом ведется разработка Angular 7 и, думаю, уже Angular 8 не за горами. Здесь стоит внести разъяснение!

    В 2009 году появилась первая версия Angular JS или Angular 1 , которая очень скоро была переписана практически с нуля. Для новой версии даже был использован новый язык программирования. С тех пор начали появляться версии просто Angular, которые отличались лишь цифрой. Конечно же, лучше учить самую последнюю версию библиотеки, но даже если приступить ко второй его версии, то это уже будет все равно Angular (главное не учить AngularJS). Наверняка на момент просмотра уже есть новая версия, но это вовсе не проблема, ведь полученные знания в курсе вам все равно будут полностью полезны и особых и кардинальных изменений вы не увидите.

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

    Немного информация про Angular

    Библиотека была создана компанией Google и до сих пор ею же поддерживается. Angular это библиотека для работы на стороне клиента, хотя возможности для работы на сервере также имеются. Библиотека служит для создания крупных веб сайтов и приложений, которые требуют большого набора функций. Кроме того, библиотека является частью стека MEAN , в который входит Mongo.db, Express JS , Angular и Node JS . Создание веб приложения на этом стеке также будет рассмотрен на этом канале в дальнейшем.


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

    Установка Angular

    Для установки Angular необходим пакетный менеджер npm . Его можно получить установив Node JS на ваш компьютер. Далее перейдите на сайт Angular CLI и следуйте командам, которые позволят установить библиотеку, а также запустить локальный сервер.

    Задание к уроку

    Первым вашим заданием станет установка всего необходимого. Установите Node JS, а также Angular. Создайте проект и откройте его в текстовом редакторе.

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

    Сперва скачайте Node, после чего установите Angular через пакетный менеджер npm.

    Большое задание по курсу

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

    Курс по Angular

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

    Запись на курс

    Следующий набор на обновленный курс планируется через 2 недели.

    Вы можете запросить уведомление:

    Программа

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

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

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

    Курс можно условно разделить на три части.

    Детали программы смотрите далее.

    Основные темы программы

    Первая часть курса

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

    • Знакомство с angular-cli и экосистемой.
    • Разработка простого компонента, инкапсуляция стилей.
    • Специфика синтаксиса шаблонов Angular.
    • Интерполяция и связывание.

    Компоненты, Директивы, Пайпы

    • Вложенные компоненты и передача данных в компонент и из него.
    • Вывод контента с помощью ng-content (content projection).
    • Доступ к елементам шаблона через ViewChild/ContentChild.
    • Применение директив из коробки (ngIf, ngClass, ngFor..).
    • Pipe и фильтрация данных. Impure pipes.
    • Структурные директивы. ViewRef/TemplateRef.

    Сервисы, работа с сетью и внедрение зависимостей

    • Концепция и способы создания провайдеров.
    • Примеры сервис-провайдеров из коробки.
    • Работа с http протоколом. HTTPClient.
    • Передача данных между копонентами.
    • Создание динамических компонентов.

    Формы и навигация

    Работа с формами

    • Работа с формами от шаблона (template-driven forms).
    • Работа с формами от компонента (reactive forms).
    • Единицы постороения форм FormControl, FormGroup, FormArray.
    • Синхронная и асинхронная валидация данных.
    • Создание своего сложного элемент ввода. Работа с ValueAccessor.

    Навигация и маршрутизация

    • Определение состояний, вложенные и абстракные состояния
    • Сервис для доступа к параметра состояния и передача данных в состояния.
    • Стражи(guards) роутера. Аунтификация и контроль доступа к состояниям
    • Множественное представление (для сложных состояний)
    • Ленивая загрузка(lazy loading) и предзагрузка модулей

    Третья часть

    Redux-архитектура для более сложных приложений

    • Основные концепции Redux
    • Платформа NgRX и ее модули
    • Обработка асинхронных событий. Эффекты
    • Агрегация даных. Cелекторы
    • Отладка приложения

    Тесты

    • Unit-тесты для сервисов
    • Специфика тестирования при использовании HttpClient
    • Unit-тесты для компонентов
    • Unit-тесты для директив
    • e2e интеграционные тесты
    Цукерберг рекомендует:  Качественное меню в виде аккордеона для Вашего сайта

    Внутренности фреймворка Angular

    • ZoneJS/ NgZone для удобного управления асинхронностью
    • Механизм обновления состояния (change detection). Статегия OnPush
    • Погружение в исходный код фреймворка

    Как проходит обучение?

    Курс включает в себя 10 насыщенных занятий. Первая встреча традиционно является собранием и не входит в основной блок.

    На каждом занятии мы изучаем что-то новое. Каждый смысловой модуль будет заканчиваться домашним заданием.

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

    Чтобы получить от курса максимум результата, нужно не только слушать, но и делать что-то дома, а затем – показывать преподавателю. Только так, постепенно, с обратной связью от преподавателя, создавая проект на Angular, вы действительно разберётесь, что и как.

    Результат обучения

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

    Гарантия

    • Если объяснения будут вам непонятны
    • Если курсы не дадут вам новых знаний и умений
    • Если вы не сможете подключиться к системе онлайн-обучения

    …то вы сможете получить деньги назад.

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

    Преподаватели

    Занимаюсь современной frontend-разработкой с использованием Angular с 2013 года. С 2020 года веду обучение Javascript, Typescript и Angular. Также имею большой опыт преподавания математических дисциплин в ВУЗе.


    Также работаю как Team/Tech Lead в разработке enterprise-приложений для CША, а также приложения для работы с блокчейн, например система для рекламы, основанная на цифровой валюте cresttoken.com. Предпочитаю стек MEAN.

    JavaScript разработчик и консультант, спикер, активный участник фронтенд сообщества. Занимаюсь программированием более 14 лет(из них 9 лет страстно увлечен JavaScript, 6 лет исследований и экспериментов с Angular).

    Основы AngularJS на практике

    Введение

    AngularJS – фреймворк-библиотека Javascript, разработанная для создания одностраничных приложений на основе MVC (Model-View-Controller) шаблона.

    Будем осваивать данную технологию на практике.

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

    тег с данным кодом:

    script src =» http :// ajax . googleapis . com / ajax / libs / angularjs /1.3.14/ angular . min . js «>

    Следующим шагом мы явно укажем на то, что наша страница является AngularJS приложением. Нужно добавить ng-app директиву, которой мы обозначим корневой элемент приложения. Зачастую таким элементом выступает тег или же тег . Добавим эту директиву к :

    meta charset =»utf-8″>

    script src =»http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js»>

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

    p > Результат произведение чисел 123 и 45 равен : <<123 * 45 >> p >

    Запустим в браузере:

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

    AngularJS позволяет разработчику легко взаимодействовать с пользовательским вводом. Для этого есть соответствующая директива ng-model , которая связывает значения HTML элементов контроля (teaxtarea, input etc.) с приложением. Использовать эти данные поможет директива ng-bind, добавив эти данные во View ( элемент MVC ) и отобразив их на странице.

    Применим полученные знания на практике. В созданный ранее шаблон добавим поле для ввода input > с директивой ng-model и параграф для вывода данных c директивой ng-bind.

    meta charset =»utf-8″>

    script src =»http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js»>

    p > Ввведте свое имя: p >

    input type =»text» ng-model =»yourName»>

    p > Здравствуй, span ng-bind =»yourName»> span > p >

    Откроем в браузере:

    Теперь попробуйте ввести свое имя в поле для ввода.

    Давайте добавим в данный пример дефолтное значение имени, к примеру Анна. Сделаем это, конечно же, с помощью директивы ng-init , которая позволяет инициализировать любую переменную AngularJS приложения.

    В строку добавим директиву ng-init .

    input type =» text » ng — model =» yourName » ng — init =» yourName =’ A нна'»>

    Посмотрим изменения в браузере:

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

    Вывод данных в этом примере можно сделать еще одним способом, а именно, использовав выражение. Заменим на <>.

    Открыв страницу, мы не увидим абсолютно никаких изменений, а все потому, что выражения в AngularJS связывают данные со страничкой точно так же, как и ng-bind директива.

    Как упоминалось в статье ранее, AngularJS строит приложения на основе MVC. Часть модель – представление (Model — View) определяется с помощью директивы ng-app . Контроллер в свою очередь определяется директивой ng-controller .

    Рассмотрим пример с использованием контроллера страницы.

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

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

    html ng-app =»firstApp» ng-controller =»firstController»>

    Далее добавим с типом text для введения имени гостя и еще один с типом submit для добавления гостя в список. Также добавим

    script src =»http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js»> script >

    body ng-app =»firsApp» ng-controller =»firstController»>

    h2 > Мои гости: h2 >

    form ng-submit =»addGuest()»>

    input type =»text» ng-model =»guestsInput» size =»50″ placeholder =»Введите имя гостя»>

    input type =»submit» value =»Добавить гостя»>

    div ng-repeat =»guest in listOfGests»>

    input type =»checkbox» ng-model =»guest.come»> span ng-bind =»guest.guestName»> span >

    p > button ng-click =»remove()»> Удалить гостя button > p >

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

    Скопируйте и добавьте после закрывающегося тега параграфа с кнопкой

    p > button ng — click =» remove ()»> Удалить гостя button > p >

    var app = angular.module( ‘firsApp’ , []);

    app.controller( ‘firstController’ , function ($scope) <

    var countOfGuests = 1;

    var oldGuests = $scope.listOfGests;

    angular.forEach(oldGuests, function (guest) <

    if (!guest.come) $scope.listOfGests.push(guest);

    alert( » Маленькая вечеринка тоже не плохо ! Не печалься! Лучших друзей не бывает много!» );

    > else if (countOfGuests >= 9)<

    alert( «Праздник?! ВЕЧЕРИНИЩЕ!» );

    alert ( «Узкий круг самых близких, это всегда хорошо!» );

    В данном коде у нас есть три функции: добавление и удаление гостя и проверка количества гостей.

    В функции добавления мы берем введенные данные guestsInput и добавляем их в лист listOfGests. Устанавливаем значение чекбокса в false (в нашем случае, это значит, что человек придет / если значение true, то есть галочка стоит — значит не придет), после чего очищаем поле ввода. Далее увеличиваем счетчик гостей и вызываем функцию проверки их количества.

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

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

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

    Добавим несколько гостей:

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

    Когда вы добавите больше 9 друзей, тогда увидите такое оповещение :

    Поздравляем, вот Вы и создали свое первое одностраничное приложение с помощью AngularJS!

    AngularJs — разработка первого веб приложения.

    Дубликаты не найдены

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

    Ну возможно ты прав, мне стоило написать в самом начале что урок для тех кто хоть примерно понимает js и html
    Но только я уже далеко не новичок, 5 лет как минимум этим занимаюсь

    angularjs если что MVW, а не MVC

    Все зависит от того как ты спроектируешь проект.
    Почитай вот тут, может что нового узнаешь https://plus.google.com/+AngularJS/posts/aZNVhj355G2

    ну все правильно, не MVC же. Model-View-Whatever какбэ намекает))

    :) Хорошо, на самом деле все не так трудно. Можно вообще используя дерективы, а можно в самом контроллере все сделать.


    Но по ходу действия обязательно это будет

    Сделайте, пожалуйста) Интересуюсь веб-разработкой. Хоть и только начинаю по сути, но интересно будет узнать что-то новое :)

    Есть angular-material, хотя я не совсем уверен что это то

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

    И засад тут крайне много от кастомизации css до логики. Более того скоро выходит первый релиз angular 2, который будет полностью несовместим с первой версией.

    По сути первый и второй ангуляр совершенно разные фреймворки, гугл сам так позиционирует их.

    :D Скажи спасибо что не битрикс.

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

    Дело в том, что зачастую там изменить уже написанный код нереально тяжко. Я в один dropdown добавлял пустой вариант где то дня два, после ада перелопачивания десятков переменных типа $ebaetoti? переменных и попытки встраивания в логику требуемого null значения.

    Скажи зачем изучать ангуляр, если знаешь хорошо JS (в т.ч. JQuery)?

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

    у нас на нем огромная cms, на которой уже работают 4 проекта, так что ты не прав, к слову серверная часть реализована на java

    Помогает сделать более структурированное приложение и не изобретать велосипед. Ангуляр очень тесно связан с DOM деревом, у него позиция что html не враг, он своими директивами и операторами очень сильно расширяет html.
    Но есть и минусы вроде скорости работы с большим объемом данных.

    Пока не заинтересовал. А для кого html враг?

    И в чем приложения могут быть более структурированы? Желательно пример.

    Ну к примеру приложение которое я писал для windows 10, есть общая модель, есть роуты которые вызывают нужные контроллеры. Весь код и шаблоны все в разных файлах, ангуляр сам все подгрузит и вызовет.
    А в index.html есть лишь тег

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

    кто-то не хочет открывать велосипедостроительный завод

    хотя я тебя полностью поддерживаю

    Кропай дальше. Новичкам интересно.

    Э, не, мужик, MVC это целая архитектура, ее нельзя изложить в двух словах. Раз уж взялся за ангуляр — давай,не подводи.

    Ну я решил особо не нагружать терминологией, а вкратце объяснить.
    Вообще же Angular это не жестко MVC фреймворк, он вообще как MVVM реализован

    3ий год на нём пишу, нет слов — одни эмоции

    Эмоции хорошие? :D
    Единственным минусом пожалуй может являться документация, которая конечно отображает все что нужно, но как-то суховато и новичку не всегда все понятно

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

    Ну это не ангуляр виноват. :D

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

    когда начнешь писать свои директивы, которые будут работать c каким-нить datepicker’ом из ui-bootstrap, то хороших эмоций не возникает)

    переходи на реакт!

    http://app.anna-ph.ru/ — мое приложение для ангуляра, авторизация по логину и паролю мне не дали, так как приложение базируется windows приложением, а там возможно все реализовать через сам вк. Но ест костыль, вводить самому данные в всплывающие окна

    Любопытно для общего сведения. Но сколько я не общался с фронтендщиками, все поголовно плюются на ангуляр и рекомендуют писать на react-js

    PS не холивара ради

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

    А есть ссылка? Я просто совсем далек от фронта, но хочется как минимум быть в курсе

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

    Так у Angular’a нет визуальных компонент из коробки, Так что не такой он и «самодостаточный» (как вы его сравнили с React). С таким же успехом можно назвать Twitter Bootstrap самодостаточным фреймворком: UI уже есть, осталось биндинги и/или основу для MV* прикрутить — и всего-то. Хах) А вот скорость разработки на ангуларе впечатлила. Порог вхождения, конечно был для меня высок, и пришлось к этому в несколько итераций подходить (да, были стадии когда я думал об одном — да пошло оно всё нафиг, и без ангулара много дел), однако результат оправдал все ожидания.

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

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

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

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

    Тем не менее популярность подобных инструментов как никогда высока, и, как минимум, знать об их существовании стоит. Рассказать обо всех доступных варинтах за раз невозможно, поэтому в этой серии статей мы рассмотрим фреймворк Angular.js. Если вас интересуют альтернативные решения, то вы можете посмотреть на них на сайте http://todomvc.com/ – авторы этого проекта реализуют одно и тоже приложение на разных фреймворках, чтобы разработчикам было легче выбрать наиболее подходящий для них.

    Цукерберг рекомендует:  Вакансии КОМПЛИЦЕРТЕ ТЕХ

    Почему Angular.js?

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

    Angular.js на данный момент является самым популярным фреймворком, разработка которого поддерживается парнями из Google. Помимо богатой стандартной библиотеки, для «ангуляра» написано много пользовательских расширений, с частью которых мы познакомимся в пределах этой серии статей. Есть даже специальный фреймворк поверх Angular.js, который значительно облегчает написание кроссплатформенных мобильных приложений: http://ionicframework.com.

    Что насчёт Angular.js 2.0?

    Текущая версия Angular.js, на которой будет основан этот цикл статей – 1.3. Разработчики заявили, что версия 2.0, которая выйдет неизвестно когда (но не раньше чем через год-полтора), будет несовместимой с текущей версией фреймворка, но при этом сохранит большинство концепций, заложенных в него. Так же разработчики обещают поддерживать версии 1.x на протяжении нескольких лет после релиза 2.0.

    Это означает, что ещё как минимум 2 года Angular.js 1.x будет по-прежнему доминировать, на нём по-прежнему написаны тысячи приложений и множество вакансий (особенно в Европе) указывают именно этот фреймворках в требованиях. Конечно, в какой-то момент вам придётся потратить пару часов на то, чтобы разобраться с новой версией 2.0 и, скорее всего, пару дней на переход с 1.x на 2.0. Тем не менее, знания Angular.js не будут выброшены на помойку, ведь, как вы уже знаете, это вопрос не конкретной технологии, а умения разобраться в любой из них и применять для своей задачи ;-)

    Так что же мы будем делать?

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

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

    Знакомство с 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.

    Цукерберг рекомендует:  C++ - Подскажите, почему не работает удаление пробелов c++

    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-разработки иначе.

    Большие сайты на AngularJS

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

    Что такое AngularJS и где он используется?

    AngularJS (Angular, Ангулар) — это JS фреймворк для frontend-разработчиков, с помощью которого можно создавать одностраничные веб-приложения (Single Page Application). На первый взгляд такие приложения не отличаются от обычных веб-страниц. Тогда как определить, что перед нами веб-приложение? Если когда приходит письмо, появляются новые записи в ленте друзей или мы подтверждаем отправку формы страницу не приходится перегружать, чтобы увидеть обновления, то перед нами пример приложения на AngularJS или другом JS фреймворке. Например, современная версия почтовой службы от Google — это веб-приложение:

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

    Ниже мы собрали примеры AngularJS из самых разных сфер деятельности.

    Большие сайты на AngularJS

    The Guardian

    Сайт британской газеты существует уже шесть лет и по состоянию на сентябрь 2015 года занимает третье место по посещаемости среди национальных новостных изданий, которые доступны онлайн. Пользовательский интерфейс веб-сайта представляет собой AngularJS приложение, написанное в соответствии с ES 2015, последним стандартом JavaScript:

    Чтобы создать бесконечную прокрутку результатов поиска, разработчики The Guardian использовали возможности Angular вместе с расширениями RxJS для реактивного программирования, которое ориентировано на работу с изменениями.

    Также AngularJS используется в Grid, системе управления изображениями издания. В ней хранится более 3 миллионов изображений и около 20 тысяч добавляется ежедневно. Как и многие другие компании, поддерживающие развитие полезных проектов с открытым исходным кодом, издание The Guardian сделало систему Grid доступной на Github:

    Что касается перехода на AngularJS 2.0 (дата релиза бета-версии: 15 декабря 2015 года), то, не смотря на его сложности, senior-разработчик издания The Guardian отмечает, что новая версия Angular соответствует текущим тенденциям развития интернет-технологий.

    PayPal

    Компания PayPal предоставляет услуги электронных платежей в 203 странах и регионах и работает с 26 валютами. AngularJS разработчики компании использовали фреймворк в системе оформления и оплаты заказа (PayPal Checkout), которая состоит из:

    1. Родительской страницы
    2. Страницы проверки платежа
    3. Сайдбара
    4. Страницы добавления новой кредитной карты

    Weather.com

    Американский кабельный и спутниковый канал The Weather Channel обзавелся собственным веб-сайтом еще в далеком 1996 году. Сегодня, согласно данным SimilarWeb, weather.com — самый посещаемый погодный сайт в мире.

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

    YouTube для PS3

    Youtube — видеохостинг, принадлежащий компании Google, стоимость которого оценивают в 70 миллиардов долларов США. У сервиса один миллиард пользователей, что составляет треть пользователей Интернета в мире. YouTube доступен на большом количестве устройств, в том числе на консолях от компании Sony. Приложение для PS3 написано с использованием JS-фреймворка AngularJS:

    На сайте музыкального сервиса собрано 150 тысяч видеоклипов, распространяющихся с согласия правообладателей. VEVO получает 12 миллиардов просмотров ежемесячно. При этом для создания фронт-энда сайта использовался JavaScript-фреймворк AngularJS:

    Lego.com

    К запуску мини-серии Rebels, посвященной миру «Звездных войн», датская компания Lego, основанная еще в 1932 году, заказала создание интерактивного конструктора постеров:

    Разработчики решения использовали технику парного программирования, при которой двое людей («ведущий» и «штурман») используют одно рабочее место. «Ведущий» решает проблему в деталях, а «штурман» следит за процессом написания кода и сосредоточен над общей картиной. Через равные промежутки времени они меняются ролями. Используя фреймворк AngularJS, сборщик JS-проектов Browserify и плагин LESS им удалоcь создать быстрое и легковесное решение для продвижения нового продукта компании.

    Upwork и Freelancer

    Обе фриланс-биржи достаточно популярны:

    1. Количество фрилансеров: 10 миллионов для Upwork и 18 миллионов для Freelancer.
    2. Среднее количество доступных проектов: 3,6 миллиона для Upwork и 4,4 для Freelancer.

    При этом и Upwork, и Freelancer используют AngularJS:

    jetBlue

    Популярная американская лоукост авиакомпания, самолетами которой ежегодно летает 35 миллионов людей. jetBlue совершает около 900 перелетов ежедневно и доставляет пассажиров в 95 городов США, стран Карибского бассейна и Латинской Америки. На текущей версии сайта jetBlue используется AngularJS:

    iStock Photo

    Микросток с royalty-free фотографиями, иллюстрациями, аудио и видео принадлежит компании Getty Images. AngularJS используется на главной странице сервиса:

    Localytics

    Сервис бизнес-аналитики для разработчиков и владельцев приложений помогает планировать маркетинговые кампании. Его услугами пользуется 6000 организаций, в том числе Microsoft, The New York Times, Zipcar, HBO и The Weather Channel, о котором мы писали выше.

    Разработчики хотели перенести сервис на JS фреймворк, который предлагает больше возможностей «из коробки». Им пришелся по душе набор плагинов (suite) AngularJS UI который помогает решать распространенные проблемы, связанные с пользовательским интерфейсом. При этом использование AngularJS позволило сократить количество строчек кода по сравнению с предыдущим фреймворком:

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

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

    AngularJS для новичка: вчера, сегодня, завтра

    HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

    Alternatives

    Other frameworks deal with HTML’s shortcomings by either abstracting away HTML, CSS, and/or JavaScript or by providing an imperative way for manipulating the DOM. Neither of these address the root problem that HTML was not designed for dynamic views.

    Extensibility

    AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs. Read on to find out how.

    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих