Angular+Meteor. Ускоренное создание приложений


Содержание

Скачать книгу Angular+Meteor Ускоренное создание приложений (2020) WEBRip бесплатно

Angular+Meteor — по-настоящему волшебная связка, позволяющая создавать быстрые, мощные приложения за очень короткие сроки. На вебинаре мы построим полноценное приложение с возможностью работы в google map — “social party!”

Информация о фильме:
Название: Angular+Meteor Ускоренное создание приложений
Год: 2020
Жанр: обучающее видео

Страна: Россия
Продолжительность: 02:11:08
Язык: Русский

Файл:
Качество: WEBRip
Формат: mpg
Битрейт: 1978 Kbps
Видео: mpg, 1280х720 , 25.00 fps(r)
Аудио: mp3, 48000 Hz, stereo
Размер:3,11 Гб

Angular+Meteor. Ускоренное создание приложений

Angular+Meteor — по-настоящему волшебная связка, позволяющая создавать быстрые, мощные приложения за очень короткие сроки. На вебинаре мы построим полноценное приложение с возможностью работы в google map — “social party!”

Информация о фильме:
Название: Angular+Meteor Ускоренное создание приложений
Год: 2020
Жанр: обучающее видео

Страна: Россия
Продолжительность: 02:11:08
Язык: Русский

Файл:
Качество: WEBRip
Формат: mpg
Битрейт: 1978 Kbps
Видео: mpg, 1280х720 , 25.00 fps(r)
Аудио: mp3, 48000 Hz, stereo
Размер:3,11 Гб

Создание Angular 5 приложения

Angular — это фреймворк позволяющий быстро и удобно разрабатывать одностраничные веб приложения. В своей основе он использует язык программирования TypeScript. Давайте рассмотрим процесс создания процесс создания SPA-приложения (Single Page Application) с помощью данного фреймворка от идеи до публикации.

Данная статья достаточно объемна, поэтому будет разбита на несколько частей и опубликована в моем блоге. Для разработки будет использоваться Angular 5, Visual Studio 2020. Итак, нашей целью является разработка простого приложения представляющее собой доску объявлений, куда можно публиковать короткие объявления. Приступ. Перед началом работы не забываем, что предварительно необходимо установить node.js.

Часть 1 — Создание проекта и первоначальное выделение компонентов на основе статической html-старицы

Часть 2 — Выделение более специализированных компонентов, реализация взаимодействия с базой данных

Часть 3 — Завершение выделения всех компонентов, публикация приложения.

Angular+Meteor Ускоренное создание приложений (2020) WEBRip

Angular+Meteor — по-настоящему волшебная связка, позволяющая создавать быстрые, мощные приложения за очень короткие сроки. На вебинаре мы построим полноценное приложение с возможностью работы в google map — “social party!”

Информация о фильме:
Название: Angular+Meteor Ускоренное создание приложений
Год: 2020
Жанр: обучающее видео

Страна: Россия
Продолжительность: 02:11:08
Язык: Русский

Файл:
Качество: WEBRip
Формат: mpg
Битрейт: 1978 Kbps
Видео: mpg, 1280х720 , 25.00 fps(r)
Аудио: mp3, 48000 Hz, stereo
Размер:3,11 Гб

Оптимизация производительности вашего приложения с помощью функций Angular и не только

Дата публикации: 2020-09-14

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

Использование OnPush

По умолчанию Angular запускает механизм определения изменений на всех компонентах каждый раз при изменении чего-либо в приложении – от события click до получения данных по ajax-запросу. (пользовательские события, таймеры, xhr, promise’ы и т.д.)

Представьте, например, что у нас есть компонент select.


Практический курс по созданию веб-приложения на Angular4

Скачайте БЕСПЛАТНЫЙ мини-курс и изучите базовые возможности JavaScript-фреймворка Angular 4 за ближайшие 3 дня

Мы собираемся передать массив навыков в компонент select и установить свойства как getters, чтобы можно было следить за тем, когда Angular проверяет значения.

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

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

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

Мы можем задать ChangeDetectionStrategy нашего компонента в ChangeDetectionStrategy.OnPush. Это говорит Angular, что компонент зависит лишь от его Inputs и должен проверяться только в следующих случаях:

Меняется ссылка Input

В компоненте или его дочке произошло событие

Вы явно запускаете обнаружение изменений вызовом detectChanges()/tick()/markForCheck()

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

Использование TrackBy

Мы еще не закончили. Если в какой-то момент нам нужно будет изменить данные в коллекции (this.skills), возможно, в результате API-запроса, мы столкнемся с проблемой, так как Angular не может отслеживать элементы в коллекции и не знает о том, какой из них удален или добавлен.

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

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

Практический курс по созданию веб-приложения на Angular4

Скачайте БЕСПЛАТНЫЙ мини-курс и изучите базовые возможности JavaScript-фреймворка Angular 4 за ближайшие 3 дня

angular-meteor

Я получаю 403 при попытке обновить Профиль пользователя с помощью meteor-angular. К сожалению, это не очень описательно-полная ошибка: < details:…

Я подписался на коллекцию MongoDB через сервис $meteor, что я получаю массив документов plusнекоторые методы, внедренные в массив. Но всякий…

OK у меня есть приложение Meteor, которое использует angular-meteor, я использую blaze, чтобы добавить шаблон в autoform с помощью textAngular,…

Итак, у меня есть эта функция для обработки ошибок маршрутизации: angular.module(‘player-tracker’).run([‘$rootScope’, ‘$location’, function($rootScope, $state) < $rootScope.$on(‘$stateChangeError’, function(event, toState, toParams, fromState,…

Я работаю над отношением пользователь-роли, и мой код работает, за исключением того, что он производит бесконечную ошибку дайджеста на угловой…

Я пытаюсь вызвать angular Direction от meteor для отображения кнопки intuit. Я пытался использовать кнопку quickbook непосредственно в meteor, но…

Я пытаюсь сделать приложение чата в meteorJS, и я думал о создании отдельной коллекции для каждой группы динамически, когда они…

Добавление в массив объекта collection удаляет все другие массивы этого объекта. Рассмотрим участника коллекции событий: < «_id» : «EfEq7niEyLLatb7fb», «attendeeFavorites»…


Я начал с этого: https://github.com/Urigo/meteor-angular-socially/releases/tag/step_06 . Существует коллекция Parties, где каждая сторона имеет свойства name и description, и я добавил…

У меня есть 2 коллекции mongo meteor, именованные приложения и слайдеры У меня есть сервис, который подписывается на них, и…

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

Я работаю с Angular Meteor и у меня проблема с моими объектами/массивами. У меня есть этот код: angular.module(«learn»).controller(«CurriculumDetailController», [‘$scope’, ‘$stateParams’,…

Цукерберг рекомендует:  Видеохостинг. Что за зверь и для чего он нужен

Мой угловой контроллер выглядит так: angular.module(«campos»).controller(«HomeCtrl», [‘$scope’, ‘$meteor’, ‘$rootScope’, ‘$state’, ‘$modal’, function ($scope, $meteor, $rootScope, $state, $modal) < // $scope.users…

Я пытаюсь создать интерактивную базу данных фотографий, где пользователь может сортировать фотографии и фильтровать по пользователям, проверять несколько категорий, которые…

У меня есть общий вопрос относительно Meteor, и это обновления на стороне клиента в сочетании с angular. Предположим, я использую…

Я следовал учебнику по meteor-angular, и когда я достиг шага 20, я обнаружил, что что-то не так с областью загрузки…

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

Я новичок в использовании Angular с Meteor. В настоящее время я борюсь с использованием углового UI-маршрутизатора, где у меня есть…

Я новичок в использовании Angular с Meteor (использованиеangular-with-blaze) и использовал AutoFormранее с Blaze. При создании формы autoForm of type=»update»объект должен…

В приложении Meteor, использующем angular, есть состояние, которое требует, чтобы пользователь вошел в систему. В настоящее время это делается с…

Приложение Angular Meteor, использующее angular-with-blazeпакет, хорошо работаетlocalhost, но при развертывании на сервере, использующем mupandmupx, сайт загружается частично и выдает следующую…

Я использую эту функцию публикации в моем приложении meteor-angular (созданном после этого урока): Meteor.publish(‘organization’, function (name) < return Orgs.find();…

Я разрабатываю какое-то приложение с meteor и использую angular для пользовательского интерфейса, коллекция под названием «Foods» доступна в цикле, но…

Как передать параметр вспомогательной функции? Это было возможно с Blaze: Template.dummy.helpers( < getImage: function(imageId) < return Images.findOne(imageId); >>); << getImage…

Я пытаюсь обновить текущий документ в списке ng-repeat, чтобы каждый документ имел свою собственную форму в ng-repeat. Я пытаюсь заставить…

Я пытаюсь использовать оператор findOne для доступа к документу из коллекции в рамках функции преобразования. this.helpers(< posts: function () <…

Я новичок в Meteor и AngularJs. Я пытаюсь следовать примеру приложения на https://github.com/lvbreda/Meteor_angularjs но пока мне не удалось заставить его…

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

У меня есть рабочий проект AngularJS, и я недавно начал работать с открытым исходным кодом проекта, написанного в Meteor-Blaze. Я…

В моем проекте angular-meteor я выбрал использование пакета bootstrap meteor nemo64: bootstrap, для легкой настройки исходных настроек bootstrap. Однако при…

Я пытаюсь использовать publishComposite с angular-meteor (1.3.7-beta.1) У меня есть 2 коллекции: AgreemenetStatus, который содержит статус соглашения и имеет signedID,…

У меня есть Meteor (v 1.2.0.2) angular mobile app и нужно иметь ссылку на внешнюю веб-страницу, но ссылки не будут…

Я только что обновил приложение meteor до Meteor 1.3, но теперь приложение не работает, и ошибка показывает «Неотхваченный объект» Я…

Я не могу найти никакой документации, которая объяснит, как я могу получить filenameи filepathзагруженного collectionFS изображения в мой метод meteor….


Способ, которым я делал это до сих пор, состоит в том, чтобы использовать Meteor.callи сбросить все серии в обратном вызове,…

Это кажется глупым вопросом, но я остаюсь в замешательстве. Предположительно meteor встроил поддержку модулей npm в 1.3 . Я использую…

Я использую meteor 1.3, приложение принудительно использует angular 1.3, хотя я установил версию 1.5.7. Пожалуйста, помогите мне выяснить проблему здесь….

Возможно ли изменение this.statusпосле подтверждения диалога с любым ответом? >

Я следую учебнику Meteor-Angular2, и все работает хорошо. Единственное, что не работает, — это автоматическая привязка с пользовательским интерфейсом Angular2…

я использовал angular2 whatsapp клон, чтобы начать проект. https://www.angular-meteor.com/tutorials/whatsapp2/ionic/setup Этот проект использует SMS auth, но я хочу обычную учетную запись…

Я пытаюсь динамически установить заголовок страницы в моем приложении angular. Я уже работал с жестко закодированным названием, динамически изменяющимся в…

Попытка развертывания / сборки для localhost и при запуске приложения я продолжаю получать: Ошибка: [$injector:unpr] неизвестный поставщик: t

Я новичок на Meteor. После одной недели на нем , и начал с реализации todo учебника, как описано здесь, каждый…

Я играл с Angular2 CLI и Meteor. Я заметил, что когда я генерирую компонент с Angular2 CLI, если я хочу…

Мне нужна помощь. Мой код находится в логине. Когда пользователь нажимает в login: я помещаю кнопку disable, чтобы избежать того,…

Angular+Meteor Ускоренное создание приложений (2020) WEBRip

Angular+Meteor — по-настоящему волшебная связка, позволяющая создавать быстрые, мощные приложения за очень короткие сроки. На вебинаре мы построим полноценное приложение с возможностью работы в google map — “social party!”

Информация о фильме:
Название: Angular+Meteor Ускоренное создание приложений
Год: 2020
Жанр: обучающее видео

Страна: Россия
Продолжительность: 02:11:08
Язык: Русский

Файл:
Качество файла (ов) : WEBRip
Формат: mpg
Битрейт: 1978 Kbps
Видео: mpg, 1280х720 , 25.00 fps(r)
Аудио: mp3, 48000 Hz, stereo
Размер по факту :3,11 Гб

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

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

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

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

Не нужно беспокоиться, если вы никогда не использовали TypeScript раньше. Проще говоря, TypeScript — это просто JavaScript с дополнительными функциями. Я также написал серию под названием TypeScript для начинающих на Envato Tuts +, где вы можете сначала изучить основы TypeScript.

Начинаем

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

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

Следующий шаг — установить TypeScript, выполнив следующую команду. Я рекомендую вам установить версию TypeScript 2.1.

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


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

Установка всех зависимостей для проекта занимает некоторое время, поэтому, пожалуйста, будьте терпеливы, в то время как Angular CLI настроит ваше приложение. По завершении установки вы увидите папку с именем country-app в текущем каталоге. Вы можете запустить приложение прямо сейчас, перейдя в каталог country-app , а затем запустив ng serve в консоли.

Добавление —open автоматически откроет ваше приложение в браузере по адресу http://localhost:4200/.

Цукерберг рекомендует:  Обучение - Не сохраняет строки в бд Yii2

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

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

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

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

На следующем рисунке показана страница «Все страны» или AllCountriesComponent нашего приложения. Макет этого компонента очень похож на HomeComponent . Единственное различие заключается в том, что на этот раз мы перечисляем все страны вместе со своими столицами.

Если вы нажмете на поле какой-либо страны, отображенной внутри HomeComponent или AllCountriesComponent , вы попадете на страницу подробной информации или CountryDetailComponent . Информация, представленная о стране, не редактируется.

После подробных деталях каждой страны появляется кнопка вернуться назад. Эта кнопка возврата возвращает вас к предыдущему компоненту или странице. Если вы пришли в CountryDetailComponent из HomeComponent , вы вернетесь к HomeComponent . Если вы пришли в CountryDetailComponent из AllCountriesComponent , вы вернетесь к компоненту AllCountriesComponent .

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

Основы Angular

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

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

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

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

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

Любой компонент, который вы создадите, будет состоять из шаблона, который будет управлять тем, что отображается на странице приложения. Например, countryDetailComponent имеет два тега div , которые действуют как обертка вокруг основного содержимого компонента. Каждая часть информации о стране помещается внутри ее собственного тега p , а название страны помещается внутри тега h2 . Все эти теги могут храниться вместе в качестве шаблона для countryDetailComponent и затем отображаться как единое целое. Этот шаблон компонента можно сохранить как файл HTML или указать непосредственно внутри декоратора, используя атрибут template .

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

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

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

Вот фрагмент кода из проложения country-app , которое мы будем создавать. Как вы можете видеть, мы импортируем Component и OnInit из @angular/core . Аналогично, мы импортируем Country и CountryService из файлов, которые мы создали сами.

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

После того как вы запустили команду ng new country-app , Angular CLI создаст для вас множество файлов и папок. Такое большое количество файлов может напугать новичка, но вам не нужно работать со всеми этими файлами. При создании нашего приложения мы будем изменять файлы, уже существующие в папке src/app , а также создавать новые файлы в том же каталоге. Прямо сейчас у вас должно быть пять разных файлов в папке src/app . Эти файлы создают оболочку приложения, которая будет использоваться для объединения остальной части нашего приложения.

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

Файл app.component.html содержит шаблон для нашего класса AppComponent . Откройте файл app.component.html и замените HTML-код шаблона внутри него следующей строкой:


Оборачивая title внутри фигурных скобок, мы сообщаем Angular о том, чтобы поместить значение свойства title класса AppComponent внутри тега h1 .

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

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

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

Заключение

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

Цукерберг рекомендует:  Apache - Как установить Brotli на CentOS и добавить в Apache

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

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

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

Angular+Meteor. Ускоренное создание приложений

Angular+Meteor — по-настоящему волшебная связка, позволяющая создавать быстрые, мощные приложения за очень короткие сроки. На вебинаре мы построим полноценное приложение с возможностью работы в google map — “social party!”

Информация о фильме:
Название: Angular+Meteor Ускоренное создание приложений
Год: 2020
Жанр: обучающее видео

Страна: Россия
Продолжительность: 02:11:08
Язык: Русский

Файл:
Качество: WEBRip
Формат: mpg
Битрейт: 1978 Kbps
Видео: mpg, 1280х720 , 25.00 fps(r)
Аудио: mp3, 48000 Hz, stereo
Размер:3,11 Гб

Создание Angular 5 приложения

Опубликовано shwan в 20.02.2020 20.02.2020

Angular — это фреймворк позволяющий быстро и удобно разрабатывать одностраничные веб приложения. В своей основе он использует язык программирования TypeScript. Давайте рассмотрим процесс создания процесс создания SPA-приложения (Single Page Application) с помощью данного фреймворка от идеи до публикации.

Данная статья достаточно объемна, поэтому будет разбита на несколько частей. Перед прочтением я рекомендую ознакомится с кратким описанием особенностей языка TypeScript в статье Немного о TypeScript. Для разработки будет использоваться Angular 5, Visual Studio 2020.

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

Создаем новый проект

Выбираем тип приложения Angular

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

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

Package.json
Tsconfig.json

Теперь нам нужно подготовить html шаблон страницы, на основе которой будет строиться приложение. Будем использовать css фреймворк bootstrap 4 версии. Внешний вид макета страницы будет следующий:


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

Теперь приступим к переносу данного шаблона на Angular. Зайдем в файл _Layout.cshtml и изменим его структуру.

Также очистим проект от лишних данных, созданных для демонстрации работы приложения при создании. Подробнее об этом можно прочитать в статье Очистка стандартного решения Angular 2 на базе ASP.NET Core.

Теперь для проверки перенесем все содержимое страницы в home компонент, чтобы проверить работу всех библиотек. Просто копируем все содержимое между тегами body> в файл Adsmini\ClientApp\app\components\home\home.component.html. Файлы таблиц стилей, скриптов и изображения помещаем в папку Adsmini\wwwroot\dist\ и меняем ссылки в соответствии с этим расположением файлов. Запускаем приложение чтобы проверить работу.

Обратите внимание, если у вас возникает ошибка с кодом TS2339 TypeScript (TS) Property does not exist on type, то вам необходимо зайти в файл Adsmini\ClientApp\boot.server.ts и изменить строчку с ошибкой следующим образом:

Теперь нам нужно приступить к декомпозиции компонентов на более мелкие части. Подробнее про создание компонентов можно прочитать в статье Создание нового компонента Angular и Создание базового макета Angular на основе статичной html страницы.

Для начала изменим файл app.component.html

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

Заголовок страницы (header)

Выделим заголовок в отдельный компонент header. Для этого создадим следующую структуру папок:

Header.component.ts
Header.component.html

Обратите внимание, что мы объявляем переменную logoPath, на которую потом ссылаемся в разметке . Удалим соответствующий html код из home.component.

Ну и наконец зарегистрируем наш компонент в app.shared.module.ts

Создание компонента Описание (description)

description.component.ts
description.component.html

Обратите внимание, что здесь мы выводим значение переменной content обращаясь к ней <>.

Создание компонента Категория (type)

type.component.ts
type.component.html

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

search.component.ts

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


footer.component.ts

Создание компонента Карточка объявления (Card-summary)

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

card-summary.component.ts
card-summary.component.html

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

Компонент детальной информации объявления (card-detail)

card-detail.component.ts
card-detail.component.html

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

Теперь нам необходимо настроить навигацию, чтобы при нажатии на объявление отображалась карточка с подробной информацией. Для этого добавим строку в RouterModule файла app.shared.module.ts

Теперь если в браузере вбить адрес http://localhost:64080/card/1234, то отобразится окно с подробным представлением объявления

Добавим переход на страницу подробностей объявления при нажатии на объявление на главной странице. Для этого изменим компонент card-summary-component следующим образом

А также добавим событие нажатия на карту в html файле этого же компонента

Компонент формы добавления объявления (card-add)

Ну и наконец создадим компонент для добавления новых объявлений. Для начала изменим компонент с описанием приложения, добавив туда кнопку для перехода на форму добавления объявления.

description.component.ts
description.component.html
app.shared.module

Добавим в RouterModule еще одно правило навигации

Теперь перейдем непосредственно к созданию компонента формы добавления нового объявления.

card-add.component.ts
card-add.component.html

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

Заключение

На первом этапе разработки нами были созданы все необходимые для работы системы компоненты. Исходный код доступен в репозитории github. В следующей статье мы рассмотрим взаимодействие с хранилищем данных, использование классов и расширим функционал наших компонентов.

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