«Places2Go» и СРЕДНИЙ стек (I)

Давайте напишем образец приложения Full Stack с нуля с помощью Angular, Mongo, Express и Node.js: хорошо известного MEAN Stack ... Приложение представляет собой список дел, которые я хотел бы когда-нибудь посетить ... . а пока давайте повеселимся, напишем код и поработаем над api карт Google, работающих на этой эхосистеме на основе Javascript!

Итак, давайте начнем с «Places2Go… an Mean Stack»

Исходный код

Полный исходный код доступен на GitHub:

Https://github.com/Pabloin/mean-stack-talk

# 01 Рабочий реж.

Наша работа в Github и локальных

# 02 Настройка

Создайте проект с помощью angular-cli

$ ng новые места2go-v01

и результат:

А с одной лишь командой у нас их много! Готовый проект с

package.json: Может быть, самый важный файл ... или, по крайней мере, первый, который вы должны посмотреть: мы можем видеть зависимости и запускать команды

Файл .angular-cli.json с указанием основных файлов:

Давайте заметим, что index.html не имеет ссылки для запуска angular javascript, потому что, когда мы запускаем с ng serve из angular-cli, основной класс main.ts с указанием о как начать угловой…

Другим вариантом может быть включение в заголовок различных угловых javascript. Но я иду по пути angular-cli

карма: инструмент тестирования http://karma-runner.github.io (https://www.youtube.com/watch?v=5mHjJ4xf_K0)
файл .gitignore
node_modules: команда настройки $ ng new app также выполняет команду $ npm install

# 03 Запустить пустой проект

Запустим пустой проект

$ нг подавать

# 04 Начало программирования - Идеи

Приложение посвящено городам, которые я хотел бы посетить, поэтому наиболее естественным будет создание класса модели «Город».

На данный момент у меня есть три варианта:

Начните кодирование из бэкэнда (то есть: 1. Папка сервера с api, остающаяся в nodejs с экспрессом и mongose со схемой города, это может быть автономное приложение. 2. Затем напишите компонент службы в папке службы в приложении angular для подключения остальным api, выполните унитарные тесты и 3. Интегрируйте службу с фронтальными компонентами / MVC приложения angular). Обычно я так люблю работать, потому что вы понимаете, что это за данные.
Другой вариант - отредактировать компоненты, сгенерированные angular-cli в шаблоне проекта… Я сделаю это…
Другой вариант - построить передние компоненты на основе имитирующих объектов, а после этого заменить имитируемые объекты реальным объектом. Есть хорошее видео Джона Папы на https://www.youtube.com/watch?v=WAPQF_GA7Qg&t=92s, которое работает таким образом. Кстати, в видео Джон Папа использовал фрагменты кода визуального стода (из https://github.com/johnpapa/vscode-angular2-snippets), я использую атом, и я бы использовал ту же идею следующее расширение https://atom.io/packages/angular-2-typescript-snippets:

# 04 Начать кодирование - Цель

а) Добавьте фоновое изображение на страницу приветствия.

Я скопирую изображение в assets / images / bg.jpg и отредактирую основной styles.css с помощью:

Задний план:

б) Добавить js-библиотеку частиц

Это просто состоит из пары javascript и тега div, основанного на https://github.com/VincentGarreau/particles.js.

После небольшого теста, в angular2 не так просто добавить такой javascript в приложение angular ... так что, по крайней мере, и просто для проверки, я копирую библиотеку на новую страницу за пределами

страница частиц

в) Откройте браузер с помощью средства запуска узлов.

Я сделаю пусковую установку статической, чтобы получить только некоторый статический контент: первый узел запустит сервер с экспрессом, а затем node запустит браузер с экспресс-адресом (библиотека opn).

Чтобы открыть предыдущую страницу без открытого приложения angular:

$ npm install opn -save

$ npm install express -save

И мы видим статический экспресс-сервер и вызов браузера

Давайте отметим это на github

$ git tag v1.0.0

$ git push origin v1.0.0

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

# 05 Начало программирования - Целевой бутстрап

Сначала я установил следующий плагин для лучшего использования начальной загрузки в Atom

atom-bootstrap4
В GitHub мы создаем текстовый редактор, который мы всегда хотели: взломанный до глубины души, но доступный в первый же день… atom.io

Кроме того, поскольку я пишу с помощью Angular Cli, я также буду использовать / устанавливать следующий «cli» для angular

NG Bootstrap -« Angular директивы, специфичные для Bootstrap 4 »

GitHub - ng-bootstrap / ng-bootstrap: начальный загрузчик с поддержкой Angular
ng-bootstrap - Bootstrap с поддержкой Angular github.com

Установить ng-bootstrap

npm install --save @ng-bootstrap/ng-bootstrap

Я создам шаблон с помощью bootstrap 4: я мог бы написать его с нуля, или я мог бы использовать инструмент дизайна: я буду использовать http://www.layoutit.com/, и этот инструмент будет генерировать шаблоны с помощью Bootstrap 3, после этого Я хотел бы иметь bootstrap4, поэтому мне нужно преобразовать исходный код с помощью онлайн-инструмента http://demo.bootstraptor.com/bootstrap4/

Примечание об адаптивном дизайне с гибкостью:

С сеткой:

В бутстрапе вы должны думать двенадцатью рядами:

С Flexbox:

Другой подход к адаптивному дизайну (если я не ошибаюсь, flexbox был для v4)

Давайте начнем:

Давайте посмотрим на простой html-код bootstrap4: это было всего лишь простое копирование и вставка из официального руководства и официальных компонентов. (на github: https://github.com/PabloEzequiel/MEAN-Stack/blob/master/app04/Places2Go-and-the-MEAN-Stack/places2go-v01/src/assets/bv1/boot1.html)

И результат

Это была версия 1.0.1 в GitHub: статический HTML-дизайн.

Из исходного кода начальной загрузки html мы замечаем, что импортировали два файла JS в конце файла: jquety и bootstrap.js.

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

# 06 Начать кодирование - Целевой бутстрап от angular-cli

Промежуточные шаги:

а) Давайте добавим панель навигации

Самый простой способ - добавить html в «app.component» и файл начальной загрузки CDN с CSS в index.html.

Что нужно улучшить: панель навигации с темным цветом и загрузочный css локальный для приложения вместо CDN.

Bootstrap на Angular

У меня есть две возможности с angular bootstrap: https://github.com/valor-software/ng2-bootstrap, который используется в Any-Theme, и, похоже, у меня есть лучший документ и https://github.com / ng-bootstrap / ng-bootstrap »тот, который я уже установил

Вариант 1: пакет ng-bootstrap

Я буду следить за https://ng-bootstrap.github.io/#/getting-started

$ npm install --save @ng-bootstrap/ng-bootstrap

Также я должен установить bootstrap 4:

$ npm install --save [email protected]

Все выглядит нормально ... но результат ...

Вариант 2: пакет ng2-bootstrap

Пакет ng2-bootstrap использовался шаблоном любой темы

откройте src/app/app.module.ts и добавьте

import { AlertModule } from 'ng2-bootstrap';
...
@NgModule({
   ...
   imports: [AlertModule.forRoot(), ... ],
    ... 
})

откройте angular-cli.json и вставьте новую запись в массив стилей

"styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css"
      ],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],

В порядке! давайте посмотрим, что работает ng2-bootstrap:

В github версии 1.0.2 есть изменения интеграции Angular2 с Bootstrap

Хорошее объяснение того, как установить bootstrap на angular cli, в https://www.npmjs.com/package/angular-cli сказано, как редактировать angular-cli.json, чтобы включить зависимости bootstrap и jquery.

Я изменил версию навигационной панели на более лучшую, также с загрузкой (исходный код в http://codepen.io/PabloEzequiel/pen/WpQoLK?editors=1000) проблема с этой версией в angular2 заключается в том, что при изменении размера в браузере, меню не раскрывается. Причина в том, что я должен интегрировать jQuery, и это небольшое противоречие, потому что мы не должны использовать jQuery с angular ... Давайте посмотрим, как мы собираемся его интегрировать:

Добавить jQuery в Angular

$ npm install --save jquery

После этого мы добавим его в .angular-cli.json

"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"styles.css"
],

и $ ng build и $ npm start, панель навигации в приложении angular работает!

в порядке! мы достигли цели, чтобы навигационная панель работала на angular2 с установкой angular-cli. Это подразумевает множество шагов, например, включение bootstrap и jquery в angular-cli.json в папку, содержащуюся в dist.