Angular App Tutorial RU: material, https, components, forms, input, cli

Разница между Angular и AngularJS

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

Angular: это популярный фреймворк Typescript с открытым исходным кодом, созданный Google для разработки веб-приложений. Front-end разработчики используют такие фреймворки, как Angular или React, для эффективного представления данных и управления ими. Обновленный Angular намного более эффективен по сравнению со старой версией Angular, особенно основные функции были перенесены в другие модули. Вот почему он становится таким быстрым и плавным по сравнению со старым. Недавно добавили Angular CLI. С помощью этого пакета вы можете создать каркас вашего проекта Angular. 

Angular JS: это интерфейсная среда Javascript с открытым исходным кодом, которая в основном используется для разработки одностраничных веб-приложений (SPA). Это постоянно растущий и расширяющийся фреймворк, который предоставляет лучшие способы разработки веб-приложений. Он меняет статический HTML на динамический HTML. Его функции, такие как динамическое связывание и внедрение зависимостей, устраняют необходимость написания специального кода. AngularJs быстро растет, и по этой причине у нас есть разные версии AngularJs. Также важно отметить, что Angular отличается от AngularJs. Это проект с открытым исходным кодом, который может свободно использовать и изменять кто угодно. Он расширяет атрибуты HTML с помощью директив, а данные связываются с HTML.

Разница с точки зрения архитектуры

Angular JS: поддерживает дизайн модель-представление-контроллер (Model-View-Controller, MVC). Представление обрабатывает информацию, доступную в модели, для генерации выходных данных. 
Angular: использует компоненты и директивы. Компоненты — это директивы с шаблоном.

На каком языке пишется код?

Angular JS: написан на JavaScript. 
Angular: написан на языке Microsoft TypeScript, который является superset ECMAScript 6 (ES6).

Поддержка мобильных браузеров

Angular JS: не поддерживается мобильными браузерами. 
Angular: поддерживается всеми популярными мобильными браузерами.

Синтаксис выражений

Angular JS: ng-bind используется для привязки данных из представления к модели и наоборот. 
Angular: свойства, заключенные в «()» и «[]», используются для привязки данных b/w view и model. 

Внедрение зависимости (Dependency Injection)

Angular JS: не использует внедрение зависимостей. 
Angular: используется система иерархического внедрения зависимостей.

Маршрутизация (Routing)

Angular JS: AngularJS использует $routeprovider.when() для настройки маршрутизации. 
Angular: Angular использует @Route Config{(…)} для настройки маршрутизации.

Структура/Состав решения

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

Что такое Angular? Кратко основные концепции и схемы работы

Определение Angular

Angular — это фреймворк разработанный и поддерживаемый Google, платформа с открытым исходным кодом для создания клиентских приложений на основе Typescript и HTML. С помощью Angular можно создать одностраничное приложение SPA, в котором обновление (рендеринг/перерисовка) отдельных компонентов страницы выполняется с помощью AJAX.

7 составляющих блоков любого приложения Angular

Angular архитектура разделена на части:

  • компонент
  • шаблон
  • директива
  • сервис
  • модуль.

  • Modules — Модули
  • Components — Компоненты (каждый компонент отвечает за часть страницы, содержит в себе шаблон HTML, стили css и логику реагирования на события)
  • Templates — Шаблоны
  • Metadata — Метаданные
  • Data binding — Связывание данных
  • Directives — Директивы (преобразуют указанную часть DOM по заданному алгоритму)
  • Services — Сервисы (поставляют данные для компонентов)
  • Dependency injection — Внедрение зависимостей (DI)

 Modules — Модули 

Приложения Angular имеют модульную структуру, а в Angular есть собственная система модульности, называемая NgModule.

Каждое приложение Angular имеет хотя бы один класс с декоратором @NgModule, это корневой модуль, условно называемый AppModule.

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

Angular Module — это класс с декоратором @NgModule.

Наиболее важные свойства @NgModule:

  • declarations: declaration property содержит список компонентов, которые вы определяете для этого модуля. Как показано выше, заявлены три компонента.
  • exports: если вы хотите использовать компонент или директиву этого модуля в другом модуле, вам необходимо добавить в export имя компонента или директивы. Как правило, корневой модуль или AppModule не содержит свойства export.
  • imports: если вы хотите использовать внешние модули (библиотеки), такие как FormsModule, RouterModule и т.д., вам необходимо добавить это имя модуля здесь. Внешний модуль может быть встроенным angular модулем или пользовательским (user-defined) модулем.
  • providers: какой бы service вы ни создавали в этом модуле, в этом разделе вам необходимо сослаться на сервис. Injector узнает об service отсюда.
  • bootstrap:  вам необходимо указать имя компонента, который вы хотите загрузить, когда приложение загружается в браузере. Обычно это имя корневого компонента. Более того, только корневой модуль содержит это свойство начальной загрузки (bootstrap property).

 Components — Компоненты 

Компонент является основным строительным блоком пользовательского интерфейса (UI).

Компонент управляет одной или несколькими блоками/секциями на экране, которые называются Views. Каждый компонент сопоставлен с шаблоном.

Angular Application — это дерево компонентов Angular.

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

Например, как показано выше, изначально загружается корневой компонент (root component), а все другие компоненты, такие как компонент заголовка (Header Component), компонент боковой панели (Sidebar Component) и компонент страницы (Page Component), являются дочерними компонентами корневого компонента. Кроме того, компонент продукта является дочерним компонентом компонента страницы.

Компонент Angular содержит свойства, методы, конструктор, а также события ввода, события вывода и методы жизненного цикла, такие как ngOnInit, ngOnDestroy и т.д.

Фрагмент кода AppComponent:

Этот фрагмент кода содержит одно свойство title, массив langs. Используется один метод жизненного цикла ngOnInit , который вызывается всякий раз, когда этот компонент загружается. Кроме того, создан метод addLanguage() для добавления языка в массив langs.

Как видите, нужно отдать @Component декоратор к typescript class, чтобы использовать его в качестве компонента.

Важные свойства декоратора @Component:

  • selector: имя компонента, указанное в этом свойстве, используется на HTML-странице в качестве тега для вывода этого компонента на экран. Например, чтобы загрузить приложение root на экран, вам нужно использовать <app-root> на HTML-странице.
  • templateUrl: путь к HTML-файлу, используется для сопоставления внешней HTML-страницы с этим компонентом. Как показано выше, app.component.html страница отображается с помощью AppComponent.
  • template: HTML-разметка в виде строки, если ваше HTML-содержимое (View) маленькое, то вместо написания внешней HTML-страницы, вы можете напрямую использовать HTML в этом свойстве.
  • styleUrls: используется для вставки списка файлов CSS, которые вы хотите использовать для этого компонента. Как показано выше, app.component.css файл содержит стили для AppComponent.
  • styles: это свойство можно использовать для записи внутренних стилей для этого компонента вместо подгрузки внешнего файла со стилями.

 Templates — Шаблоны 

Каждый компонент сопоставляется с шаблоном.

Шаблон — это форма HTML, которая сообщает Angular, как отображать компонент на экране.

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

Используйте код вроде *ngFor, {{user.userName}}, (click) и использует синтаксис шаблона Angular.

Шаблон представляет собой древовидную структуру.

Пример дерева шаблонов приложений Angular

 Data binding — Связывание данных 

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

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

  • Интерполяция (Interpolation): используется для просмотра значения свойства компонента на экране. Как показано во фрагменте кода шаблона. {{title}} используется для отображения значения свойства title компонента на экране.
  • Привязка свойств (Property Binding): используется для обновления свойства DOM, а также для входных событий. Например [class] используется для обновления класса стиля DOM этого элемента.
  • Привязка событий (Event Binding): используется для генерации события из определенного элемента, например, при нажатии кнопки или при нажатии клавиши и т.д. Как показано во фрагменте кода шаблона (click)='addLanguage(Language.value)'привязка события к кнопке управления. Как только вы нажмете на кнопку, запустится обработчик addLanguage() для обработки этого события.
  • Двусторонняя привязка данных (Two-way Data Binding): в основном используется при работе с формами на основе шаблонов. В этом компоненте привязки данных свойство сопоставляется с элементом управления шаблона. В результате всякий раз, когда вы обновляете значение на экране, оно будет автоматически обновляться в компоненте и наоборот. Синтаксис двусторонней привязки данных: [(ngModel)]='property'.

 Metadata — Метаданные 

Как правило, все части angular, такие как компонент, директива, модуль или сервис, являются базовыми классами typescript .

Но

Вопрос в том, как angular узнает тип класса?
Ответ на поставленный выше вопрос — метаданные.

Метаданные говорят Angular, как обрабатывать класс.

В typescript вы прикрепляете метаданные с помощью @Component, @NgModule, @Injectable или @Directive.

 Directives — Директивы 

Шаблоны Angular динамичны. Когда Angular отображает их, он преобразует DOM в соответствии с инструкциями из Directive.

Директива — это класс с декоратором @Direcitve.

Angular предоставляет два типа директив:

  • Structural Directive (Структурная директива): изменяют структуру шаблона DOM. Например, *ngFor, *ngSwitch, *ngIf и т.д. являются структурными директивами.
  • Attribute Directive (Директива атрибута): обновляет атрибут определенного элемента управления HTML, например [ngClass] — это директива атрибута. Component это директива с шаблоном; а @Component — декоратор.
    @Directive декоратор, который расширен функциями, ориентированными на шаблоны.

 Services — Сервисы 

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

Как показано ниже @Injectable() декоратор используется для объявления любого класса typescript как Service.

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

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

Сервисы неизменно асинхронные. Мы можем вернуть данные как promise или Observable, используя RxJS.

Выше показанный выше фрагмент кода службы, который содержит один addUser() метод и один getUsers(), который использует вызов веб-службы HTTP get.

 Dependency injection — Внедрение зависимостей (DI) 

Dependency Injection — это способ предоставить новому экземпляру класса полностью сформированные зависимости, которые ему необходимы.

Большинство зависимостей — это сервисы.

В приведенном выше примере UserComponent зависит от UserService.

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

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

Выдержка по TypeScript

Источник: learnxinyminutes.com — typescript-ru

Как создать приложение на Angular за 2 минуты

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

Устанавливаем среду для запуска приложения Angular — Angular-cli:

Мы будем использовать angular-cli для создания и генерации наших компонентов. Он будет генерировать службы, маршрутизатор, компоненты и директивы.

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

Переходим в директорию с приложением:

Запускаем команду в консоли:

AngularJS Tutorial

AngularJS — очень мощный фреймворк JavaScript. Он используется в проектах одностраничных приложений (SPA). Он также расширяет HTML DOM дополнительными атрибутами и делает его более восприимчивым к действиям пользователя. AngularJS — это открытый исходный код, полностью бесплатный и используется тысячами разработчиков по всему миру. Под лицензией Apache версии 2.0.

AngularJS заменяет статический HTML на динамический HTML.

Преимущества AngularJS:

  1. Фреймворк JavaScript MVC с открытым исходным кодом.
  2. Поддерживается Google
  3. Нет необходимости изучать другой язык сценариев. Это просто чистый JavaScript и HTML.
  4. Поддерживает разделение проблем с помощью шаблона проектирования MVC.
  5. Встроенные атрибуты (директивы) делают HTML динамичным.
  6. Легко расширять и настраивать.
  7. Поддерживает одностраничное приложение.
  8. Использует внедрение зависимостей.
  9. Простота модульного тестирования.
  10. REST friendly.
Concept Description
Template HTML с дополнительной разметкой
Directives расширяют HTML с помощью custom атрибутов и элементов
Model данные, показанные пользователю в View и с которыми пользователь взаимодействует
Scope контекст, в котором хранится модель, чтобы контроллеры, директивы и выражения могли получить к ней доступ
Expressions доступ к переменным и функциям из области видимости
Compiler анализирует шаблон и создает экземпляры директив и выражений
Filter форматирует значение выражения для отображения пользователю
View что видит пользователь (DOM)
Data Binding синхронизирует данные между моделью и представлением
Controller бизнес-логика представлений (views)
Dependency Injection Создает и связывает объекты и функции
Injector контейнер для внедрения зависимостей (dependency injection)
Module контейнер для различных частей приложения, включая контроллеры, службы, фильтры, директивы, которые настраивает инжектор
Service многоразовая бизнес-логика, независимая от представлений

Перед созданием нашего первого приложения Hello World!  с использованием AngularJS, давайте посмотрим на части приложения AngularJS. 

Приложение AngularJS состоит из следующих трех важных частей:

  • ng-app — эта директива определяет и связывает приложение AngularJS с HTML.
  • ng-model — эта директива связывает значения данных приложения AngularJS с элементами управления вводом HTML.
  • ng-bind — эта директива связывает данные приложения AngularJS с тегами HTML.

Создадим наше первое приложение на AngularJS

Создать приложение на AngularJS очень просто. Создайте файл my-first-angularjs-app.html и вставьте в него код:

Откройте файл в браузере:

Как AngularJS интегрируется с HTML

  • Директива ng-app указывает на запуск приложения AngularJS.
  • Директива ng-model создает переменную модели с именем name, которую можно использовать на HTML-странице и в div, имеющем директиву ng-app.
  • Затем ng-bind использует модель имени, которая будет отображаться в теге HTML <span> всякий раз, когда пользователь вводит данные в текстовое поле.
  • Закрывающий тег </div> указывает на конец приложения AngularJS.

Краткое введение в AngularJS

AngularJS — это фреймворк JavaScript. AngularJS распространяется как файл JavaScript и может быть добавлен на веб-страницу с помощью тега <script>.

AngularJS расширяет атрибуты HTML с помощью ng-директив (ng-app, ng-model, ng-bind) и связывает данные с HTML с помощью выражений.

Директивы AngularJS

Как вы уже видели, директивы AngularJS — это атрибуты HTML с префиксом ng.

ng-init директива инициализирует переменные приложения AngularJS.

Выражения AngularJS

Выражения AngularJS записываются в двойные фигурные скобки: {{выражение}}. Выражения AngularJS связывают данные AngularJS с HTML так же, как директива ng-bind.

AngularJS будет «выводить» данные именно там, где написано выражение:

Приложения AngularJS

Модули AngularJS определяют приложения AngularJS.

Контроллеры AngularJS управляют приложениями AngularJS.

ng-app директива определяет приложение, то ng-controller директива определяет контроллер.

 

0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x