Клиенту требовалось приложение для решения задач, и из-за моей любви к веб-приложению мы решили создать приложение с использованием Angular 4, я получил работу и удовлетворение от выполнения задачи с помощью Angular (вы должны понимать это чувство, улыбается).

Перенесемся к дате доставки только для того, чтобы услышать от вашего клиента: «ПОЖАЛУЙСТА, МНЕ НУЖНО МОБИЛЬНОЕ / ANDROID-ПРИЛОЖЕНИЕ».

На мой взгляд, «Неужели этот клиент действительно знает, о чем говорит?», - подумал я. Мне нечего сказать, если не сказать: «УВАЖАЕТСЯ, Сэр, ПОЖАЛУЙСТА, ВЫ ДАЛИ НАМ ДВЕ НЕДЕЛИ НА ДОСТАВКУ?»

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

ТРЕБОВАНИЯ

  1. У вас должен быть установлен Cordova CLI, в противном случае обратитесь к Cordova Начало работы и Документация, чтобы узнать, как это сделать.
  2. Вы уже создали свой проект Angular версии 2 и выше. Этот текст будет основан на Angular CLI, поэтому, если вы еще не установили его, посетите Angular Documentation
  3. Вы настроили SDK своей платформы (Android, iOS и т. Д.) В переменной среды, чтобы вы могли создавать для устройства.

ШАГИ (Совет: Перед выполнением этих шагов убедитесь, что у вас есть резервная копия)

  1. Создайте новый проект 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;

Это все.

Наконец-то нужно построить наш проект.

СОЗДАНИЕ И РАБОТА НАШЕГО ПРИЛОЖЕНИЯ

  1. Измените тег ‹base href =« / »› в вашем src / index.html на ‹base href =« ./ »›, это позволит angular получать доступ к файлам. в пути к каталогу, поскольку мы не размещаем на сервере.
  2. Прежде чем приступить к сборке, давайте поймем, что проект Angular создает папку dist при успешной сборке, в то время как Cordova использует www. папку для создания apk, поэтому нам нужно обновить проект Angular, чтобы он был встроен в папку www. Для этого откройте .angular-cli.json / angular.json в нашем корневом каталоге.
  3. Для Angular ‹6 измените значение свойства outDir с « dist » на « www ».
  4. Для Angular ≥ 6 измените значение свойства outputPath [найденные проекты - ›{projectName} -› архитектор - ›build -› options] с «dist / {projectName} » на « www »
  5. Следующим шагом является создание нашего углового приложения, пожалуйста, обратитесь к моей первой статье КАК РАЗВЕРТИТЬ И РАЗМЕСТИТЬ ПРОЕКТ УГЛОВОЙ 2 ИЛИ 4 НА СЕРВЕРЕ, чтобы достичь этого, если вы не знаете, как это сделать.
  6. Наконец, соберите и запустите свой проект Cordova, выполнив приведенный ниже код:

Cordova build android | ios | [платформа]

ВЫХОД

При успешном запуске на устройстве приложение должно отобразить окно предупреждения с надписью «Android» (в моем случае).

Демонстрацию проекта можно найти на github: https://github.com/nacojohn/AngularToMobileProject

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

Работали на вас? Затем нажмите и удерживайте кнопку хлопка. Также не забудьте купить мне кофе и написать, возможно, вы помогаете другим.

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

Спасибо.