AngularJS. Рецепты программирования


Содержание

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:

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


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

  • 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», то делаем обратную операцию – невыполненные задачи скрываем, а завершенные отображаем.

    Илон Маск рекомендует:  Что такое код jdtojulian

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

    Тестируем

    Написание тестов – неотъемлемая часть разработки приложения с использованием 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 учебник, уроки

    AngularJS расширяет HTML с новыми атрибутами.

    AngularJS идеально подходит для одностраничного приложения.

    AngularJS легко учить.

    Узнайте AngularJS сейчас!

    Angular 2

    Туториал по AngularJS

    Этот учебник разработан специально, чтобы помочь вам как можно быстрее и эффективнее освоить AngularJS.

    Первое, вы узнаете основы AngularJS: директивы, выражения, фильтры, модули и контроллеры.

    Потом вы узнаете, все, что нужно о AngularJS,а именно: События, DOM формы (ввод, валидация), запросы и многое другое.

    Что вы должны знать перед изучением?

    Перед тем как начать учить AngularJS вы должны понимать:

    Ccылки на уроки:

    1. Введение в AngularJS
    2. Установка и тестовое приложение
    3. MVC архитектура
    4. Первое приложение
    5. Примеры использования директив
    6. Выражения
    7. Контроллеры
    8. Фильтры
    9. Таблицы

    10. HTML DOM
    11. Модули
    12. Формы
    13. Вставки
    14. Ajax
    15. Вид
    16. Скоуп
    17. Сервисы
    18. Внедрение зависимости
    19. Пользовательские директивы
    20. Интернализация

    Дополнительные cсылки:

    Примеры приложений на AngularJS

    • AngularJS – ToDO Лист
    • AngularJS – Блокнот
    • AngularJS – Модальное окно
    • AngularJS – Авторизация
    • AngularJS – Загрузка файла
    • AngularJS – Меню
    • AngularJS – Форма заказа
    • AngularJS – Форма поиска
    • AngularJS – Drag & Drop
    • AngularJS – Корзина
    • AngularJS – Локализация
    • AngularJS – Карты
    • AngularJS – Погода
    • AngularJS – Таймер
    • AngularJS – Листовка
    • AngularJS – LastFM

    Всегда пробуйте код своими руками!

    AngularJS история

    AngularJS был первоначально разработан в 2009 году Мишко Хевери и Адамом Абронсом как программное обеспечение позади сервиса хранения JSON-данных, измеряющихся мегабайтами, для облегчения разработки приложений организациями. Сервис располагался на домене «GetAngular.com» и имел нескольких зарегистрированных пользователей, прежде чем они решили отказаться от идеи бизнеса и выпустить Angular как библиотеку с открытым исходным кодом.

    Абронс покинул проект, но Хевери, работающий в Google, продолжает развивать и поддерживать библиотеку с другими сотрудниками Google Игорем Минаром и Войта Джином.

    Философия Angular

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

    Цели разработки

    • Отделение DOM-манипуляции от логики приложения, что улучшает тестируемость кода.
    • Отношение к тестированию как к важной части разработки. Сложность тестирования напрямую зависит от структурированности кода.
    • Разделение клиентской и серверной стороны, что позволяет вести разработку параллельно.
    • Проведение разработчика через весь путь создания приложения: от проектирования пользовательского интерфейса, через написание бизнес-логики, к тестированию.

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

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

    Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

    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) или же напрямую из приложения.

    Создание веб-приложения с нуля на AngularJS

    Russian (Pусский) translation by Ilya Nikov (you can also view the original English article)

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

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

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

    Начинаем

    Для начала нам понадобится каркас приложения AngularJS, в котором уже есть все необходимые JavaScript и CSS для создания приложения TV Show Premieres. Двигаемся дальше и загружаем этот каркас по кнопке «Загрузить исходные файлы».

    После того, как вы загрузили файлы, вы должны получить такую структуру каталогов, как показано ниже:

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

    После открытия index.html , в вашем браузере по выбору, вы должны увидеть очень простую веб-страницу с простым заголовком и некоторым основным форматированием, как показано ниже:

    Загрузка наших данных

    Первое, что нам нужно, чтобы создать наше приложение TV Show, — это информация о телешоу. Мы будем использовать API, предоставляемый Trakt.tv. Прежде чем мы сможем начать работу, вам понадобится ключ API, вы можете зарегистрироваться и получить его на их веб-сайте.

    Зачем использовать этот API? Нужно ли мне регистрироваться? Мы используем этот API, поэтому наше приложение будет использовать реальные данные и фактически будет весьма полезным после завершения. Кроме того, с помощью этого API нам не нужно делать какую-либо реализацию на стороне сервера в этом учебнике и полностью сосредоточиться на AngularJS. Дополнительная пара минут для регистрации API будет стоить того.

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

    Откройте mainController.js и измените его в соответствии с приведенным ниже кодом:

    Если вы посмотрите в файле index.html для следующей строки:

    Вы увидите, что метод ng-init вызывает функцию init , это означает, что функция init() внутри нашего mainController вызывается после загрузки страницы.

    Если вы прочитали документацию API для метода calendar/premieres , вы увидите, что он принимает три параметра: ваш ключ API, дату начала (например, 20130616) и количество дней.

    Чтобы предоставить все три параметра, нам сначала нужно получить сегодняшнюю дату с использованием метода JavaScript Date() и отформатировать ее к формату даты, указанного в API, для создания строки apiDate . Теперь, когда у нас есть все, что нам нужно, мы можем сделать вызов $http.jsonp для метода API. Это позволит нашему веб-приложению вызывать URL-адрес, который не входит в наш собственный домен, и получать некоторые данные JSON. Убедитесь, что ?callback=JSON_CALLBACK добавлен в URI запроса, чтобы вызываемая функция .success была вызвана в ответ.

    В нашей функции .success мы просто выводим полученные данные в консоль. Откройте index.html в своем браузере и откройте консоль JavaScript, вы увидите следующее:

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

    Отображение наших данных

    Обработка объектов JSON

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

    Вышеприведенный код хорошо прокомментирован и должен быть предельно понятен, давайте взглянем на эти изменения. Во-первых, мы объявляем переменную области scope $scope.results как массив, который будет содержать наши обработанные результаты. Затем мы используем метод angular.forEach (который похож на метод $.each jQuery для тех, кто его знает), чтобы перебирать каждую группу дат и сохранить дату в локальной переменной date .

    Затем мы создаем еще один цикл, который проходит через каждый из телевизионных шоу в пределах этой группы дат, добавляет локально сохраненную дату в объект tvshow и затем, наконец, добавляет каждый объект tvshow к массиву $scope.results . Со всем этим, наш массив $scope.results будет выглядеть следующим образом:

    Создание списка HTML

    Теперь у нас есть некоторые данные, которые мы хотим отобразить в виде списка на нашей странице. Мы можем создать некоторый HTML код с помощью ng-repeat для динамического создания элементов списка на основе данных из $scope.results . Добавьте следующий код HTML в неупорядоченный список, который имеет класс episode-list в index.html :

    Этот HTML-код просто создает единый элемент списка с ng-repeat . ng-repeat=»tvshow in results» указывает ангуляру, чтобы тот повторил этот элемент списка для каждого объекта из массива $scope.results . Помните, что нам не нужно включать область $scope , так как мы находимся внутри элемента с указанным контроллером (подробнее об этом см. предыдущий учебник).

    Внутри элемента li мы можем ссылаться на tvshow как переменную, которая будет хранить все данные объектов для каждого из телевизионных шоу в пределах $scope.results . Ниже приведен пример одного из объектов в пределах $scope.results , поэтому вы можете легко увидеть, как ссылаться на каждый отдельный фрагмент данных:

    Например, в элементе li мы можем получить заголовок шоу, ссылаясь на tvshow.show.title и обернув его в двойные фигурные скобки: <<>> . При таком понимании должно быть легко увидеть, какая информация будет отображаться для каждого элемента списка. Благодаря CSS, включенному в каркас приложения, если вы сохраните эти изменения и откройте index.html в своем браузере, вы должны увидеть красиво отформатированный список телевизионных шоу с соответствующей информацией и изображениями. Это показано на рисунке ниже:

    Условные классы


    Вы может и не заметили:

    . который прикреплен к одному из элементов span в разделе рейтингов в вышеприведенном HTML. ng-class позволяет условно применять классы к элементам HTML. Это особенно будет полезно здесь, так как тогда мы можем применить другой стиль к элементу span процентного диапазона в зависимости от того, высокий или нет процент показов у ТВ-шоу.

    В приведенном выше примере HTML мы хотим применить класс label-success , который является классом Bootstrap Twitter, который будет определять диапазон, чтобы иметь зеленый фон и белый текст. Мы хотим применить этот класс только к элементу, если процентная доля рейтинга больше или равна 50. Мы можем сделать это просто с помощью tvshow.episode.ratings.percentage >= 50 . Просмотрите список отформатированных телешоу в вашем браузере, если какой-либо из процентов соответствует этому условию, они должны отображаться зеленым цветом.

    Создание фильтра поиска

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

    Связывание элементов HTML с областью видимости

    Во-первых, нам нужно объявить переменную $scope.filterText в mainController.js следующим образом:

    Теперь нам нужно добавить текстовый ввод, чтобы пользователь мог ввести поисковый запрос. Затем нам необходимо привязать это поле к вновь объявленной переменной. Добавьте следующий HTML-код в div , который имеет класс search-box в index.html .

    Здесь мы использовали ng-model для привязки этого ввода к переменной $scope.filterText , которую мы объявили в нашей области. Теперь эта переменная всегда будет равна тому, что вводится в этот поле поиска.

    Выполнение фильтрации с ng-repeat

    Теперь, когда у нас есть текст для фильтрации, нам нужно добавить функцию фильтрации в ng-repeat . Благодаря встроенной функциональности фильтра AngularJS нам не нужно писать JavaScript для этого, просто измените свой ng-repeat следующим образом:

    Это так просто! Мы сообщаем AngularJS — прежде чем выводить данные с помощью ng-repeat , что нам нужно применить фильтр на основе переменной filterText. Откройте index.html в браузере и выполните поиск. Предполагая, что вы искали что-то, что существует, вы должны увидеть выбор результатов.

    Создание пользовательского фильтра по жанру

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

    Прежде всего, добавьте следующий HTML-код под полем filterText в index.html , которое мы добавили ранее.

    Из вышеприведенного HTML вы можете видеть, что мы создали элемент выбора, связанный с переменной модели genreFilter . Используя ng-options , мы можем динамически заполнять этот select с помощью массива с именем availableGenres .

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

    Очевидно, что теперь мы объявили как genreFilter , так и availableGenres , которые мы видели в нашем HTML. Мы также добавили некоторый JavaScript, который заполнит наш массив availableGenres . В рамках функции init() , в то время как мы обрабатываем данные JSON, возвращенные из API, мы теперь делаем некоторую дополнительную обработку и добавляем жанры, которые еще не находятся в массиве availableGenres , к этому массиву. Затем он будет заполнять селект любыми доступными жанрами.

    Если вы откроете index.html в своем браузере, вы увидите, что раскрывающийся список жанров выбирается, как показано ниже:

    Когда пользователь выбирает жанр, переменная $scope.genreFilter будет обновлена до выбранного значения.

    Создание настраиваемого фильтра

    Поскольку мы хотим фильтровать определенную часть объектов ТВ-шоу, мы собираемся создать функцию пользовательского фильтра и применить его вместе с фильтром AngularJS в ng-repeat .

    В самом низу mainController.js , после всего остального кода, добавьте следующий JavaScript:

    Вышеупомянутый JavaScript объявляет пользовательский фильтр для нашего приложения с именем isGenre . Функция внутри фильтра принимает два параметра, input и genre . input предоставляется по умолчанию (что мы увидим в одно мгновение) и все данные, которые обрабатывает ng-repeat . genre — это значение, которое нам нужно передать. Все что делает этот фильтр, так это принимает указанный жанр и проверяет, есть ли у каждого из объектов ТВ-шоу внутри input указанный жанр, прикрепленный к ним. Если объект имеет указанный жанр, он добавляет его в массив out , который затем будет возвращен в ng-repeat . Если это не совсем понятно, не беспокойтесь! Скоро все станет ясно.

    Применение пользовательского фильтра

    Теперь, когда у нас есть наш клиентский фильтр, мы можем добавить этот дополнительный фильтр в наш ng-repeat. Измените ng-repeat в index.html следующим образом:

    Это просто связывает другой фильтр с результатом ng-repeat . Теперь вывод будет обработан обоими фильтрами до того, как он будет отображаться на экране. Как вы видите, мы указали наш пользовательский фильтр как isGenre: а затем мы передаем переменную scope genreFilter в качестве параметра, а именно мы предоставляем нашему клиенту фильтр с переменной genre , о которой мы говорили ранее. Помните, что AngularJS также предоставляет в наш фильтр данные, которые ng-repeat обрабатывает с переменной input .

    ОК, наш пользовательский фильтр жанра завершен. Откройте index.html в браузере и проверьте новые функции. Используя этот фильтр, пользователь может легко отфильтровать жанры, которые им не интересны.

    Вызов функций из области

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

    В приведенном выше коде эта функция принимает значение жанра, а затем устанавливает $scope.genreFilter в указанное значение. Когда это произойдет, значение поля выбора фильтра жанра будет обновляться, и фильтр будет применен к результату ng-repeat . Чтобы вызвать эту функцию при нажатии элементов span жанра, добавьте ng-click в элементы жанра span в index.html следующим образом:

    ng-click вызывает нашу ранее созданную функцию setGenreFilter и указывает жанр. Откройте index.html и попробуйте!

    Пользовательская сортировка с помощью AngularJS

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

    Добавьте следующий HTML-код в раскрывающемся списке жанра:

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

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

    Если теперь вы открываете index.html в своем браузере, вы должны увидеть добавленные выпадающие списки, заполненные Air Date, которые уже выбраны в качестве поля сортировки по умолчанию. Это показано на рисунке ниже:

    Илон Маск рекомендует:  Иконки веб-шрифтов альтернатива изображениям

    Наконец, как мы уже сделали с нашими другими фильтрами, нам нужно добавить это в наш ng-repeat , обновите его следующим образом:

    В дополнение к другим фильтрам мы теперь применяем сортировку по нашим данным. Мы сообщаем порядок, используя нашу функцию customOrder , и мы также передаем нашу переменную scopeReverse scope. Откройте index.html в браузере и просмотрите сортировку в действии.

    Вывод

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

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

    • Использование ng-repeat для отображения информации на экране.
    • Связывание с полями ввода, позволяющее пользователям искать и фильтровать вывод ng-repeat .
    • Объединение фильтров на ng-repeat для выполнения нескольких функций фильтрации.
    • Пользовательская сортировка данных.
    • Использование событий, таких как ng-click для ответа на взаимодействие пользователя.
    • Использование ng-class для условного применения стилей к элементам страницы.

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

    Angular CLI создание проекта: основные команды

    Сегодня начинаем разбирать весьма новый фреймворк JavaScript — Angular. Для того чтобы не писать кучу лишнего кода самому, чтобы его запустить и не тратя на это время — сначала мы изучим инструмент Angular CLI.

    Что такое Angular CLI

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

    У вас наверное созрел вопрос, а что именно он может? С помощью его вы можете:

    • Создание стартового проекта.
    • Создание конфигурационных файлов для деплоймента (deployment — prodaction и development).
    • Сгенерировать файлы для тестирования.
    • Проделать минимизацию приложения.
    • Создавать шаблонные файлы: сервисов (service), компонентов (component), навигационных файлов (route).


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

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

    Установка Angular CLI

    Для того чтобы начать необходимо установить:

    1. Node js — серверная часть Javascript.
    2. Npm — менеджер пакетов, без которого мы далеко не уйдем.

    Npm подтянется вместе с Node js при его установки.

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

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

    Заходим на сайт — nodejs. Здесь вас ждет две версии Node js — LTS и Current. Выбирайте LTS и устанавливайте ее.

    Теперь давайте установим Angular CLI на ваш ПК. Для этого вам нужно перейти в командною строку. Это можно сделать двумя способами:

    Или второй способ:

    1. Зажать shift на клавиатуре
    2. Нажать правой кнопкой мыши по пустому месту в папке или рабочем столе
    3. В появившимся списке нажать на пункт «Открыть окно команд».

    Два данных способа относятся к операционной системе Windows

    После открытия командной строки вводим строку ниже. Она представляет собой запрос на скачивание пакета npm:

    • i это укороченная форма слова install (установить).
    • Далее идет название нашего пакета — @angular/cli .
    • -g означает установить данный пакет глобально на весь компьютер. Иначе мы бы установили его только в папку, из которой была вызвана данная команда и смогли использовать функционал только там.

    Эта библиотека большая, поэтому вас понадобиться подождать несколько минут для ее установки.

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

    Команды Angular CLI

    Все команды должны начинаться со слова — ng . Таким образом мы показываем, что именно хотим использовать Angular CLI.

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

    ng new [name] — сгенерирует проект с данным названием — [name] . Вместе с этим установит необходимые зависимости в директорию node_modules — это может занять несколько минут.

    Это будет зависеть от скорости вашего интернета соединения.

    Если вы зайдете в данный проект, то увидите такую картину:

    ng serve — запускает Webpack, который в свою очередь собирает файлы вашего проекта и переносит их в оперативную память вашего компьютера. Если вы замените какой-то файл, то он заново будет пересобирать ваш проект.

    Перейдите на localhost:4200 в браузере и сможете увидеть ваш проект.

    ng serve —prod — также запустит Webpack, но уже будет оптимизировать ваш проект. Таким образом можно уменьшить размер проекта от одной до нескольких сотен килобайт. В нашем случае на

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

    При ng serve мы ни как не можем пощупать собранные файлы.

    ng build —prod — оптимизирует файлы, больше ничем не отличается.

    ng generate [spec_file] [name] — создает [spec_file] с названием [name] и автоматически добавляет(производит import) его в модуль.

    [spec_file] — это левая колонка таблицы

    Файл Запрос
    Component ng g component name
    Service ng g service name
    Module ng g module name
    Pipe ng g pipe name
    Class ng g class name
    Guard ng g guard name
    Interface ng g interface name
    Enum ng g enum name
    Directive ng g directive name
    Routing module ng g module name —routing

    Со всем этими файлами вы познакомитесь позже.

    Замена стилизации в проектах

    Автоматически Angular CLI генерирует стили с типом .css , но его можно поменять на другие более удобные для вас. Например:

    Таким образом у нас есть еще один бонус при использовании Angular CLI. Чтобы изменить стилизацию добавьте такой флаг — —style=[name] :

    Основы 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!

    Уроки 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 – одна из самых популярных библиотек для создания сложных Frontend-приложений.

    Однако, успешная разработка на нём требует хорошего понимания концепций, на которых он построен.

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

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

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

    Toly blog

    Python and Django notes

    Ускоряем разработку на AngularJS с помощью Yeoman, Grunt и Bower

    Mar 26 th , 2014

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

    Что мы рассмотрим

    В этом руководстве мы рассмотрим:

    • генерацию каркаса ANgularJS приложения с помощью Yeoman
    • использование Grunt для ускорения разработки и автоматизации повторяющихся задач
    • использование Bower для добавления сторонних плагинов/фреймворков
    • выполнение небольших изменений в вашем Angular приложении

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

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

    • терминал и знание командной строки
    • установленные NodeJS и NPM
    • знание основ JS, CSS и HTML

    Исходники

    Репозиторий нашего учебного проекта можно найти здесь.

    Давай начнем!

    Хорошо, давайте приступим к реализации. Первое, что нам нужно сделать, это установить Yeoman, Grunt и Bower. Используем NPM, что бы установить все сразу. Выполните следующую команду в терминале:

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

    Yeoman

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

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

    Запустите следующую команду для установки AngularJS генератора:

    Теперь можно сгенерировать новенькое Angular приложение. В новом каталоге проекта запустите:

    Генератор задаст вам пару вопросов. Вы можете ответить утвердительно для установки Twitter Bootstrap. Так же ответьте да для включитьв проект ngResource. Остальное, для текущего проекта, нам не понадобится, поэтому отвечайте — нет.


    Теперь расслабьтесь (на несколько секунд) и наблюдайте как генератор делает свою магию. Yeoman создаст файлы и каталоги, а затем он запустит установку Bower (подробности об этом чуть позже) и NPM установит различные зависимости, и наконец он выполнит начальное конфигурирование.

    Что в коробке?

    Давайте взглянем на то, что сделал нам Yeoman:

    Давайте рассмотрим наиболее важные из них:

    app/ — Каталог содержит ваше статическое приложение. Он включает ​​HTML, CSS и JavaScript, и здесь вы будете заниматься большую часть времени разработки.

    package.json — Этот файл помогает NPM определить наш проект, а также разрешать его зависимости. Он также может содержать всевозможные метаданные, относящиеся к вашему проекту.

    node_modules/ — Название этого каталога говорит само за себя. Здесь хранятся модули node, от которых зависит ваш проект.

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

    component.json — Этот файл используется для уведомления менеджера пакетов Bower о зависимостях проекта, а также другие метаданные. В последних версиях Bower этот файл называется bower.json — об этом чуть позже.

    .bowerrc — Используется для передачт опций в Bower.

    Karma files — Karma — фреймворк для тестирования. Мы будем использовать его для запуска нескольких тестов для нашего Angular приложения.

    Уф! Это довольно много, что бы запомнить — но как только вы больше познакомитесь с работой генератора Yeoman, вам понравится то, что он делает все это за вас.

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

    Bower — пакетный менеджер для веб разработки

    Перед тем как использовать Bower, небольшую часть конфигурации нужно написать самим. Bower недвано изменил название файла component.json на bower.json, таким образом нам нужно привести код в соответствие с этим.

    Первое, что нам нужно сделать, это небольшое изменение в нашей Bower конфигурации в .bowerrc — откройте его и добавьте следующее:

    Илон Маск рекомендует:  Что такое код difftime

    Это скажет пакетному менеджеру Bower использовать файл bower.json для получения инструкций о том как устанавливать этот пакет.

    Так как мы используем Bower для разрешения зависимостей нашего проекта, то также нужно переименовать файл component.json в корне нашего прокета в файл bower.json. Незначительные премудрости при использовании таких передовых технологий.

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

    Отлично, давайте дадим ему поработать. Ранее Yeoman воспользовался Bower что бы установить Bootstrap, но то были только CSS файлы. А нам нужны и модные яваскиптовые виджеты.

    Так как мы делаем Angular приложение, нам нужны скрипты для Bootstrap которые работают с Angular.

    К счастью, команда Angular UI портировала скрипты Bootstrap для Angular. Давайте используем Bower чтобы установить их библиотеку!

    Флаг -save указывает макетному менеджеру добавить зависимость в bower.json.

    Фантастика! Это было просто, не так ли? Теперь перейдите в каталог вашего приложения (app/) и давайте посмотрим, с чем мы будем работать.

    Наша статическое приложение

    Взгляните на содержание каталога app/ :

    index.html — Это должно быть известно большинству читателей, это главная HTML-страница вашего приложения.

    components/ — Это каталог компонентов, такой же как и node_modules/ , но для Bower. Здесь хранятся все библиотеки, которые вы установили с помощью Bower. Например, AngularUI Bootstrap находится здесь.

    scripts/ — Опять же, знакомый для большинства каталог. Здесь хранятся JavaScript файлы ваших приложений. Обратите внимание, что библиотеки, такие как AngularJ, будут находиться в каталоге для компонентов, так что каталог scripts/ только для тех файлов, которые пишете вы сами.

    styles/ — Все ваши CSS/Sass, что бы сделать ваше приложение более красивым.

    views/ — Это каталог, где будут храниться ваши шаблоны для Angular.

    Теперь более внимательно посмотрим на файлы AngularJS.

    AngularJS

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

    Модуль: /app/scripts/app.js

    Контроллер: /app/scripts/controllers/main.js

    Представление: app/views/main.html

    Давайте посмотрим его в действии!

    Мы готовы впервые взлянуть на наше приложение. Вернитесь в корневой каталог вашего приложения и выполните команду:

    Grunt

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

    Grunt проходится по каталогу нашего проекта и подготавливает его для нас, например компилирует подключенный Bootstrap SASS в CSS.

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

    Что бы быть уверенным в корректной работе, откройте исходный код страницы и посмотрите подключенный main.css . Он должен содержать кучу Bootstrap кода — благодаря магии Bower и Grunt.

    Давайте изменим его

    Пришло время попробовать наши силы в изменении проекта. Так как это Angular проект, начнем с тестов.

    Yeoman любезно сгенерировал пример теста, так что давайте начнем с него.

    Мы собираемся добавить еще один элемент в список awesomeThings , поэтому откройте test/spec/controllers/main.js и измените ожидаемую длину списка на 4 вместо 3.

    test/spec/controllers/main.js

    Теперь мы можем использовать еще одну замечательную возможность в Grunt:

    Эта команда запустит наши Karma-тесты. Они должны выдать ошибку потому, что ожидается 4 элемента в awesomeThings , а у нас по прежнему 3. Давайте исправим это и сделаем так, что бы наши тесты прошли.

    Откройте app/scripts/controllers/main.js и добавтье еще один элемент в список:


    app/scripts/controllers/main.js

    Сохраните файл и запустите тесты снова:

    На этот раз они должны успешно завершиться. Теперь вы можете запустить приложение в браузере ( grunt server ) и заметить, что есть дополнительный пункт в списке. Аккуратные да?

    Использование пакета, установленного через Bower

    Давайте используем библиотеку AngularUI Bootstrap, которую мы подключили ранее, что бы наш список awesomeThings стал раскрываемым.

    Важно: Bower — просто пакетный менеджер, он не отвечает за добавление файлов в index.html . Нам нужно сделать это самим.

    Поэтому откройте app/index.html и добавьте следующую строку:

    Потом, в соответствии со вступительным руководством по AngularUI Bootstrap , мы должны добавить их модуль в качестве зависимости в наш модуль Angular.

    Откройте app/scripts/app.js и добавьте ui.bootstrap как зависимость:

    /app/scripts/app.js

    Хорошо, теперь можно его использовать. Сделайте несколько изменений в нашем представлении:

    app/views/main.html

    Мы использовали несколько CSS классов из Bootstrap и переместили директиву ng-repeat что бы создать пункты меню, а не стандартный список.

    Директивы AngularUI Bootstrap работают на классах, так что просто добавив класс dropdown-toggle к тегу, мы получили полностью рабочий выпадающий список!

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

    test/spec/controllers/main.js

    /karma.conf.js

    Запустите grunt test , что бы убедиться, что тесты успешно пройдены.

    Теперь вы можете открыть ваше приложение в браузере ( grunt server ) еще раз и посмотрите на результат вашей работы.

    Заключение

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

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

    Шпаргалка по AngularJS

    Эта статья позволит быстро освоить основы JavaScript-фреймворка AngularJS.

    Другие статьи по AngularJS:

    С чего начать

      1. Подключаем скрипты фреймворка на страничку (взять можно здесь), как минимум, Вам потребуются: angular.js, angular-route.js, angular-locale_ru-ru.js. В рассматриваемом здесь приложении мы используем анимацию, поэтому добавим еще и angular-animate.js.
      2. Создаем app.js — это будет «точка входа» в приложение angular. Внутри объявляем корневой модуль приложения и его зависимости, конфигурируем роуты; если нужно, определяем функцию, которая выполнится при старте приложения, и оборачиваем все это в вызов анонимной функции, «чтобы наружу не торчало ничего»:

      Рассмотрим код подробнее.
      Конструктор модуля принимает два аргумента — имя модуля и массив имен модулей, от которых он зависит.
      Функция config выполняется в момент старта приложения, здесь, во-первых, задается роутинг, а во-вторых, конфигурируются сервисы, предоставляемые провайдерами… ок, мы еще вернемся к этому.
      При конфигурации маршрутов мы задаем url шаблона, который нужно использовать для рендеринга (также можно прямо на месте строкой передать inline-шаблон, только не в templateUrl , а template , но лучше так не делать вообще никогда). Часто здесь же параметром controller обычно задается контроллер (сюрприз!), который будет использоваться для взаимодействия с шаблоном, но мы этого делать не будем, позже объясню почему.
      Функция run выполняется после загрузки всех модулей, нам нечего делать на этом этапе, поэтому мы ничего не делаем в ней (то есть ее можно было вообще не передавать в .run()). Но, к примеру, здесь можно получить текущего пользователя из сессии и сохранить его $rootScope.
      А что за $rootScope ? Для начала стоить сказать, что такое $scope . Скоуп — это модель, «клей» между логикой и шаблонами. Скоупы компонуются и наследуются, образуя древовидную структуру, в контексте скоупов выполняются выражения в шаблонах, скоуп может следить ( $watch ) за выражениями (а также функциями, коллекциями, переменными) и бросать события. Все, что есть в скоупе — доступно в связанном с ним шаблоне и в его дочерних скоупах. На самом деле, я сейчас просто пересказал вступление к статье по скоупам из официальной документации, поэтому советую все же заглянуть в первоисточник.
      Теперь, когда мы разобрались (разобрались же?), что такое скоуп, можно пояснить, что такое $rootScope — это, как не трудно догадаться, родительский скоуп всех скоупов в приложении. Ключевые моменты:

      • Одна штука на приложение
      • Доступен из любого места приложения, достаточно внедрить $rootScope
      • Ловит все события
      • Соответственно, события, брошенные им, дойдут до любого дочернего скоупа
      • Превращается в помойку при злоупотреблении
    1. На страничке приложения в тэг html или body добавляем директиву ng-app=»dummy» тем самым заявляя, что внутри этого тэга будет работать angular-приложение dummy, точка входа в которое описана в одноименном модуле.
    2. Где-то внутри body добавляем блок с директивой ng-view — здесь будут рендериться наши шаблоны в соотстветствии с текущим роутом.
  • Это основные приготовления для angular-приложения. Теперь, прежде чем начать штамповать контроллеры и сервисы, замолвим слово про структуру приложения.

    Структура приложения

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

    Корневая директория называется по имени самого приложения, в ней лежат: контроллер верхнего уровня (app-controller.js), базовые стили приложения (app.css), дефолтный шаблон (app.html) и главный модуль приложения (app.js).

    • разделы приложения (foo и bar), каждый со своими контроллером, шаблоном и стилями;
    • компоненты: здесь храним директивы, сервисы и т.д., которые разделяются по функционалу/сущностям, к которым они относятся (например, все, что имеет дело с message, лежит в одной директории), каждая директива лежит отдельно от другой;
    • конфигурация — здесь, соответственно все constant и value сервисы (url-config.js) и модуль (config.js), в котором все это содержится.

    Предлагаемая структура — иерархическая, например, если раздел foo у нас сильно усложнится и мы решим разбить его на части, то файлы дочерних разделов уже будут храниться в поддиректориях foofoo/customer«, «foo/supplier«).

    Структура модулей соответствует файловой, то есть сервисы MessageManagerFactory и MessageService содержатся в модуле dummy.message , директива MessageList — в модуле dummy.message.messageList , директива MessagePoster — в модуле dummy.message.messagePoster (да, каждая директива хранится в собственном модуле).

    Контроллер

    Контроллер — это функция-конструктор, которая используется для «оживления» шаблона. Типичный сценарий использования: шаблон привязывают к контроллеру на этапе конфигурации, в контроллер передают $scope , набивают его под завязку всеми данными и логикой, которые используются на странице, а потом пытаются совладать с 600-строчным чудовищем. Так делать не надо.
    Во-первых, $scope нужно использовать только тогда, когда без него не обойтись вообще никак, то есть вызов $watch , $emit , $broadcast и т.д. Все функции, объекты и поля лучше держать в экземпляре контроллера:

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

    Убирая код, работающий с сообщениями в MessageManager , мы не только уменьшаем количество кода в контроллере (что само по себе хорошо), но и избавляемся от зависимостей, которые этот код может за собой тащить. (Да, конкретно для данного случая — это overkill, MessageManager всего-то умеет дергать сервис для отправки/получения/удаления сообщений и выполняет простые callback’и, но идея, думаю, ясна).

    $scope же здесь используется только для задания обработчика события message.new.local (мы ждем, что один из дочерних контроллеров или директив может создать новое сообщение).

    В шаблоне все это используется так:

    AppController объявлен как «главный» контроллер приложения, поэтому он будет доступен везде как appCtrl . Это удобно, но так же, как и с $rootScope этим лучше не злоупотреблять. В данном приложении мы используем эту возможность для доступа к списку сообщений в дочерних контроллерах.

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

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

    В самом шаблоне, все достаточно просто: показываем «приветствие» из поля greeting , которое меняется по клику на кнопку «Say Hi». Далее у нас подключена директива messageList для вывода списка сообщений. Для запросов к серверу для получения, отправки и удаления сообщений служат три кнопки «Save new», «Get all», «Delete all», а статус выполнения запроса выводится чуть ниже.

    Директивы

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

    Директивы можно разделить на два типа: изменяющие поведение элемента (draggable, collapsable и т.д.) и кастомные ui-компоненты (контрол для пагинации, календарь, модальное окно).

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

    Рассмотрим код простой директивы, оборачивающей элемент в «гармошку» — collapsable:

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

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

    1) restrict — определяет, в качестве чего можно использовать директиву, возможные варианты: A — атрибут, E — элемент, и, с недавних пор, С — класс.

    2) link — основная функция для «поведенческих» директив, здесь мы имеем доступ к $scope , jqueryLite-обертке элемента, к которому директива применена, и его атрибутам (в виде хэша). link выполняется после того, как манипуляция с DOM (для этой директивы) была завершена.

    3) transclude — с этим все не так просто. Если установлен в true , изменяет скоуп директивы так, что его содержимое замещается содержимым родительского скоупа. Таким образом, если и в скоупе директивы, и в скоупе контроллера задать одноименные поля, в шаблоне директивы использоваться будет поле из скоупа контроллера. Этот параметр следует использовать только вместе c директивой ng-transclude , для подстановки фрагмента DOM извне в «тело» директивы — вставленный фрагмент шаблона не потеряет доступ к переменным в родительском $scope, если он их использовал, и нам не придется передавать их в качестве параметра (ну и если не выставить trancslude в true , у вас вылетит Error: orphane ng-transclude directive ). В данном случае, список сообщений (message-list) будет «подставлен» внутрь блока div в шаблоне директивы с атрибутом ng-transclude (при этом все текущее содержимое div’a будет удалено).

    4) templateUrl — url, по которому будет запрошен шаблон для директивы.

    Теперь рассмотрим директиву с изолированным скоупом — messageList :

    Здесь в конфиге директивы три новых параметра:

    1. scope — если сюда передать хэш (даже пустой), у директивы будет изолированный скоуп (неизолированный скоуп прототипически наследует родительский). Заполняется этот хэш таким образом, что ключ — это название свойства у скоупа, а значение — имя атрибута, значение которого будет связано с этим свойством. На то, как именно будут «забиндены» значения атрибутов на свойства в скоупе, влияют префиксы перед именем атрибута:
      • @ — значение из атрибута будет передано в свойство скоупа директивы строкой.
      • & — свойство директивы будет функцией, интепретирующей выражение, содержащееся в атрибуте. Именно этот префикс используется здесь. Таким образом, вызов $scope.getMessages() вызовет appCtrl.getMessages() и вернет массив сообщений.
      • = — свойство скоупа директивы будет «забиндено» на объект, имя которого указано в атрибуте, т.е. будет создана двухсторонняя связь.
      • ? — флаг необязательности наличия значения, используется в дополнение к другим.
    2. controller — имя контроллера, который будет прикреплен к шаблону директивы.
    3. replace — если установлен в true, блок директивы будет заменен контентом шаблона директивы.

    В контроллере директивы можно также увидеть использование функции $watchCollection — angular будет следить за состоянием массива или хэша, если его состояние изменится, будет вызвана callback функция с двумя параметрами — newValue и oldValue .

    В шаблоне мы выводим список сообщений в messages с помощью ng-repeat , при этом выполняется сортировка по полю, имя которого хранится в sortBy , sortBy при этом задается из select’a.

    Для каждого сообщения мы выводим дату, при этом форматирование выполняется с помощью фильтра angular’a date .

    Сервисы

    Видов сервисов в angular — пять штук:

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

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

    В фабрике определена функция-конструктор объектов MessageManager , заданы методы прототипа MessageManager , приватные функции вынесены в хэш _private , и объявлена «статическая» приватная функция _filterNew (статическая в том смысле, что не обращается к членам экземпляра MessageManager ). На выходе фабрики — литерал объекта с единственным методом — make .
    service — отличается от фабрики тем, что при первом использовании функция будет использована как конструктор объекта. Приведем код нашего сервиса сообщений:

    В сервисе определяется конструктор объектов Message (возможно, не самое лучшее решение, да); url для вызова api сервера берется из constant сервиса urlConfig ; для экземпляра самого сервиса определены методы для вызова сервера ( post , delete , get ), метод для создания экземпляра Message и метод для конвертации из json, пришедшего с сервера, в объект Message (все сообщения с сервера конвертируются, таким образом, все наши сообщения в angular-приложении — экземпляры Message ).
    provider — сервис, который можно использовать, если требуется некая конфигурация при старте приложения. В таком сервисе должна быть определена функция $get() , результат выполнения которой будет предоставлен клиенту сервиса. В сам провайдер можно добавить какие-либо функции для его конфигурации:

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

    Подробнее о наследовании $scope

    Скоупы в большинстве случаев ( ng-include , ng-switch , ng-controller , ng-transcluded , директивы с параметром scope: true ) наследуются прототипически (не уверен, что есть такое слово), из чего следует:

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

    Стоит отметить, что ng-repeat создает новый скоуп для каждой итерации, значения полей которого копируются из соответствующего элемента итерируемой коллекции родительского скоупа. Поэтому не стоит использовать массивы примитивов в ng-repeat , разве что только для read-only.

    Скоупы не наследуются прототипически в следующих случаях:

    1. Создание директивы с параметром scope: false (по умолчанию). В данном случае, директива использует родительский скоуп как свой собственный, что естественно нежелательно использовать, т.к. может привести к трудноуловимым багам.
    2. Создание директивы с параметром scope: <> . Как уже говорилось выше, создает изолированный скоуп. Поля такого скоупа никак не связаны с родительскими, однако доступ к его полям (родителя) можно получить через атрибуты-параметры директивы (используя биндинги ‘@’, ‘&’ и ‘=’).

    Доступ к родительскому, соседнему или дочерним скоупам можно получить с помощью следующих свойств: $scope : $parent , $$nextSibling , $$childTail и $$childHead .

    Подробнее обо всей этой кухне можно почитать здесь.

    О применении $scope.$apply()

    Вызов этой функции заставляет angular обновить состояние шаблона в соответствии c актуальным состоянием шаблона, однако, если вам пришлось использовать это — скорее всего, вы сделали что-то неправильно: использовали setTimeout вместо $timeout , setInterval вместо $interval , element.on(‘click’) вместо ng-click и т.д. В редких случаях использование $apply оправдано — необходимо изменить модель извне angular -приложения, но мне пока не приходилось с таким сталкиваться. В таких случаях использовать $apply нужно следующим образом (украдено отсюда):

    И далее вызываем safeApply() везде, где нам требуется вызов $apply() .

    Ссылка на репозиторий демо-приложения на гитхабе: ng-help.

  • Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL