Как создать apk файл angular

Обновлено: 06.07.2024

Я хотел создать одно приложение для администратора комитета общества. Я использовал шаблон ngx-admin, созданный aveko, но я не знаю, как создать apk моего приложения администратора. Я хотел показать, как он будет работать на моем реальном устройстве после внесения изменений. Кто-нибудь знает?

1 ответ

Когда вы используете Angular, вы создаете одностраничные приложения , известные как SPA.

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

При создании SPA вы используете JavaScript . Javascript не имеет никакого отношения к Java . Это означает, что если вы хотите создать APK, вам нужно будет создать проект Java .

Но, к счастью, есть фреймворк под названием Ionic . Эта структура позволяет создавать APK-файлы для ваших приложений SPA.

Насколько я понял, он создает приложение, состоящее только из веб-браузера, которое будет отображать ваш SPA. Это заставляет пользователя думать, что он использует собственное приложение, но на самом деле он использует SPA .

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

Применительно к вашей проблеме: вы можете использовать Ionic и Cordova, независимо от ngx-admin . Потому что, в конце концов, вы создадите свое приложение , создав скрипты поставщика . Эти сценарии будут содержать каждый фрагмент Javascript, который использует ваше приложение , включая ngx-admin.

После того, как вы создадите свое приложение, Ionic будет обслуживать этот SPA в браузере на телефоне вашего пользователя.

Итак, все, что вам нужно сделать сейчас, это использовать Ionic! И еще один плюс: Ionic также может создавать приложения для iPhone .

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

Я хотел создать одно приложение для администратора комитета Общества. Я использовал шаблон ngx-admin, созданный aveko, но я не знаю, как создать apk моего приложения администратора. Я хотел показать, как это будет работать на моем реальном устройстве после того, как потребуется модификация. Кто-нибудь знает?

1 ответ

Я проверил документы android о создании приложения из ant &, а затем откровенно из terminal. Я пытаюсь понять, как eclipse может генерировать подписанный файл apk из проекта android. Список команд был бы полезен, или если бы там уже был сценарий Java, я бы, вероятно, предложил его на.

Я изучаю angular 2 с Typescript. Я использую следующий ресурс. QuickStart с Angular 2 Теперь из этого и других примеров я обнаружил, что они говорят создать файл package.json, который перечисляет все зависимости для проекта. Я думаю, что создание этого файла package.json и перечисление всех.

При использовании Angular вы создаете одностраничные приложения , известные как SPA.

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

При создании SPA вы используете JavaScript . Javascript не имеет ничего общего с Java . Это означает, что если вы хотите создать APK, вам нужно будет создать проект Java .

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

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

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

Применительно к вашей проблеме : вы можете использовать Ionic и Cordova, независимо от ngx-admin . Потому что в конце концов вы создадите свое приложение, тем самым создав сценарии поставщиков . Эти сценарии будут содержать все части Javascript , которые использует ваше приложение, включая ngx-admin.

Как только вы создадите свое приложение, Ionic будет обслуживать этот SPA в браузере на телефоне вашего пользователя.

Итак, все, что вам нужно сделать сейчас, это использовать ионный ! И еще один плюс : Ionic также может создавать iPhone приложений .

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

Родные приложения с Cordova

Cordove — это свободный для использования, с открытым исходным кодом каркас, который позволяет создавать мобильные приложения, используя стандартное web API, вместо родного кода. Это дает нам возможность написания мобильных приложений используя HTML, JavaScript, CSS, и AngularJS вместо написания их на Objective-C или Java (для iOS или Android, соответственно).

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

Установка

Дистрибутив Cordova распространяется как npm пакет, так что для его установки нужно использовать npm .
Если у вас не установлен npm , проверьте, установлен ли у вас node . Для информации об установке NodeJS, прочтите главу «следующие шаги».

Пакет Cordova включает в себя генератор для создания приложения и делает его доступным для Cordova.

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

project-directory (Обязательный) — Каталог, в котором будет создаваться приложение.
package-id — ID проекта (имя пакета в обратном домену стиле)
name — Имя пакета (имя приложения)

В этой строке будет создан каталог gapapp (определяется первым параметром) с идентификатором пакета io.fullstack.gapapp и с именем проекта GappApp .

Команда Cordova разбила ее на плагины, так что нам не нужно подключать платформы, для которых мы не будем разрабатывать (что облегчает разработку для поддержки других платформ). Это значит, что нам нужно явно добавить в наш проект любые платформы, которые мы планируем поддерживать.
Чтобы продолжить работать с нашим проектом, нужно перейти в его каталог, т.к. дальнейшие команды должны выполняться из него:

Мы будем строить наше приложения для iOS (хотя процесс одинаковый и для других платформ). Чтобы добавить платформу iOS, нужно просто добавить ее поддержку в проекте, используя следующую команду Cordova:

Теперь, возникают некоторые сложности с инструментами разработчика Apple, и нам нужно подстроить приложение под себя, чтобы заставить его работать на нашем локальном симуляторе iOS.
Давайте перейдем в директорию нашего приложения, где найдем каталог platforms . Внутри него мы найдем директорию ios , которая была создана командной добавления платформы ( platform add ), вызванной ранее.

В XCode откройте ранее созданный проект. Убедитесь, что ваш симулятор указан в идентификаторе платформы вверху XCode.

Кликните выполнить.
После этого вы должны увидеть в вашем симуляторе начало работы приложения Cordova.

Процесс разработки с Cordova

Cordova включает проект PhoneGap, который был одобрен в Apache Foundation. Этот проект включает в себя средство командной строки, которую мы будем использовать для взаимодействия с нашим приложением, от его создания до развертывания.

Платформы

iOS
Android
Blackberry10
Firefox OS

Android
Windows Phone 7
Windows Phone 8
Windows8
Blackberry10
Firefox OS

Чтобы добавить платформу, вы можете использовать команду platform add (как мы делали выше).

Чтобы удалить одну из платформ, вы можете использовать команду rm или remove .

Плагины

Cordova создана на основе модулей, что дает возможность добавлять любую дополнительную функциональность, используя систему плагинов. Чтобы добавить плагин в проект, мы будем использовать команду plugin add :

Мы можем просмотреть список установленных плагинов, используя команду plugins ls :

И наконец, можно удалить любой плагин, используя команду plugin rm :

Построение проекта

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

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

Выполнение команды build гарантировано установит код, требуемый для конкретной платформы, так что после этого наше приложение может быть скомпилировано. По существу, этим методом мы делаем то же, что и подготовительные методы cordova prepare && cordova compile .

Эмуляция и выполнение

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

Для iOS, возможно придется настроить проект (так как мы делали раньше) с помощью XCode, если эмулятор среды не настроен в вашей среде разработки.
Также имеется возможность запуска приложения на конкретном устройстве, используя команду run , вместо всего выше сказанного.
Команда run , приводит к запуску приложения на устройстве, или на эмуляторе, в случае если устройство не найдено или не доступно.

В разработке

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

Сервис Angular для Cordova

Когда наше приложение Cordova готово, устройство подключено и все готово к работе, Cordova возбуждает событие deviceready в браузере.
В Angular, после того как было возбуждено событие deviceready , мы можем либо начать работу приложения angular, либо работать с объектами promise (обещаний) в логике вашего приложения для этого.
Чтобы запустить приложение после события deviceready , нам нужно установить для него обработчик, где вручную начать его работу:

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

Сейчас нужно установить fsCordova в качестве зависимости для вашего модуля.

Мы можем использовать CordovaService для определения готовности к работе Cordova, и выполнить нашу логику, которая от этого зависит:

What You'll Be Creating

Введение

В этом уроке я расскажу вам шаг за шагом, как создать современное, гибридное, мобильное (iOS и Android) приложение для вашего сайта на WordPress с использованием новейших технологий. Мы будем использовать Ionic Framework, ECMAScript 6, npm, webpack и Apache Cordova.

1. Инструменты

Ionic Framework

Красивый SDK с открытым исходным кодом для разработки фронтэнда потрясающих мобильных приложений с использованием веб-технологий.

Экосистема фреймворка Ionic велика, включает Ionic CLI (командную строку), Ionic Push (push-уведомления) и Ionic Platform (бэкэнд). В настоящее время это один из лучших проектов с открытым исходным кодом на GitHub,набравший более 19 000 звезд и с помощью которого создано более 600 000 приложений.

Ionic способен реализовать все потребности вашего приложения. Однако в этом уроке мы сосредоточимся только на Ionic Framework (или Ionic SDK), который представляет собой набор директив AngularJS (веб-компонентов) и сервисах.

ECMAScript 6 (ES6)

ECMAScript 2015 (6-е издание) - это текущая версия стандарта спецификации языка ECMAScript. ES6 официально утвержден и опубликован в качестве стандарта 17 июня 2015 года Генеральной Ассамблеей ECMA.

ECMAScript 6 дает вам доступ к множеству новых функций, многие из которых созданы по примеру CoffeeScript, в том числе использование стрелок в функциях, генераторы, классы и конструкции let. Хотя ES6 одобрен совсем недавно, вы можете использовать его уже сейчас, используя компилятор JavaScript, такой как Babel.

Диспетчер пакетов Node (npm)

Node Package Manager - самый популярный менеджер пакетов в мире. Количество пакетов в нем растет быстрее, чем в Ruby, Python и Javа вместе взятых. npm работает на Node.js.

Почему не Bower?

Мы выбираем npm, потому что использовать Bower и npm в одном проекте сложно, а поддержка CommonJS в Bower не проста. CommonJS определяет формат модуля для разрешения области JavaScript вне браузера, а npm поддерживает это. Модули COMMОJS могут потребоваться при использовании ES5 или ES6.

webpack

На мой взгляд, webpack является новым словом в игровой индустрии, обходя сложные сценарии Grunt или Gulp, которые вам нужны для обслуживания webpack позволяет вам запрашивать файлы любого типа (.js, .coffee, .css, .scss, .jpg , .jpg, .svg и т. д.) и направлять их через загрузчики для создания статических файлов, доступных вашему приложению.

Разница между Grunt и Gulp заключается в том, что большинство ваших потребностей (минимизация и компиляция) может быть выполнена, в виде добавления некоторой конфигурации, нет необходимости создавать полноценные скрипты. Например, запрос файл Sass, его компиляция, создание приставок и вставка полученного миниатюрного CSS в ваше приложение будет так же легко, как написать строчку кода ниже:

Я не думаю, что мне нужно демонстрировать пример, используя Gulp или Grunt. Думаю, вы понимаете, о чем я говорю.

2. Нам понадобится

Работа над этим уроком предполагается, что у вас есть:

базовое знание AngularJS и Ionic
веб-сайт на WordPress, готовый к работе (с завершенной установкой)
сервер с Node.js, npm, Bower (они нам понадобятся в некоторых случаях)
И установленный Git с возможностью записи в папку проекта без sudo.

3 Установка

Прежде чем мы начнем, вам нужно будет установить две штуки:

плагин WordPress, который превращает ваш блог в RESTFUL API
и само приложение

RESTFUL API

Чтобы обрабатывать записи установленного сайта на WordPress, необходимо установить плагин WP REST API. Убедитесь, что вы установили версию 1.2.x, поскольку версия 2.x находится в процессе разработки.

В WordPress перейдите в раздел Плагины> Добавить новый/Plugins > Add New.
Найдите WP REST API (WP API).
Нажмите Установить сейчас , чтобы установить плагин.
Если установка прошла успешно, нажмите «Активировать плагин», чтобы активировать его.

Приложение

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

Затем создайте файл конфигурации и установите все требуемые компоненты.

Чтобы убедиться, что приложение и REST API работают вместе, откройте config/config.json. Это ваш файл конфигурации, который игнорирует Git. Затем измените базовый URL-адрес API на тот, который подходит для вашего сайта на WordPress.

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

4. Зависимости

Команда npm install установила несколько библиотек. Некоторые из них являются необходимыми сразу, а остальные – будут необходимы в процессе разработки.

Необходимые компоненты

Необходимые компоненты- это компоненты, которые требуется вашему приложению для правильной работы при сборке.

Обратите внимание, что ваше приложение напрямую не зависит от AngularJS, потому что ionic-sdk уже включает в себя файлы angular. Js, angular-animate.js, angular-sanitize.js и angular-ui-router.js.

wp-api-angularjs (Клиент WordPress WP API для AngularJS) представляет собой набор сервисов AngularJS, которые позволяют связываться с плагином API REST, установленному ранее. Вы можете увидеть полный список необходимых компонентов на GitHub.

Компоненты необходимые при разработке

Компонентами необходимыми при разработке в основном являются загрузчики webpack. Загрузчики - это функции, которые берут исходный код из файла, проводят некоторые изменения и возвращают новый исходный код в источник. Нам нужны загрузчики, которые обрабатывают файл ы типа .scss, .js (ES6), .html и .json. Вы можете увидеть полный список необходимых компонентов для разработки на GitHub.

5 Архитектура приложения

Я разрабатываю приложения, используя AngularJS, в течение длительного времени, и после многих экспериментов я выбрал для себя понравившуюся архитектуру:

файлы, которые можно редактировать в находятся в папке src/ или /lib
каждому модулю AngularJS нужна отдельная папка
каждый файл модуля *.module.js должен содержать уникальное имя (и быть единственным местом, где оно используется)
каждый файл модуля *.module.js должен обозначать все свои необходимые компоненты (даже если эти компоненты уже встроены в приложение)
каждый файл модуля *.module.js должен содержать свои настройки, контроллеры, службы, фильтры и т.д.
каждая конфигурация, контроллер, сервис, фильтр и т. Д. Должен экспортировать функцию (CommonJS)
если модуль нуждается в определенном стиле, файл .scss должен находиться вместе с этим модулем.

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

Вот как выглядит структура папок приложения:

Точка входа

При использовании веб-пакета необходима точка входа. Наша точка входа - lib/index.js. Она содержит основные зависимости приложения (например, ionic.bundle, который содержит AngularJS), наши произвольные модули и добавляет точку входа для Sass.

Теперь, когда мы импортировали компоненты, мы можем создать модуль приложения. Давайте дадим имя прототипу нашего приложения. У него есть компоненты ionic , wp-api-angularjs и наши самописные модули в качестве необходимых для работы.

После создания модуля мы можем экспортировать его в качестве стандартного модуля CommonJS.

Здесь вы увидите отличный пример того, как должен выглядеть модуль AngularJS.

Маршрутизация

Наше приложение имеет боковое меню <ion-side-menu ui-view="menu"> , в котором будет отображаться модуль меню. В нем также есть раздел содержимого <ion-nav-view name="content"> , в котором будут отображаться модули Home и Post.

Директива ui-view является частью UI-маршрутизатора, используемого Ionic. Он сообщает переменной $state (услуга UI-router), где размещать ваши шаблоны. Аналогично, директива name , прикрепленная к тегу <ion-nav-view> , представляет собой настраиваемую Ionic-директиву, которая использует ui-view в нижней части. Вы можете считать обе директивы одинаковыми.

Вот упрощенная версия статуса root , статуса, в котором все модули распределены:

Дополнительные сведения о названиях представлений смотрите в документации на GitHub.

Модуль меню

Модуль меню очень прост. Его цель - добавить меню внутри тега <ion-side-menu> . Без этого модуля боковое меню будет пустым. Модуль меню добавляет только файл конфигурации, который содержит компоненты ionic и ui.router .

Самая интересная часть - это конфигурация. Мы не будем создавать отдельное состояние для модуля меню, поскольку оно всегда доступно. Вместо этого мы добавим состояние root для его содержания. Когда тег ui-view = "menu" будет определён в состоянии root , нам нужно будет использовать конструкцию menu@root для ссылки на него.

Модуль домашней страницы

home.module.js

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

ionic
ui.router
wp-api-angularjs

home.config.js

Конфигурация добавляет новое состояние root.home с URL-адресом /home , в котором есть шаблон и контроллер (оба находятся внутри модуля).

home.controller.js

Это упрощенная версия логики контроллера Home. Он содержит две функции:

loadMore : Эта функция заполняет данными vm.posts . Она использует службу $wpApiPosts , которая является частью библиотеки wp-api-angularjs.
refresh : Эта функция снова удаляет записи и вызывает функцию loadmore .

home.html

Почтовый модуль

post.module.js

Подобно модулю Home, конфигурация добавляет новое состояние root.post с URL /post/: id . Он также регистрирует вид и контроллер.

post.config.js

post.controller.js

post.html

Совет. Используйте выражение bindOnce , :: (введенное в Angular 1.3), чтобы избежать проверки данных, которые не будет меняться.

Стиль оформления (Sass)

Файл bootstrap.scss , который мы импортировали в нашей точке входа, прост:

Во-первых, мы импортируем наши переменные. Затем мы импортируем стили Ionic. Импорт наших переменных, перед стилями Ionic позволяет нам перезаписать любые переменные Sass, которые объявлены в Ionic.

Например, если вы хотите, чтобы цвет positive был красным, а не синим, вы можете перезаписать его следующим образом:

6. Android and iOS

Установка

Выполните следующие команды внутри папки проекта и выберите платформу, на которой хотите собрать приложение.

Помимо установки платформ в папке /platform , скрипт установит еще один плагин. Для демонстрации нам нужен плагин cordova-plugin-whitelist . Необходимо разрешить приложению отправлять запросы через API-интерфейс WordPress, который мы создали ранее.

Если вы откроете файл config.xml, вы увидите, что мы открываем доступ из любого источника ( <access origin="*" /> ). Конечно, это только для демонстрационных целей. Если вы разрабатываете приложение для публикации, убедитесь, что вы ограничиваете доступ следующим образом:

Android

Необходимые компоненты

Запуск команды npm run Android - это ярлык для команд rm -rf www/* && webpack && cordova run android . Это удаляет всё в папке www, выгружает в него не сжатую версию приложения и запускает команду android . Если Android-устройство подключено (запустите adb devices чтобы убедиться в этом), команда загрузит приложение на устройство, в другом случае будет использован эмулятор Android.

Необходимые компоненты

Если у вас нет устройства Apple, вам нужно установить iOS Simulator. Он хорош и лучше, чем эмулятор Android.

Запуск команды npm run runIosEmulator – это ярлык для команд rm -rf www/* && webpack && cordova run ios . Команда npm run runIosDevice - это ярлык для команд rm -rf www/* && webpack && cordova run ios -device.

Заключение

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

создавать слабосвязанные модули, которые соответствуют спецификациям CommonJS
импортировать модули CommonJS для ECMAScript 6
использовать REST API WordPress (с wp-api-angularjs)
использовать Ionic Framework для создания отличного пользовательского интерфейса
использовать webpack для сборки приложения
использовать программу Cordova для запуска приложения на iOS и Android

Если вы хотите развиваться дальше, взгляните на проект, который я создал несколько месяцев назад, WordPress Hybrid Client.

Гибридный клиент WordPress

Гибридный клиент WordPress (WPHC) - это проект с открытым исходным кодом, доступным на GitHub, который позволяет бесплатно создавать версии вашего сайта WordPress на iOS и Android. WPHC основан на том же наборе технологий, что и в этом уроке.

Готовы сегодня создать что-нибудь интересное? Я тоже!

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

Я глубоко убеждена, что единственный способ научиться чему-либо — это начать заниматься этим на практике. Только методом смелых проб и ошибок можно шаг за шагом выстроить пирамиду опыта и вырасти из новичка в рок-звезду.

“Обучение — это активный процесс, и учимся мы путем активной деятельности. Как итог — в виде устойчивых навыков оседают только те знания, которые применяются на практике”, — Дэйл Карнеги.

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

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

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

Для тех, кто не хочет читать: демо-версия приложения доступна на StackBlitz.

Если вы ранее не создавали приложение Angular на своей машине, то убедитесь, что у вас установлены Node.js и Angular CLI.

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

Перейдите в каталог, где хотите создать приложение и введите следующую команду:

Вам будет задано два вопроса:

Would you like to add Angular routing? (Добавить маршрутизацию Angular?) — для подтверждения введите y и нажмите ввод.
Which stylesheet format would you like to use? (Какой формат таблицы стилей использовать?) — выберите предпочтительный с помощью клавиш стрелок. Мне нравится вариант SCSS.

После генерации этих пакетов можно переходить к настройке Angular Material (AM). Для начала перейдите в каталог приложения командой cd и добавьте эту библиотеку в проект:

Вам также понадобится ответить на ряд вопросов:

Choose the Deep Purple/Amber pre-built theme (Выберите тему Deep Purple/Amber).
Set up global Angular Material typography styles? (Настроить глобальные стили оформления Angular Material?) — для подтверждения введите y и нажмите ввод.
Set up browser animations for Angular Material? (Настроить анимации браузера для Angular Material?) — для подтверждения введите y и нажмите ввод.

После этого введите команду “ng serve”, чтобы увидеть весь сгенерированный Angular код.

Пустяки, не так ли? А теперь пора перейти к собственному написанию кода.

Создание нашего удобного красивого UI мы начнем с добавления пары компонентов Angular Material.

Toolbar

Так как для создания элементов mat-toolbar и mat-icon мы используем AM, вам также понадобится добавить в файл app.module.ts следующее:

Примечание: я буду опускать некоторые импорты, чтобы сократить свои вставки с GitHub. Весь код вы сможете найти в конце урока.

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

Если изменений не произошло, то стоит попробовать остановить выполнение приложения, введя CTRL+С в терминале, и заново выполнить ng serve . Иногда вносимые в app.module.ts изменения требуют перезапуска.

Использование иконок Angular Material

Среди прочих крутых возможностей AM можно выделить бесплатный функционал иконок. По этому поводу я хочу пояснить несколько моментов:

отображаемое имя иконки указывается текстом между тегами <mat-icon> ;
все доступные варианты иконок можно найти на странице Material Design icons;
По умолчанию иконка в элементе будет наследовать цвет шрифта родительского элемента. Вы же можете использовать один из цветов темы, добавив атрибут цвета. Например, <mat-icon color="primary"> окрасит иконку в основной цвет темы.

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

Нам нужна модель, сообщающая приложению описание каждой привычки (habit). В директории проекта создайте каталог models , в нем файл habit.ts , и в него добавьте:

Не забудьте импортировать тип Habit .

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

Обратите внимание на установленную нами структурную директиву *ngFor , которая перебирает массив привычек.
Мы также ввели элемент mat-card , который предоставляет удобные способы разбивки содержимого карточки, делая ее более организованной. О дочерних компонентах mat-card можно узнать в документации.

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

Пока что мы поместим HTML-фрагмент для формы между кодом панели инструментов и All Habits (обратите внимание, чтобы он оказался над областью тега div с class="all-habits" ):

Для исправления красных волнистых подчеркиваний, выдаваемых элементами формы и кнопок, импортируйте MatButtonModule, MatInputModule и MatSelectModule в корневой модуль:

Форма готова! Давайте кое-что по этому фрагменту проясним:

В mat-form-field есть много прекрасных вариантов для плейсхолдеров, ярлыков и стилей. Подробности в документации.
Вместо отдельного именования входных элементов AM вы добавляете их как директивы или атрибуты в обычные входные элементы HTML, как мы видим в случае с textarea в коде выше: <textarea matInput> . Подробности о входных элементах Angular Material описаны в документации.
Кнопки работают аналогичным образом. Вы можете задействовать для них различные стили, которые добавляются в качестве атрибутов к элементу <button> . В этом случае мы используем директиву mat-raised-button , если же вам больше по нраву отсутствие теней, то можете использовать mat-flat-button . Кнопки также могут иметь атрибут color , в котором доступны классы цветов primary , ascent и warn . С различными опциями настройки кнопок и стилей можете, опять же, ознакомиться в документации.

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

Для начала обратимся к TypeScript коду и добавим переменную, указывающую, находимся ли мы в режиме добавления привычки, определив ее по умолчанию как false:

Теперь, чтобы не отображать постоянно форму, добавим кнопку Add New Habit, которая эту форму будет вызывать. Для этого обновим раздел all-habits :

Обратите внимание, что для кнопки присутствует событие клика. При нажатии на нее, активируется переменная adding , позволяя нам переключаться между режимом просмотра привычек и их добавления. Чтобы все это организовать нужным образом, мы используем структурную директиву *ngif , с помощью которой будем скрывать список All Habits и показывать форму, когда adding будет true :

После сохранения изменений форма будет появляться только при нажатии кнопки.

Отлично! Теперь, когда мы выстроили все элементы UI, пришло время добавить приложению динамичности и заставить кнопки выполнять их основную работу. Я понимаю, что все это долго, но мы уже почти закончили.

Подключение реактивной формы

А теперь веселая часть. Пора привязать к нашему TypeScript-коду реактивную форму, что даст нам возможность управлять данными в списке привычек.

На что обратить внимание:

Не забудьте импортировать FormGroup и FormControl из @abgular/core .
Тип FormGroup предоставляет возможность управления несколькими входными элементами формы в одном месте.
Определение FormControls с пустыми строками подразумевает, что значение соответствующих входных элементов при инициализации формы будет пустым. Мы научимся инициализировать их со значением, когда дойдем до редактирования.
Весь богатый арсенал возможностей о Reactive Forms описан в документации.
Обратите внимание на метод onSubmit() . Мы имеем возможность обратиться к значению FormGroup и выполняем его приведение к модели Habit , получая удобную автоподстановку от IntelliSense и проверку типов.

Теперь нужно прикрепить форму TypeScript к шаблону HTML.

Чтобы HTML распознал привязку [formGroup] , нужно добавить в импорты app.module.ts модули FormModule и ReactiveFormModule :

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

После всего проделанного важно обратить внимание на следующее:

Обязательное добавление привязки [formGroup] к элементу form .
(ngSubmit) прослушивает все события клика кнопок с типом submit , так что нет необходимости добавлять отдельное событие клика для кнопки save.
Имя, которое вы указываете в атрибуте formControlName , должно в точности соответствовать именам элементов управления, которые вы определили в TypeScript коде.

Добавление метода редактирования

Обратите внимание на применение patchValue в методе setEditForm . Это позволяет нам напрямую устанавливать значения всей группы форм.
Также взгляните на параметры, которые мы передаем в тот же метод, — они задействуются в наших HTML-вставках. Параметр index будет указывать индекс передаваемой привычки, что позволит нам находить ее в существующем массиве для замены.
Подробнее о методе .splice() можете узнать на GeeksforGeeks.
Заметьте, что новый флаг editing также устанавливается в коде отправки формы, чтобы при сохранении переключаться обратно к основному списку.

Теперь перейдем к шаблону:

Какие здесь изменения:

Для редактирования списка мы используем ту же форму, что и для внесения в него элементов, поэтому просто добавили в обе проверки *ngIf флаг editing .
Изменения, внесенные в *ngFor , позволяют нам задействовать одну из очень удобных возможностей Angular — получать индекс выбранного элемента, определив содержащую его значение переменную прямо в той же строке. После мы передаем эту переменную в функцию setEditForm() , сообщая таким образом форме, какую привычку собираемся редактировать.
В завершении мы добавили функцию запуска редактирования в качестве события клика для кнопки иконки карандаша.

Прекрасно! Теперь займемся удалением.

Добавление метода удаления

Добавьте в TypeScript код метод onDelete() , который по аналогии с setEditForm будет получать индекс из *ngFor .

Далее в шаблоне добавьте к иконке удаления событие клика:

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

Кнопка отмены и исправление бага

Итак, мы вышли на финишную прямую и впереди настройка последних фрагментов.

На данный момент при сохранении новых записей мы не очищаем поля формы, поэтому данные просто в них “подвисают”. Давайте создадим решение, которое будет отвечать за очищение при сохранении или нажатии кнопки отмены, которую также потребуется добавить.

Наша группа форм содержит функцию reset() , которая будет сбрасывать входные элементы в исходное состояние и обнулять все значения в полях.

Далее мы включим в форму добавления кнопку отмены с событием клика exitForm() :

Во-первых, я благодарю вас за то, что проделали со мной этот путь! Давайте подведем его итог.

Читайте также:

Как создать apk файл angular

1 ответ

1 ответ

Похожие вопросы:

Взаимодействие

Установка

ngTouch

Сервис $swipe

start

cancel

Angular-gestures и и жесты сенсорных экранов

Установка angular-gestures

Использование angular-gestures

Родные приложения с Cordova

Установка

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

Процесс разработки с Cordova

Платформы

Плагины

Построение проекта

Эмуляция и выполнение

В разработке

Сервис Angular для Cordova

Введение

1. Инструменты

Ionic Framework

ECMAScript 6 (ES6)

Диспетчер пакетов Node (npm)

Почему не Bower?

webpack

2. Нам понадобится

3 Установка

RESTFUL API

Приложение

4. Зависимости

Необходимые компоненты

Компоненты необходимые при разработке

5 Архитектура приложения

Точка входа

Маршрутизация

Модуль меню

Модуль домашней страницы

home.module.js

home.config.js

home.controller.js

home.html

Почтовый модуль

post.module.js

post.config.js

post.controller.js

post.html

Стиль оформления (Sass)

6. Android and iOS

Установка

Android

Необходимые компоненты

Необходимые компоненты

Заключение

Гибридный клиент WordPress

Toolbar

Использование иконок Angular Material

Подключение реактивной формы

Добавление метода редактирования

Добавление метода удаления

Кнопка отмены и исправление бага