В этом году на Gothenburgh Tech Week (1–7 мая) Craft Academy представляет небольшой доклад на тему «Что такое приложение и как его создать?», , что мы с Эмбер Уилки будем принимать гостей.
Чтобы подготовиться к моему первому профессиональному выступлению, я могу начать готовиться и работать над тем, как говорить о программировании = этот пост в блоге. Следуйте за мной :)
API
API создается Amber, поэтому я не буду говорить об API. Хотя я могу сказать, что он построен на Ruby on Rails и позволяет манипулировать контактной формой . После заполнения формы создается контакт в серверной базе данных. Эта информация будет доступна в созданной конечной точке API Amber.
Настройка нового приложения Angular 4
Я начну с самого начала. Убедитесь, что на вашем компьютере установлен Node.js, следуйте инструкциям здесь: https://nodejs.org/en/. Когда это будет сделано, запустите .node -v, чтобы проверить, все ли обновлено. И на всякий случай протестируйте, чтобы у вас была латсетная версия npm; .npm -v в противном случае: .npm install npm -g.
Теперь мы готовы установить angular и его пакеты на ваш компьютер:
$npm install -g @angular/cli
Мы используем / cli - из-за того, что он очень прост при создании, управлении и сборке, он автоматически создает новые проекты и некоторые полезные команды для продолжения сборки в приложении. Это проще, чем делать все вручную.
Затем создайте новый проект:
$ng new my_new_project $cd my_new_project
А затем запустить сервер: (http: // localhost: 4200)
$ng serve
Приложение Angular 4
Если вы сейчас просмотрите свои файлы, вы можете увидеть, что автоматически получили компонент и модуль.
component определяет логику приложения, поддерживающую представление. Компонент взаимодействует с представлением через свойства и методы. Архитектура приложения Angular состоит из компонентов. Вы вкладываете компоненты друг в друга, чтобы сделать возможным создание одностраничных веб-сайтов. app.component.ts - это наш корневой компонент.
В то время как module является контейнером для различных частей в приложении - контроллеров, служб, фильтров и директив, например, - которые все вместе сгруппируют все функции приложения. Также здесь вы импортируете необходимые зависимости и внешние модули и определяете поставщиков и компоненты. В основном он загружает приложение. В нашем приложении app.module.ts - это наш корневой модуль.
И вы, наверное, знаете, что делают файлы .html и .css. Если нет, то .html - это то место, где вы добавляете то, что вы хотите, чтобы представление выглядело. И .css - это то, что мы используем, чтобы сделать теги более красивыми и изменить различные элементы, которые были добавлены в файл .html. .spec файл, который мы можем просто проигнорировать - поскольку он не имеет ничего общего с тем, что мы создаем на данный момент.
Подключение API к нашему приложению
Позвольте мне начать с того, что не усложняйте. Легче сказать, чем сделать. Когда я начал создавать интерфейс, я создал 6 новых файлов в надежде получить ответ от серверной части. Это сработало? Нет, это не должно быть так сложно, как я подумал через день. Итак, проект, который на самом деле должен был занять около часа, занял полтора дня… Одна из причин, по которой я пишу этот пост, - показать вам, насколько это просто.
Итак, перейдем к нашему app.component.ts файлу. Здесь мы и будем вызывать API.
Нам нужно убедиться, что он импортирован в модуль и идентифицировать его как провайдера:
Почему вы спросите. Это потому, что нам нужно будет предоставить доступ к API, а это может сделать только провайдер.
Давайте импортируем некоторые необходимые библиотеки, чтобы приложение работало так, как мы хотим.
Нам нужен http - класс, который выполняет HTTP-запросы, а также response, когда HTTP-запрос возвращается, он выдаст ответ. .map помогает нам управлять данными, и в этом случае мы вызываем метод .json для ответа, потому что фактический ответ - это не набор данных, а строка JSON.
Затем вызовем apiURL и установим его в частный режим. Вы можете спросить, почему мы делаем его закрытым, потому что мы можем вызывать его только в этом классе AppComponent. После этого мы просто пишем новый метод (getData()), который получает ответ от API. Давайте также установим ответ на json -, чтобы получить тело . Нам также нужно определить метод - что мы делаем прямо в console.log .
После этого нам нужно где-то хранить данные - чтобы потом отображать их в представлении. Итак, нам нужно присвоить новую переменную. Мы называем это data и прямо сейчас настраиваем на что угодно. После этого появился новый метод, который получает ответ от API и getData() метода, который мы позже сохраним внутри переменной data . Теперь мы успешно подключили наше приложение Angular к нашей серверной части. Посмотрим, действительно ли это работает.
Отображение наших данных
Если вы запустите свой сервер и откройте браузер. Вероятно, вы увидите только «приложение работает!». Но если вы посмотрите под (другими словами, откройте консоль), вы можете увидеть, что мы получаем какой-то объект.
Что ж, у этого объекта действительно есть наши данные! Откройте объект в объекте и tada (!) - теперь у вас есть данные из API. Итак, как нам передать данные в представление? Опять же, это намного проще, чем вы думаете.
В Angular 4 есть директива *NgFor - на самом деле очень полезная. Эта конкретная директива создает экземпляр шаблона один раз для каждого элемента из итерируемого объекта. Другими словами, он перебирает элемент из итерируемого объекта.
Итак, в нашем коде мы просто назначаем атрибут (contacts) с данными из контактов. data - это то место, где мы сохранили ответ от API, а контакты - это то, что API назвал массивами. Затем мы присваиваем все атрибуты (которые есть в API) для contact. Если что-то кажется неясным, например атрибуты и т. Д., Проверьте, что вам предоставила консоль. Например, в моем случае у меня есть массив (data) в массиве (contacts), поэтому его data.contacts, а не только data. То же самое и с атрибутами. let contact, однако вы можете назвать что угодно, например, let ebbaisbest.
Это результат, и, как видите, все повторяется.
Итак, чтобы разделить их на отдельные блоки (и еще раз, намного ПРОЩЕ, чем предполагалось), просто добавьте еще один блок в контейнер. Совет от профессионалов, не гуглите «Как повторять один массив за раз ngFor Angular 4». Вот как вы это делаете.
И вуаля, у вас есть несколько хороших «карточек контактов». Теперь просто добавьте красивый стиль (не будем учить в этом конкретном сообщении в блоге), и вы получите веб-страницу, которая действительно может понравиться людям.
Если у вас возникли проблемы с подключением API к интерфейсу или вам просто понравился мой потрясающий пост в блоге и вы хотите узнать меня поближе, присоединяйтесь к докладу Craft Academy на Gothenburgh Tech Week:
Ссылка на мероприятие FB, если вам может быть интересно https://www.facebook.com/events/797060440441434/permalink/797085393772272/?notif_t=like¬if_id=1492464121160466)
Приятное спасибо:
Курс Максимилиана Шварцмюллера Удеми по Angular 4 (настоятельно рекомендуется)
Эмбер Уилки в Гётеборге и sigu в Кении.
Хотите узнать больше о том, чем мы занимаемся в CraftAcademy? Подпишитесь на нас в Medium, Facebook, Twitter или посетите наш сайт.
