Сделайте свой ум библиотекой Angular
Эпизод 1
Веб-разработчики используют множество фреймворков и библиотек javascript для создания веб-приложений. Я выбрал angular, который предлагает полное решение для разработки и развертывания полного веб-приложения. Это мой первый эпизод в My Journey to Angular. Angular - это полнофункциональный фреймворк, из которого мы можем выполнять
- создание одностраничного веб-приложения с использованием Angular CLI
- создание веб-приложения, содержащего набор компонентов, которые могут взаимодействовать друг с другом
- клиентская навигация с использованием роутера
- передача данных через замену сервисов и классов
- управление состоянием с помощью инъекционных одноэлементных сервисов
Разработка на Typescript и! Javascript
Вам может быть интересно, почему не развивается на Javascript. Разработка на Javascript не слишком продуктивна. У него нет ограничений на тип переменной, которые предполагают тип переменной. Это снизит производительность приложений.
TypeScript - это язык с открытым исходным кодом, который является надмножеством Javascript, где он следует спецификациям ECMAScript, таким как типы, интерфейсы, члены класса, декораторы. На этом построены приложения Angular. Поскольку Typescript строго типизирован, он хорошо подходит для встроенной документации, проверки синтаксиса, навигации по коду и расширенного рефакторинга. Машинопись преобразуется в Javascript перед запуском браузера. Javascript делает заголовок ошибки только во время выполнения, но Typescript не такой, он даже не будет компилировать код, если возникнут какие-либо ошибки.
Анатомия углового приложения
Angular - это компонентный фреймворк. Это набор компонентов и сервисов. Каждое приложение angular имеет один корневой компонент, у него могут быть дочерние компоненты, и каждый дочерний компонент может иметь своих собственных дочерних компонентов. Сервисы обеспечивают функциональность этих компонентов. Корневой компонент указывается в свойстве начальной загрузки.
Основные артефакты приложения Angular
1. Компонент
Компонент можно создать с помощью команды
ng generate component или ng gc
Каждый компонент в приложении Angular будет содержать шаблон, класс и метаданные.
Шаблон
Шаблон - это HTML, который определяет представление для приложения. Шаблон может иметь встроенный HTML и свойство стилей как встроенный CSS. Но когда шаблоны становятся сложными, нам приходится сталкиваться с множеством проблем с автоматизацией формата, проверкой синтаксиса. Поэтому лучше использовать связанный шаблон с html в его собственном файле и файл css для этого связанного файла html.
Класс
Класс, содержащий код, связанный с представлением. Он содержит элементы данных, которые используются в представлении, и методы, выполняющие действия с представлением. При создании класса у класса будет пустой конструктор, и он может реализовать OnInit, который является одним из интерфейсов жизненного цикла. когда компонент реализовал OnInit, он должен реализовать ngOnInit (), который будет вызываться после кода в конструкторе.
Метаданные
Здесь метаданные - это дополнительная информация о классе. В angular класс становится угловым компонентом, когда мы даем декоратор @Component, который добавляет метаданные к классу. Он предоставляет angular информацию о том, как создать экземпляр компонента, построить представление и взаимодействовать с компонентом.
Здесь селектор определяет имя директивы компонента. Другие компоненты могут включать в свои шаблоны определенный шаблон компонента, используя имя директивы селектора в виде тега html. В этом случае мы используем компонент как директиву для другого.
Хорошо ... Мы обсудили компоненты angular, но то, как эти компоненты организованы в приложении. Здесь в игру вступает модуль.
2. Модуль
Модуль angular - это контейнер для группы связанных компонентов, служб, директив и каналов. Это класс, помеченный декоратором @NgModule (), чтобы сделать его угловым модулем. Каждое приложение angular имеет как минимум один модуль angular, который называется корневым модулем angular. Он может иметь любые другие дополнительные угловые модули, такие как функциональные модули, которые объединяют компонент для конкретной функции в приложении.
Модуль можно создать в приложении Angular, используя
ng generate module или ng g m
В модуле Angular есть объявления, импорт, начальная загрузка, компоненты записи, поставщики и т. Д.
Компоненты приложения, которые могут быть представлены модулю Angular, объявлены в массиве объявлений модуля Angular. Компонент можно объявить только один раз. Внешние модули angular, которые выполняют функции фреймворка Angular, импортируются в соответствии с потребностями в массиве import. Массив начальной загрузки определяет запускаемый (корневой) компонент приложения.
Модуль Angular выполняет функции организации приложения в единые функциональные блоки, обеспечивая границы внутри приложения, обеспечивая среду разрешения шаблонов. При компиляции компилятор angular видит директиву, а затем ищет определение в модуле angular.
В angular могут быть модули функций в дополнение к корневому модулю в смысле добавления функций в ваше приложение. Эти функциональные модули отличаются от корневого модуля, поскольку у них не может быть свойства начальной загрузки в @NgModule (). Модули функций могут быть импортированы другими модулями.
Когда мы создаем наши компоненты и когда им разрешается общаться, в игру вступает игрок «Сервис».
Обычно при создании приложения angular разработчики поддерживают обработку данных во внедряемом сервисе, а не в компоненте.
3. Сервис
общепринятая нотация для создания сервиса
ng generate service или ng g s
Сервис - это класс, нацеленный на конкретную цель. Мы можем заметить, что декоратор @Injectable () аннотируется в сгенерированном сервисе. Этот Injectable () заставляет службу внедряться в любые компоненты, которые в ней нуждаются. Инжектор может быть корневым инжектором или инжектором компонентов. Регистрация службы с помощью корневого инжектора доступна для всех компонентов в приложении Angular. В противном случае он доступен для своего компонента и дочерних или вложенных компонентов этого компонента. Услуга включает в себя функции, которые не зависят от какого-либо конкретного компонента.
Мы выполняем внедрение зависимости (создание экземпляра службы) в конструктор необходимого компонента с параметром модификатора частного доступа.
Мы видели, как работает приложение angular на основе его артефактов. Сервис используется для связи внутри компонентов. Но знаете ли вы, как компонент взаимодействует со своим шаблоном?
В Angular есть важный механизм, называемый «привязка данных», который синхронизирует связь между классом компонента и его шаблоном.
Да, в моем следующем эпизоде я сыграю вам Data Binding. Увидимся !!!
