Клиенту требовалось приложение для решения задач, и из-за моей любви к веб-приложению мы решили создать приложение с использованием Angular 4, я получил работу и удовлетворение от выполнения задачи с помощью Angular (вы должны понимать это чувство, улыбается).
Перенесемся к дате доставки только для того, чтобы услышать от вашего клиента: «ПОЖАЛУЙСТА, МНЕ НУЖНО МОБИЛЬНОЕ / ANDROID-ПРИЛОЖЕНИЕ».
На мой взгляд, «Неужели этот клиент действительно знает, о чем говорит?», - подумал я. Мне нечего сказать, если не сказать: «УВАЖАЕТСЯ, Сэр, ПОЖАЛУЙСТА, ВЫ ДАЛИ НАМ ДВЕ НЕДЕЛИ НА ДОСТАВКУ?»
Хорошо, этот рассказ заставил меня исследовать и найти самый быстрый путь к решению задачи. Мне не нужно начинать переход на Ionic или какой-либо другой фреймворк.
ТРЕБОВАНИЯ
- У вас должен быть установлен Cordova CLI, в противном случае обратитесь к Cordova Начало работы и Документация, чтобы узнать, как это сделать.
- Вы уже создали свой проект Angular версии 2 и выше. Этот текст будет основан на Angular CLI, поэтому, если вы еще не установили его, посетите Angular Documentation
- Вы настроили SDK своей платформы (Android, iOS и т. Д.) В переменной среды, чтобы вы могли создавать для устройства.
ШАГИ (Совет: Перед выполнением этих шагов убедитесь, что у вас есть резервная копия)
- Создайте новый проект Cordova, используя кордову ниже:
Кордова создать привет com.example.hello HelloWorld
2. Добавьте свою строительную платформу в Кордове:
Cordova platform add [платформа]
Где платформа может быть Android, Blackberry или IOS
3. Объедините свой проект Angular с проектом Cordova, созданным путем копирования всех папок и файлов, кроме файла package.json из корневого каталога проекта Cordova в корневой каталог проекта Angular.
4. Осторожно откройте файл package.json в обоих каталогах и аккуратно объедините два файла в один (в проекте angular). Полученный файл package.json должен выглядеть так:
5. Папка проекта разработки - src /. Вы должны начать тестирование / сборку вашего приложения Angular 4 здесь!
6. Запустите ng serve для сервера разработки. Перейдите по адресу http: // localhost: 4200 /. Приложение автоматически перезагрузится, если вы измените какой-либо из исходных файлов.
Выполнив описанные выше шаги, вы успешно объединили и преобразовали свой проект Angular в мобильное приложение. Чтобы реализовать плагин Cordova, добавьте ссылку на cordova.js в html-файл проекта angular (src / index.html).
‹Тип сценария =” текст / javascript ”src =” cordova.js ”› ‹/script›
Обратите внимание, что добавление ссылки на cordova.js вызовет / отобразит ошибку при попытке протестировать на локальном сервере.
Добавьте плагин Cordova Device или любой другой плагин, который вы хотите использовать, с помощью следующей команды:
Плагин cordova добавить плагин-устройство Cordova
Мы почти закончили, теперь давайте воспользуемся Cordova для получения информации об устройстве.
В своем проекте angular импортируйте и реализуйте OnInit и добавьте функцию обратного вызова плагина, как показано ниже.
импортировать {Component, OnInit} из ‘@ angular / core’;
….
….
класс экспорта AppComponent реализует OnInit {
ngOnInit () {
document.addEventListener («deviceready», function () {
alert (device.platform);
}, ложь);
}
}
Машинопись не распознает инструкцию ‘device.platform’ и предупреждает, что не удается найти устройство
Чтобы решить эту проблему, добавьте строку ниже сразу после строки импорта.
объявить устройство var;
Это все.
Наконец-то нужно построить наш проект.
СОЗДАНИЕ И РАБОТА НАШЕГО ПРИЛОЖЕНИЯ
- Измените тег ‹base href =« / »› в вашем src / index.html на ‹base href =« ./ »›, это позволит angular получать доступ к файлам. в пути к каталогу, поскольку мы не размещаем на сервере.
- Прежде чем приступить к сборке, давайте поймем, что проект Angular создает папку dist при успешной сборке, в то время как Cordova использует www. папку для создания apk, поэтому нам нужно обновить проект Angular, чтобы он был встроен в папку www. Для этого откройте .angular-cli.json / angular.json в нашем корневом каталоге.
- Для Angular ‹6 измените значение свойства outDir с « dist » на « www ».
- Для Angular ≥ 6 измените значение свойства outputPath [найденные проекты - ›{projectName} -› архитектор - ›build -› options] с «dist / {projectName} » на « www »
- Следующим шагом является создание нашего углового приложения, пожалуйста, обратитесь к моей первой статье КАК РАЗВЕРТИТЬ И РАЗМЕСТИТЬ ПРОЕКТ УГЛОВОЙ 2 ИЛИ 4 НА СЕРВЕРЕ, чтобы достичь этого, если вы не знаете, как это сделать.
- Наконец, соберите и запустите свой проект Cordova, выполнив приведенный ниже код:
Cordova build android | ios | [платформа]
ВЫХОД
При успешном запуске на устройстве приложение должно отобразить окно предупреждения с надписью «Android» (в моем случае).
Демонстрацию проекта можно найти на github: https://github.com/nacojohn/AngularToMobileProject
Поздравляем! Теперь вы можете внедрить в свое приложение другие плагины Cordova.
Работали на вас? Затем нажмите и удерживайте кнопку хлопка. Также не забудьте купить мне кофе и написать, возможно, вы помогаете другим.
Не стесняйтесь комментировать любые ошибки, возникающие при выполнении шага ИЛИ идентифицированных.
Спасибо.