angular с чего начать

Введение в Angular

Что такое Angular. Первый проект

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

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

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

Но мы не ограничены языком TypeScript. При желании можем писать приложения на Angular с помощью таких языков как Dart или JavaScript. Однако TypeScript все таки является основным языком для Angular.

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

Следует учитывать, что Angluar 13 поддерживает те версии node.js, которые в текущий момент находятся в статусе «Active LTS» или «Maintenance LTS». На момент написания данной статьи это версии от 14 и 16. Проверить статус определенной версии node.js можно по адресу: https://nodejs.org/en/about/releases/. Поэтому, если Node.js уже ранее был установлен, но имеет более старую или, наоборот новую, но еще не поддерживаемую версию, то лучше его обновить.

То же самое касается и npm. Если версия слишком старая или, наоборот, одна из последних, то Angular может ее не поддерживать. При работе с Angular лучше полагаться на ту версию npm, которая устанавливается вместе с LTS-версией Node.js.

Установка Angular CLI

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

Данная команда установит пакет @angular/cli в качестве глобального модуля, поэтому в последующем при создании новый проектов Angular его не потребуется устанавливать заново.

Ту же команду можно использовать для обновления Angluar CLI при выходе новой версии фреймворка. Проверить версию CLI можно в командной строке/консоли с помощью команды:

Установка пакетов. Package.json

В папке проекта создадим новый файл package.json со следующим содержимым:

Данный файл устанавливает пакеты и зависимости, которые будут использоваться проектом. В секции dependencies в основном определяются пакеты angular, которые необходимы приложению для работы. В секции devDependencies прописаны только те пакеты, которые будут использоваться для разработки. В частности, это пакеты для работы с языком typescript (так как мы будем писать код приложения на языке TypeScript), а также пакеты, необходимые для компиляции приложения с помощью инфраструктуры Angular CLI.

В секции «scripts» описаны используемые команды. В частности, команда ng serve запускает простенький веб-сервер для тестирования приложения и само приложение. А команда ng build компилирует приложение.

Затем откроем командную строку (терминал) и перейдем в ней к папке проекта с помощью команды cd:

Определение приложения

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

Компоненты представляют основные строительные блоки приложения Angular. Каждое приложение Angular имеет как минимум один компонент. Поэтому создадим в папке src/app новый файл, который назовем app.component.ts и в котором определим следующий код компонента:

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

Приложение Angular состоит из модулей. Модульная структура позволяет легко подгружать и задействовать только те модули, которые непосредственно необходимы. И каждое приложение имеет как минимум один корневой модуль. Поэтому создадим в папке src/app новый файл, который назовем app.module.ts со следующим содержимым:

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

С помощью директив import здесь импортируется ряд нужных нам модулей. Прежде всего, это модуль NgModule. Для работы с браузером также требуется модуль BrowserModule. Так как наш компонент использует элемент input или элемент формы, то также подключаем модуль FormsModule. И далее импортируется созданный ранее компонент.

Запуск приложения

Теперь нам надо указать Angular, как запускать наше приложение. Для этого создадим в папке src (на уровень выше, чем расположены файлы app.component.ts и app.module.ts) файл main.ts со следующим содержимым:

Этот код инициализирует платформу, которая запускает приложение, и затем использует эту платформу для загрузки модуля AppModule.

Также в папке src определим еще один файл, который назовем polyfills.ts со следующим кодом:

Создание главной страницы

Далее определим в папке src главную страницу index.html приложения:

Определение конфигурации

Поскольку для определения кода приложения применяется язык TypeScript, поэтому также создадим в корневой папке проекта новый файл tsconfig.json :

Angular.json

Для компиляции приложения мы будем использовать Angular CLI, поэтому нам надо описать поведение CLI с помощью файла angular.json. Итак, добавим в корневую папку проекта новый файл angular.json и определим в нем следующее содержимое:

Проект определяет следующие опции:

projectType : тип проекта. Значение «application» указывает, что проект будет представлять приложение, которое можно будет запускать в браузере

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

sourceRoot : определяет корневую папку файлов с исходным кодом. В нашем случае это папка src, где собственно определены все файлы приложения

Параметр options задает параметры построения файлов. Для команды «build» здесь определены следующие опции:

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

index : путь к главной странице приложения

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

polyfills : путь к файлу полифилов

tsConfig : путь к файлу конфигурации TypeScript

aot : указывает, будет ли использоваться компиляция AOT (Ahead-Of-Time) (предварительная компиляция перед выполнением). В данном случае значение true означает, что она используется

Последняя опция defaultProject указывает на проект по умолчанию. В данном случае это наш единственный проект.

Если мы используем TypeScript для работы с Angular и Angular CLI для компиляции, то эти файлы package.json, tsconfig.json и angular.json фактически будут присутствовать в каждом проекте. И их можно переносить из проекта в проект с минимальными изменениями. Например, в файле angular.json вместо названия проекта «helloapp» будет соответствующее название проекта. В файле package.json можно будет задать какие-то другие версии пакетов, если предыдущие версии устарели. Можно будет изменить название проекта, версию. Можно подправить настройки TypeScript или Angular CLI, но в целом общая организация будет той же.

В итоге у нас получится следующая структура проекта:

Запуск проекта

И теперь, когда все готово, мы можем запустить проект. Для этого в командной строке (терминале) перейдем к папке проекта с помощью команды cd и затем выполним команду ng serve :

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

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

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

Источник

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

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

Что такое Angular?

Angular — это платформа для разработки, написанная на TypeScript. Как платформа Angular включает:

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

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

Что вы создадите

Эта серия руководств проведёт вас через создание приложения со списком дел (to-do list). С помощью этого приложения вы узнаете, как использовать Angular для управления, редактирования, добавления, удаления и фильтрации элементов.

Необходимые условия

Чтобы установить Angular в вашей локальной системе, вам понадобится следующее:

Node.js

Angular требует текущую, последнюю LTS, или поддерживаемую LTS версию Node.js. Для получения информации о конкретных требованиях к версии смотрите ключ engines в package.json файле.

пакетный менеджер npm

Настройка приложения

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

Если вам будет предложено применить строгую проверку типов, вы можете ответить «yes».

Перейдите в ваш новый проект с помощью команды cd :

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

Знакомство с вашим Angular приложением

Таким образом, с самого начала вы используете лучшие приёмы разработки.

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

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

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

Класс

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

HTML-шаблоны

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

Для ссылки на внешний HTML-файл, используется свойство templateUrl :

Чтобы указать напрямую HTML-код, используется свойство template с обратными кавычками:

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

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

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

Стили

Компонент может наследовать общие стили приложения из файла styles.css или переопределять их собственными стилями. Вы можете писать стили для конкретных компонентов прямо в декораторе @Component() или указывая путь к CSS-файлу.

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

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

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

Резюме

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

Источник

Создание первого Angular приложения: основы

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

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

Начинаем

Если вы уже знакомы с TypeScript, вы можете просто начать свое первое приложение на Angular.

Первым шагом будет установка Node.js. Вы можете отправиться на официальный сайт и загрузить соответствующую версию. Менеджер пакетов узлов будет установлен как часть Node.js.

Наконец, вы должны установить Angular CLI, выполнив следующую команду. Установка Angular CLI упростит процесс создания вашего Angular приложения.

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

Обзор информации о стране

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

Основы Angular

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

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

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

Вот декоратор базового компонента, который устанавливает все три значения для CountryDetailComponent :

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

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

При создании компонентов для вашего приложения вам придется импортировать зависимости из разных модулей. Например, мы будем импортировать Component из @angular/core всякий раз, когда мы создаем свой собственный компонент. Вы также можете использовать тот же синтаксис для импорта зависимостей, которые были созданы вами. Часть внутри фигурных скобок используется для указания зависимостей, которые вы хотите импортировать, а часть после from используется для указания того, где Angular может найти зависимость.

Оболочка приложения

Файл app.component.ts содержит логику для нашего компонента, написанного в TypeScript. Вы можете открыть этот файл и обновить свойство title класса AppComponent в «Интересные факты о странах». Файл app.component.ts теперь должен иметь следующий код.

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

Изменения, внесенные в этот файл, будут автоматически отображаться в браузере по адресу http://localhost:4200/. Просто убедитесь, что консоль все еще открыта, и вы уже набрали команду ng serve с начала учебника.

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

Заключение

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

Подводя итог, вам нужно знать основы TypeScript, прежде чем вы сможете создать приложение Angular. На следующем шаге вам необходимо установить Node.js, TypeScript и Angular CLI. После этого вы можете просто запустить кучу команд из раздела «Начало работы» этого руководства, и ваше первое приложение будет собрано и запущено.

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

Пока мы работаем над этой серией учебников, не забудьте проверить Envato Market, чтобы узнать, что доступно для использования и изучения как для Angular, так и для JavaScript в целом.

Источник

Учебник AngularJS: Всеобъемлющее руководство, часть 1

Содержание

1 Введение в AngularJS

Angular – MVW-фреймворк для разработки качественных клиентских веб-приложений на JavaScript. Он создан и поддерживается в Google и предлагает взглянуть на будущее веба, на то, какие новые возможности и стандарты он готовит для нас.

MVW означает Model-View-Whatever (модель – вид – что угодно), то есть гибкость в выборе шаблонов проектирования при разработке приложений. Мы можем выбрать модели MVC (Model-View-Controller) или MVVM (Model-View-ViewModel).

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

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

Инженерные концепции в фрейморках JavaScript

Позиция AngularJS по работе с данными и другими инженерными концепциями отличается от таких фреймворков, как Backbone.js and Ember.js. Мы довольствуемся уже известным нам HTML, а Angular самостоятельно его улучшает. Angular обновляет DOM при любых изменениях Модели, которая живёт себе в чистых Объектах JavaScript с целью связи с данными. Когда обновляется Модель, Angular обновляет Объекты, которые содержат актуальную информацию о состоянии приложения.

2.1 MVC и MVVM

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

Держитесь за кресло – в Angular существует разделение обязанностей и динамический HTML. А это значит, что наши данные живут в Модели, наш HTML живёт в виде маленького шаблона, который будет преобразован в Вид, а Контроллер мы используем для соединения двух этих понятий, обеспечивая поддержку изменений Модели и Вида. То есть, навигация может выводиться динамически, создаваясь из одного элемента списка, и автоматически повторяться для каждого пункта из Модели. Это упрощённая концепция, позже мы ещё поговорим о шаблонах.

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

2.2 Двусторонняя связь данных

Двусторонняя связь данных – очень простая концепция, предоставляющая синхронизацию между слоями Модели и Вида. Изменения Модели передаются в Вид, а изменения Вида автоматически отражаются в Модели. Таким образом, Модель становится актуальным источником данных о состоянии приложения.

Angular использует простые Объекты JavaScript для синхронизации Модели и Вида, в результате чего обновлять любой из них легко и приятно. Angular преобразовывает данные в JSON и лучше всего общается методом REST. При помощи такого подхода проще строить фронтенд-приложения, потому что всё состояние приложения хранится в браузере, а не передаётся с сервера по кусочкам, и нет опасения, что состояние будет испорчено или потеряно.

Связываем мы эти значения через выражения Angular, которые доступны в виде управляющих шаблонов. Также мы можем связывать Модели через атрибут под названием ng-model. Angular использует свои атрибуты для разных API, которые обращаются к ядру Angular.

2.3 Инъекция зависимостей (Dependency Injection, DI)

DI – шаблон разработки программ, который определяет, как компоненты связываются со своими зависимостями. Инъекция — это передача зависимости к зависимому Объекту, и эти зависимости часто называют Сервисами.

В AngularJS мы хитрым образом используем аргументы функции для объявления нужных зависимостей, а Angular передаёт их нам. Если мы забудем передать зависимость, но сошлёмся на неё там, где она нужна нам, Сервис будет не определен и в результате произойдёт ошибка компиляции внутри Angular. Но не волнуйтесь, angular выбрасывает свои ошибки и они очень просты в отладке.

2.4 Приложения на одну страницу (Single Page Application, SPA), управление состоянием и Ajax (HTTP)

В приложении на одну страницу (SPA) либо весь необходимый код (HTML, CSS and JavaScript) вызывается за одну загрузку страницы, либо нужные ресурсы подключаются динамически и добавляются к странице по необходимости, обычно в ответ на действия пользователя. Страница не перезагружается во время работы, не передаёт управление другой странице, хотя современные технологии из HTML5 позволяют одному приложению работать на нескольких логических страницах. Взаимодействие с SPA часто происходит при помощи фонового общения с сервером.

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

Времена изменились, браузер хранит состояние приложение, сложная логика и фреймворки приобрели популярность. AngularJS хранит состояние в браузере и передаёт изменения при необходимости через Ajax (HTTP) с использованием методом GET, POST, PUT и DELETE. Красота в том, что сервер может быть независим от фротенда, а фронтенд – от сервера. Те же самые сервера могут работать с мобильными приложениями с совершенно другим фронтендом. Это даёт нам гибкость, так как на бэкенде мы работаем с JSON-данными любым удобным нам способом на любом серверном ЯП.

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

У Angular есть разные API, но структура приложения обычно одна и та же, поэтому почти все приложения строятся сходным образом и разработчики могут включаться в проект без усилий. Также это даёт предсказуемые API и процессы отладки, что уменьшает время разработки и быстрое прототипирование. Angular построен вокруг возможности тестирования («testability»), чтобы быть наиболее простым как в разработке, так и в тестировании.

3 Модули

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

3.1 Сеттеры (setters).

У приложения есть один модуль app.

Вторым аргументом идёт [] – обычно этот массив содержит зависимости модуля, которые нам нужно подключить. Модули могут зависеть от других модулей, которые в свою очередь тоже могут иметь зависимости. В нашем случае массив пустой.

3.2 Геттеры (Getters)

Для создания Controllers, Directives, Services и других возможностей нам надо сослаться на существующий модуль. В синтаксисе есть незаметное различие – мы не используем второй аргумент.

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

Теперь мы можем использовать переменную app для построения приложения.

3.4 HTML бутстрап

Если мы грузим файлы с JavaScript асинхронно, нам надо подгрузить приложение вручную через angular.bootstrap(document.documentElement, [‘app’]);.

$scope используется только внутри Контроллеров. Там мы привязываем данные Контроллера к Виду. Вот пример того, как мы объявляем данные в Контроллере:

Чтобы это отобразилось в DOM, мы должны присоединить Контроллер к HTML и сообщить Angular, куда вставлять значение.

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

Источник