Angular CLI советы по использованию, описание функций и примеры работы с проектом


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

Angular CLI: советы по использованию, описание функций и примеры работы с проектом

Angular 2 – это open source фреймворк для создания мобильных, десктопных и веб-приложений.

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

В данной статье мы создадим небольшое Angular 2 веб-приложение, которое позволит делать следующие вещи:

  • Быстро создавать новые записи, используя поле ввода, простым нажатием клавиши Enter
  • Выбирать статус записи
  • Удалять ненужные записи

По этой ссылке доступно демо приложения. Все исходные коды приложения можно найти в GitHub репозитории.

Итак, давайте начнём!

Angular CLI

Одним из самых простых способов создать новое Angular 2 приложение – использовать интерфейс командной строки (CLI) для Angular от разработчиков этого фреймворка, который позволит:

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

Для установки Angular CLI необходимо запустить в командной строке:

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

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

Если всё установлено верно, то будет выведена версия пакета.

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

Генерируем наше приложение

Теперь, когда у нас есть установленный Angular CLI, мы можем использовать его для создания стартового шаблона для нашего приложения:

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

После генерации шаблона, выполним следующие команды:

Тем самым, у нас будет запущенный локальный сервер, который обслуживает наше приложение и доступен по адресу http://localhost:4200/. Также при изменении кода, наше приложение будет автоматически перезагружаться, что добавит немного комфорта в процесс разработки.

Составные части Angular

При выполнении команды ng new , Angular CLI создал для нас стартовый Angular 2 шаблон, но это только лишь одна из полезных возможностей, предоставляемых этим инструментом. Этот инструмент также поможет нам добавить дополнительные составные части в существующее Angular приложение, при помощи команды ng generate :

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

Для нашего приложения нам понадобятся:

  • Todo класс для представления каждой отдельной записи
  • TodoService для создания, обновления и удаления записи
  • TodoApp компонент для отображения пользовательского интерфейса

Итак, давайте добавим последовательно все эти компоненты в наше приложение.

Создание класса Todo

По той причине, что мы используем TypeScript, у нас есть возможность создать класс для представления Todo записей. Поэтому, воспользуемся возможностями Angular CLI для генерации Todo класса:

Что создаст следующие файлы:

Давайте откроем файл src/app/todo.ts и заменим его содержимое на:

В нашем случае, каждая Todo запись имеет три свойства:

  • id : числовой тип, уникальный ID каждой записи
  • title : строковый тип, название записи
  • complete : булевый тип, статус для записи – завершена задача или нет

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

Angular CLI также создал для нас src/app/todo.spec.ts файл, поэтому давайте добавим в него юнит-тест, чтобы убедиться в работоспособности логики конструктора:

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

Которая запустит окружение для тестирования Karma и выполнит все наши тесты.

Если тесты не были пройдены успешно, то, возможно, вы допустили какую-то ошибку в коде приложения. Просто сравните ваш код с кодом, находящимся в репозитории приложения: https://github.com/sbogdanov108/angular2_crud

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

Создание Todo сервиса

TodoService , который будет нами создан, должен отвечать за управление Todo записями. В будущей статье, мы разберём, как взаимодействовать с REST API сервисом, но в рамках данной статьи, мы используем простое хранение всех данных приложения в оперативной памяти.

Приступим к генерации нового сервиса с помощью Angular CLI:

Этой командой мы создадим файлы:

Сейчас нам нужно добавить логику работу сервиса TodoService в файл src/app/todo.service.ts :

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

И чтобы убедиться, что написанная нами логика работает, давайте добавим несколько юнит-тестов в файл src/app/todo.service.spec.ts , который был сгенерирован Angular CLI.

Так как Angular CLI уже создал для нас заготовку кода, всё, что остаётся сделать – реализовать нужные тесты:

Karma поставляется с встроенным и предварительно сконфигурированным фреймворком для тестирования Jasmine. Вы можете ознакомиться с документацией Jasmin для лучшего понимания синтаксиса этого фреймворка.

Чтобы проверить правильность работы нашей бизнес-логики, заново запустим наши юнит-тесты:

Отлично, всё работает! Теперь самое время создать интерфейс нашего приложения.

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

Создание TodoApp компонента

И снова давайте используем Angular CLI для генерации компонента:

Эта команда создаст следующие файлы:

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

Давайте начнём с добавления шаблона для компонента в файл src/app/todo-app/todo-app.component.html :

Далее приведено короткое представление Angular синтаксиса для шаблонов, в случае, если вы ещё с ним не сталкивались:

  • [свойство]=»выражение» : назначить свойству результат выражения
  • (событие)=»утверждение» : выполнить утверждение, когда произойдёт событие
  • [(свойство)]=»выражение» : создать двухстороннее связывание с указанным выражением
  • [ : добавить ваш_класс CSS к этому элементу, когда выражение будет истинным
  • [style.color]=»выражение» : назначить свойство CSS color в зависимости от результата выполнения выражения

Если вам не знаком синтаксис Angular для шаблонов, то необходимо ознакомится с официальной документацией на эту тему.

Давайте посмотрим, что происходит в нашем шаблоне. На самом верху есть поле ввода для создания новой записи:

  • [(ngModel)]=»newTodo.title» : добавляет двухстороннее связывание между значением input и newTodo.title
  • (keyup.enter)=»addTodo()» : говорит Angular, чтобы он выполнил метод addTodo() , когда клавиша Enter была нажата в поле ввода


Не беспокойтесь пока о том, откуда появились newTodo или addTodo() – мы вскоре их рассмотрим более подробно. Просто попытайтесь понять смысл шаблона.

Далее следует секция для вывода записей todo:

  • *ngIf=»todos.length > 0″ : показать элемент section и всё его содержимое, только при условии, что есть хотя бы одна запись todo

Внутри этой секции, мы просим Angular сгенерировать li элементы для каждой записи:

  • *ngFor=»let todo of todos» : в каждой итерации цикла, мы проходимся по записям todos и назначаем конкретную запись в переменную todo
  • [ : применить класс CSS complete к элементу li , при условии, когда todo.complete является истиной

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

  • (click)=»toggleTodoComplete(todo)» : выполнить toggleTodoComplete(todo) при клике на этом чекбоксе
  • [checked]=»todo.complete» : назначить значение todo.complete свойству checked
  • (click)=»removeTodo(todo)» : выполнить метод removeTodo(todo) , когда была нажата кнопка

Хорошо, теперь давайте вздохнём �� Мы прошлись через довольно-таки большое количество синтаксиса.

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

На данный момент, вы могли удивиться – как же выражения addTodo() и newTodo.title могут быть выполнены. Ведь мы ещё не определили их, поэтому, откуда Angular узнает, что они значат?

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

Класс компонента нашего TodoAppComponent определён в src/app/todo-app/todo-app.component.ts .

Angular CLI уже создал для нас заготовку класса TodoAppComponent :

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

Нам понадобится экземпляр TodoService, поэтому, давайте начнём со вставки его в наш компонент.

Первым делом, мы импортируем TodoService класс и определим его в массиве providers декоратора Component :

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

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

Теперь, когда мы объявили зависимость, можно использовать экземпляр TodoService в конструкторе TodoAppComponent :

Сейчас мы можем реализовать всю необходимую логику для работы нашего шаблона, добавив свойства и методы в TodoAppComponent класс:

Топ-пост этого месяца:  Jetpack плагин

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

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

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

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

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

Теперь на осталось сделать пару шагов, чтобы получить готовое приложение.

Последние штрихи

Для начала найдём в нашем проекте файл src/app/angular2-todo-app.component.ts и внесём в него изменения:

Главные изменения состоят в том, что мы импортировали созданный нами компонент TodoAppComponent для вывода записей, и внесли в декоратор Component указание использовать класс TodoAppComponent для обработки директивы app-todo , описанной в этом классе.

Теперь откроем файл src/app/angular2-todo-app.component.html и заменим всё его содержимое на вызов директивы:

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

Добавим предварительно подготовленные стили, которые можно взять по ссылке. И вставим их в файл src/app/todo-app/todo-app.component.css . После сохранения у нас получится полностью готовое и работоспособное приложение.

И до того, как мы закончим этот туториал, давайте попробуем сделать одну интересную вещь с помощью Angular CLI.

Деплой приложения на GitHub Pages

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

Для начала нам нужно создать репозиторий на GitHub с именем, которое указано в файле package.json :

Затем выполнить команду:

Команда github-pages:deploy говорить Angular CLI сделать билд статической версии Angular приложения и выполнить его push в бранч gh-pages нашего GitHub репозитория.

Теперь, созданное нами приложение доступно по адресу: https://sbogdanov108.github.io/angular2_crud/

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

Подводя итог…

Angular 2 – крайне мощный инструмент для создания приложения, без всякого сомнения.

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

  • Мы узнали, как установить Angular CLI и как много времени этот инструмент может сохранить для нас, при создании нового приложения или добавление функционала к существующему
  • Мы изучили, как реализовать бизнес-логику в сервисах Angular и как произвести тестирование этой логики используя юнит-тесты
  • Как использовать компоненты для взаимодействия с пользователем и каким образом делегировать логику работы сервису, используя вставку зависимостей
  • Мы изучили основы синтаксиса шаблонов Angular и немного коснулись темы работы зависимостей в Angular
  • И под конец, мы узнали, как можно быстро развернуть наше приложение на GitHub Pages

Осталось много того, о чём ещё хотелось бы поговорить, но это уже темы для следующих статей:

  • Взаимодействие с REST API бэкэндом, используя Angular 2 HTTP сервис
  • Фильтрация записей todo с помощью Angular pipes
  • Реализация навигации для создания многостраничного приложения

И ещё много другого…

Исходные коды приложения доступны в GitHub репозитории по ссылке.

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

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

Как правильно собрать проект angular-cli?

Создал проект через ng new. Далее запустил ничего не изменяя, всё работает. Проробывал собрать его через ng build —prod, всё прошло успешно, появился папка dist c index.html и другими скриптами для работы angular. Открыл index.html в браузере, а там ничего нет, пустая страница, хоть в коде всё прописанно и подключено. Может я что-то делаю не правиль, просто я новичок в angular. Прошу вашей помощи.

3 ответа 3

для запуска в режиме разработчика:

если надо запустить на определенном порте/хосту:

Переходм из браузера на:

По-хорошему требуется запустить ng serve — команда соберет проект, создаст на localhost:4200 локальный сервер и начнет отслеживание изменений исходного кода для пересборки в реальном времени. Вы пишите — все обновляется на лету.

Команда ng build —prod собирает Ваш проект в папку dist или в любую другую папку которую Вы укажете в свойстве «outDir»: «dist», файла angular-cli.json. Проект будет собран с включенной AOT компиляцией, минификацией кода, а так же будут включены некоторые другие функции оптимизации (подробнее).

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

Команда ng serve собирает проект, но так же располагает его на веб-сервере, соответственно весь функционал оптимизации отключен. Если я не путаю, то в данном случае использует webpack-dev-server встроенный в angular-cli.

Как правильно собрать проект под Angular 2 с помощью angular cli?

Доброго времени суток.
Собираю проект с помощью angular cli. При сборке, как и написано в руководстве, хелпе, мануалах, получаю 3 отдельных файла — inline.js, styles.bundle.js, main.bundle.js. Мне нужно, чтобы файл был один — someapp.js . Это возможно? Как это сделать (получить при сборке один файл проекта с заданным именем) ?

З.Ы. Собираю проект командой ng build
З.З.Ы. Gulp, Grunt и другие утилиты такого рода, ставить дополнительно не хочу, т.к. считаю, что angular cli — должно быть достаточно.

  • Вопрос задан более двух лет назад
  • 1539 просмотров

Ну Angular-CLI на это не расчитан, если хочешь сжать в один файл что не очень практично:) то используй Webpack, Grunt, Gulp. На свой фкус.

Но можно допустим сжать в свою папку по назначению
ng build —target=production —output-path=someapp

angular-cli Создание компонентов

пример

Чтобы добавить компонент с селектором [prefix]-user-list , запустите:

префикс предотвращает конфликты имен элементов с компонентами в других приложениях и с собственными элементами HTML. Так, например, если префикс app — генерируется компонент будет иметь app-user-list выбора.

  • Чтобы предотвратить использование префикса, добавьте флаг —prefix false или -p false
  • Чтобы предотвратить .spec файлов .spec добавьте —spec false или -sp false flag
  • Чтобы использовать встроенные html-шаблоны вместо внешних шаблонов, добавьте —inline-template или -it флаг
  • Чтобы использовать встроенные стили вместо внешних стилей, добавьте —inline-style или -is flag
  • Чтобы предотвратить создание папок, добавьте —flat или -f

Вы также можете комбинировать перечисленные выше флаги. Например, для создания файла .component.ts без файлов .css , .html , .spec и папки используйте следующую команду.

Все generate component флаги generate component :

Инструментарий Angular-разработчика: что нужно знать и уметь?

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

  • JavaScript де-факто является стандартным языком программирования для создания клиентской части веб-приложений.
  • TypeScript — надмножество JavaScript, позволяющее повысить продуктивность разработчиков. TypeScript поддерживает большую часть функциональности ES6 и добавляет необязательные типы, интерфейсы, аннотации метаданных и пр.
  • Анализатор кода TypeScript использует файлы с определением типов для кода, который изначально не был написан на TypeScript. DefinitelyTyped представляет собой популярную коллекцию подобных файлов, содержащих описание API сотен библиотек и фреймворков JavaScript. Определение типов позволяет IDE предоставлять помощь в зависимости от контекста и выделять ошибки. Вы будете устанавливать файлы с определением типов с помощью структуры @types .
  • Поскольку большинство браузеров поддерживают лишь синтаксис ECMAScript 5 (ES5), для развертывания вам понадобится скомпилировать (преобразовать из одного языка в другой) код, написанный на TypeScript или ES6, к ES5. Angular-разработчики могут использовать для этих целей Babel, Traceur и компилятор TypeScript.
  • SystemJS — универсальный загрузчик модулей, который загружает модули, созданные в соответствии со стандартами ES6, AMD и CommonJS.
  • Angular CLI — генератор кода, позволяющий генерировать новые проекты, компоненты, сервисы и маршруты для Angular, а также создавать приложение для развертывания.
  • Node.js — платформа, построенная на движке JavaScript для Chrome. Содержит фреймворк и среду выполнения для запуска кода JavaScript за пределами браузера. Эта среда выполнения понадобится, например, для установки инструментов, необходимых при разработке приложений Angular.
  • npm — менеджер пакетов, позволяющий загружать инструменты, а также библиотеки и фреймворки JavaScript. Этот менеджер пакетов имеет репозиторий, в котором содержатся тысячи элементов. Вы будете использовать его для установки практически всего: от инструментов разработчика (например, компилятора TypeScript) до зависимостей приложений (таких как Angular, jQuery и др.). С помощью npm можно запускать сценарии. Вы будете использовать эту функциональность, чтобы запускать серверы HTTP, а также для автоматизации сборки.
  • Bower раньше был популярным менеджером пакетов, предназначенным для разрешения зависимостей приложений (наподобие Angular и jQuery). Мы больше не будем использовать его, поскольку все, что нужно, можно загрузить с помощью npm .
  • jspm — еще один менеджер пакетов. Зачем он нужен, если npm может позаботиться обо всех зависимостях? Современные веб-приложения состоят из загружаемых модулей, и jspm интегрирует SystemJS, что позволяет без труда загружать подобные модули.
  • Grunt — средство для запуска задач. Между разработкой и развертыванием находится много этапов, и все они должны быть автоматизированы. Вам может понадобиться скомпилировать код, написанный на TypeScript или ES6, в более широко поддерживаемый синтаксис ES5, а код, изображения и файлы CSS — минимизировать. Кроме того, может воникнуть необходимость включить все задачи, которые проверяют качество кода, и модульные тесты для вашего приложения. Grunt поможет сконфигурировать все задачи и их зависимости, используя файл JSON, поэтому процесс будет на 100 % автоматизирован.
  • Gulp — еще одно средство для запуска задач. Оно может автоматизировать задачи точно так же, как и Grunt, но конфигурировать вы будете с помощью не JSON, а JavaScript. Это позволит при необходимости выполнить отладку.
  • JSLint и ESLint — анализаторы кода, которые определяют проблемные шаблоны в программах JavaScript или документах, отформатированных в JSON. Они являются инструментами проверки качества кода. Запуск программы JavaScript с помощью JSLint или ESLint приведет к появлению предупреждений, указывающих на способы улучшения качества кода программы.
  • TSLint — инструмент проверки качества кода для TypeScript. Он имеет набор расширяемых правил для навязывания рекомендованного стиля написания кода и шаблонов.
  • Minifiers, как и UglifyJS, уменьшает размер файлов. В JavaScript эти программные средства удаляют комментарии и line breaks, а также укорачивают имена переменных. Минификацию можно выполнить для HTML, CSS и файлов изображений.
  • Упаковщики, такие как Webpack, объединяют несколько файлов и их зависимости в один файл.
  • Поскольку синтаксис JavaScript очень либерален, для кода приложения требуется тестирование, поэтому нужно выбрать один из фреймворков тестирования. Я предпочитаю использовать фреймворк Jasmine и средство для запуска тестов Karma.
  • JavaScript и TypeScript широко поддерживаются современными >Представленный список может выглядеть устрашающе, но вам не нужно использовать каждый из его компонентов. Начинающему Angular-разработчик необходимо уметь применять следующие инструменты:

  • npm для конфигурирования приложений, установки утилит и зависимостей. Вы будете задействовать сценарии npm, чтобы запускать веб-серверы и задачи при автоматизации сборки;
  • Node.js в качестве среды выполнения для запускаемых утилит, а также как фреймворк для написания веб-сервера;
  • SystemJS для загрузки кода приложения и динамического компилирования TypeScript в браузере;
  • компилятор командной строки TypeScript под названием tsc для запуска и программирования приложения с помощью Node;
  • Jasmine для создания модульных тестов и Karma для их запуска;
  • Webpack для минимизации и упаковки приложений для развертывания.

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

На рис. 1 показано, как инструменты могут применяться на разных этапах процессов разработки и развертывания.

Рис. 1. Используемые инструменты

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

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

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

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

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


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

Что такое AngularJS?

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

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

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

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

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

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

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

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

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

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

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

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

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

Форма заказа

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как добавить загрузку в проект angular -cli

Мы хотим использовать bootstrap 4 (4.0.0-alpha.2) в нашем приложении, созданном с помощью angular -cli 1.0.0-beta.5 (w/node v6.1.0).

После загрузки бутстрапа и его зависимостей с npm наш первый подход заключался в добавлении их в angular-cli-build.js :

и импортируйте их в наш index.html

Это отлично работало с ng serve , но как только мы создали сборку с флагом -prod , все эти зависимости исчезли из dist/vendor (сюрприз!).

Как мы планируем обрабатывать такой сценарий (т.е. загружать сценарии начальной загрузки) в проекте, созданном с помощью angular -cli?

У нас были следующие мысли, но мы действительно не знаем, куда идти.

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

скопировать зависимости dist/vendor после нашего ng build -prod ? Но это похоже на что-то angular -cli должно обеспечить, поскольку оно «заботится» о части сборки?

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

Инструментарий Angular-разработчика: что нужно знать и уметь?

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

  • JavaScript де-факто является стандартным языком программирования для создания клиентской части веб-приложений.
  • TypeScript — надмножество JavaScript, позволяющее повысить продуктивность разработчиков. TypeScript поддерживает большую часть функциональности ES6 и добавляет необязательные типы, интерфейсы, аннотации метаданных и пр.
  • Анализатор кода TypeScript использует файлы с определением типов для кода, который изначально не был написан на TypeScript. DefinitelyTyped представляет собой популярную коллекцию подобных файлов, содержащих описание API сотен библиотек и фреймворков JavaScript. Определение типов позволяет IDE предоставлять помощь в зависимости от контекста и выделять ошибки. Вы будете устанавливать файлы с определением типов с помощью структуры @types .
  • Поскольку большинство браузеров поддерживают лишь синтаксис ECMAScript 5 (ES5), для развертывания вам понадобится скомпилировать (преобразовать из одного языка в другой) код, написанный на TypeScript или ES6, к ES5. Angular-разработчики могут использовать для этих целей Babel, Traceur и компилятор TypeScript.
  • SystemJS — универсальный загрузчик модулей, который загружает модули, созданные в соответствии со стандартами ES6, AMD и CommonJS.
  • Angular CLI — генератор кода, позволяющий генерировать новые проекты, компоненты, сервисы и маршруты для Angular, а также создавать приложение для развертывания.
  • Node.js — платформа, построенная на движке JavaScript для Chrome. Содержит фреймворк и среду выполнения для запуска кода JavaScript за пределами браузера. Эта среда выполнения понадобится, например, для установки инструментов, необходимых при разработке приложений Angular.
  • npm — менеджер пакетов, позволяющий загружать инструменты, а также библиотеки и фреймворки JavaScript. Этот менеджер пакетов имеет репозиторий, в котором содержатся тысячи элементов. Вы будете использовать его для установки практически всего: от инструментов разработчика (например, компилятора TypeScript) до зависимостей приложений (таких как Angular, jQuery и др.). С помощью npm можно запускать сценарии. Вы будете использовать эту функциональность, чтобы запускать серверы HTTP, а также для автоматизации сборки.
  • Bower раньше был популярным менеджером пакетов, предназначенным для разрешения зависимостей приложений (наподобие Angular и jQuery). Мы больше не будем использовать его, поскольку все, что нужно, можно загрузить с помощью npm .
  • jspm — еще один менеджер пакетов. Зачем он нужен, если npm может позаботиться обо всех зависимостях? Современные веб-приложения состоят из загружаемых модулей, и jspm интегрирует SystemJS, что позволяет без труда загружать подобные модули.
  • Grunt — средство для запуска задач. Между разработкой и развертыванием находится много этапов, и все они должны быть автоматизированы. Вам может понадобиться скомпилировать код, написанный на TypeScript или ES6, в более широко поддерживаемый синтаксис ES5, а код, изображения и файлы CSS — минимизировать. Кроме того, может воникнуть необходимость включить все задачи, которые проверяют качество кода, и модульные тесты для вашего приложения. Grunt поможет сконфигурировать все задачи и их зависимости, используя файл JSON, поэтому процесс будет на 100 % автоматизирован.
  • Gulp — еще одно средство для запуска задач. Оно может автоматизировать задачи точно так же, как и Grunt, но конфигурировать вы будете с помощью не JSON, а JavaScript. Это позволит при необходимости выполнить отладку.
  • JSLint и ESLint — анализаторы кода, которые определяют проблемные шаблоны в программах JavaScript или документах, отформатированных в JSON. Они являются инструментами проверки качества кода. Запуск программы JavaScript с помощью JSLint или ESLint приведет к появлению предупреждений, указывающих на способы улучшения качества кода программы.
  • TSLint — инструмент проверки качества кода для TypeScript. Он имеет набор расширяемых правил для навязывания рекомендованного стиля написания кода и шаблонов.
  • Minifiers, как и UglifyJS, уменьшает размер файлов. В JavaScript эти программные средства удаляют комментарии и line breaks, а также укорачивают имена переменных. Минификацию можно выполнить для HTML, CSS и файлов изображений.
  • Упаковщики, такие как Webpack, объединяют несколько файлов и их зависимости в один файл.
  • Поскольку синтаксис JavaScript очень либерален, для кода приложения требуется тестирование, поэтому нужно выбрать один из фреймворков тестирования. Я предпочитаю использовать фреймворк Jasmine и средство для запуска тестов Karma.
  • JavaScript и TypeScript широко поддерживаются современными >Представленный список может выглядеть устрашающе, но вам не нужно использовать каждый из его компонентов. Начинающему Angular-разработчик необходимо уметь применять следующие инструменты:

  • npm для конфигурирования приложений, установки утилит и зависимостей. Вы будете задействовать сценарии npm, чтобы запускать веб-серверы и задачи при автоматизации сборки;
  • Node.js в качестве среды выполнения для запускаемых утилит, а также как фреймворк для написания веб-сервера;
  • SystemJS для загрузки кода приложения и динамического компилирования TypeScript в браузере;
  • компилятор командной строки TypeScript под названием tsc для запуска и программирования приложения с помощью Node;
  • Jasmine для создания модульных тестов и Karma для их запуска;
  • Webpack для минимизации и упаковки приложений для развертывания.

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

На рис. 1 показано, как инструменты могут применяться на разных этапах процессов разработки и развертывания.

Рис. 1. Используемые инструменты

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

Топ-пост этого месяца:  Как создать эффект расширения текста при наведении курсора на чистом CSS
Добавить комментарий