NiceFish (美人鱼)

NiceFish — это серия обучающих проектов, цель которых — всесторонне продемонстрировать использование Angular в браузере, на мобильных устройствах и в среде Electron.

• NiceFish: это микро-блог система, основанная на Angular 4.x + PrimeNG. http://git.oschina.net/mumu-osc/NiceFish/

• NiceFish-Admin: это интерфейс системы управления, основанный на Angular 4.x+PrimeNG, http://git.oschina.net/mumu-osc/NiceFish-Admin

• NiceFish-ionic: это демоверсия для мобильных устройств, основанная на ionic, этот проект уже поддерживает PWA. http://git.oschina.net/mumu-osc/nicefish-ionic

• NiceBlogElectron: https://github.com/damoqiongqiu/NiceBlogElectron, это проект для рабочего стола на основе Electron, который упаковывает NiceFish в программу для рабочего стола с помощью Electron. Это было предоставлено коллегой из ZTE, я его разветвил, есть несколько версий node-модулей, которые нужно изменить, если вы изучаете, как использовать Electron для разработки приложений для рабочего стола, пожалуйста, обратитесь к этому проекту.

Код продукта

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

• OpenWMS: https://gitee.com/mumu-osc/OpenWMS-Frontend, это код передней части проекта OpenWMS, основанный на последней версии Angular 5.2.0 и PrimeNG 5.2.4.

Онлайн-демонстрация

NiceFish: http://47.104.13.149:4200

NiceFish-Admin: http://47.104.13.149:8080

OpenWMS: http://47.104.80.251:4200

NiceFish-ionic: https://damoqiongqiu.github.io/NiceFish-ionic/

Эффект работы этого проекта

Видеоурок (снимок экрана): src/assets/img/1.png

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

Для THIS_REPO:

git clone YOUR_REPO

cd nicefish-ionic:

cnpm install -g cordova ionic

cnmp install

ionic serve

Откройте свой браузер и перейдите по адресу: http://localhost:8100/

Сборка

npm run ionic:build --prod

Поддержка PWA

Откройте ваш браузер Safari или Chrome и перейдите по ссылке: https://damoqiongqiong.github.io/NiceFish-ionic/.

Затем выберите «Добавить на главный экран», как показано ниже:

Снимок экрана: src/assets/img/1.jpg

Тогда вы увидите, что приложение появится на главном экране вашего телефона, как показано ниже:

Снимок экрана: src/assets/img/4.jpg

Снимок экрана: src/assets/img/3.jpg

Windows 10 также поддерживает приложения PWA, после того как вы выберете «Добавить на главный экран» в меню Chrome, вы получите следующий результат:

Снимок экрана: src/assets/img/2.png

На Linux это выглядит так:

Снимок экрана: src/assets/img/5.png

Версия iOS должна быть больше 11.3, Windows 10 необходимо обновить до последней версии пакета обновления, вы обнаружите, что создание PWA-приложений с использованием Angular для разных платформ на удивление просто!

QQ-группа для онлайн-общения

Angular-1 район — шёлковый путь: 286047042 (полная)

Angular-2 район — Дуньхуан: 139357161 (полная)

Angular-3 район — Юймэньгуань: 473129930 (полная)

Angular-4 район — Хэсицзулан: 483016484 (полная)

Angular-5 район — Лоулань: 604253120 (будет полная)

Angular-6 район — Лянчжоу: 124641447 (будет полная)

Район «Сценарии для детей» — Остров персика: 83163037 (будет полный)

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

Ресурсы для обучения и видеоуроки

Все PPT в выступлениях Дамо Цюнцюна соответствуют материалам этого проекта, вы можете свободно их использовать, https://gitee.com/mumu-osc/NiceFish/attach_files.

Если вам нужны уроки, посмотрите здесь, http://www.ngfans.net/, есть видео и текст, бесплатная версия и платная версия, выбирайте сами.

Лицензия с открытым исходным кодом

MIT

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