AngularJS + sails.js

Я разрабатываю приложение, которое может использовать sails.js для back-end и AngularJS для Front-end. Я подумал, что создам приложение Angular, используя генератор Yeoman- angular https://github.com/yeoman/generator-angular, и как только я закончил с передней -end логика Я создам приложение для парусов, используя

  • npm install -g паруса
  • паруса новое приложение

И затем я перенесу все мои файлы AngularJS в папку Sails.

Но дело в том, что AngularJS создает иерархию папок, такую ​​как https://github.com/rishy/angular-jade-stylus-seed и при запуске "grunt server" в папке "dist", который содержит окончательную производственную версию.

С другой стороны, после того, как иерархия папок "парусов нового приложения" для приложения "паруса" похожа.

  • апи
    • адаптеры /
    • Контроллеры /
    • модели /
    • политика /
    • услуги /
  • активы
    • Изображения /
    • JS/
    • стили /
    • favicon.ico
    • robots.txt
  • конфиг /
  • node_modules/
  • Просмотры
    • главная /
    • 403.ejs
    • 404.ejs
    • 500.ejs
    • layout.ejs
  • Gruntfile.js
  • app.js
  • package.JSON

Итак, мои вопросы:

  • Теперь, как мне переносить файлы Angular в этот каталог парусов и как его структурировать?
  • Так как паруса использует "паруса для подъема" для запуска сервера, а Angular использует "grunt server", какой из них я должен использовать для запуска сервера для моего приложения sailsJs + AngularJs, а что касается папки "dist", создается после AngularJS?
  • Какие изменения я должен внести в Gruntfile.js, так как теперь он должен содержать код как из Angular, так и для Sails?
  • Где я должен хранить свои разные файлы представлений и стилей и как мне обращаться к этой форме Angular или от Sails?

Я думаю, что многим людям приходится сталкиваться с подобной проблемой, поскольку AngularJS и SailsJs в настоящее время являются яростью. Должен быть мощный шаблон для создания приложения AngularJS + SailsJS, которое, к сожалению, сейчас отсутствует.

Ответы

Ответ 1

Так как Sails - это чисто фреймворк, а Angular - чисто интерфейсный, они могут хорошо работать вместе. Это может немного запутать, когда вы введете в него генератор Angular, но вот основные шаги, если вы должны были начать с Angular Seed и Sails v0.10:

  • Создайте новое приложение Sails с помощью sails new myApp
  • Уничтожить содержимое папки myApp/assets
  • Скопируйте содержимое папки Angular Seed app в myApp/assets
  • Замените содержимое myapp/views/layout.ejs на содержимое Angular Seed app/index.html file
  • Вырезать содержимое тега script из файла layout.ejs (все после тега <body> и перед первым тегом <script> и использовать его для замены содержимого myApp/views/homepage.ejs
  • Поместите <%-body%> после тега <body> в layout.ejs

Затем вы можете запустить сервер с помощью sails lift, и вы увидите приложение Angular в http://localhost:1337.

Я поместил это в Github для справки.

Используя этот метод, вам не нужно ничего делать с Gruntfile, и вы никогда не вызовете grunt server - это только для тестирования приложений Angular со своим тестовым сервером, который вы заменяете Sails, Вы по-прежнему сможете воспользоваться задачей Sailing grunt-sync, которая отслеживает и синхронизирует ваши интерфейсные активы по мере их изменения.

Если вы действительно хотите использовать генератор Yeoman Angular, вы можете попробовать создать приложение непосредственно в папке assets вашего приложения Sails и использовать команды генератора из этой папки. Я не использовал его раньше, поэтому я не знаю, для чего предназначена папка dist, но похоже, что все модули node, которые он устанавливает, поддерживают там тестовый веб-сервер (который снова вам не нужен, так как у вас есть Sails) и набор тестов (что всегда приятно). Единственная проблема, которую я вижу, - это если вам нужны некоторые задачи в этом файле Gruntfile, который генерирует Yeoman. Sails обрабатывает меньше компиляции и минимизации CSS (в режиме производства), но он ничего не делает с Jade или Stylus, поэтому вам придется добавлять эти задачи в Sails Gruntfile, если они вам действительно нужны.

Ответ 2

ваши вопросы именно поэтому я создал Sailng: https://github.com/ryancp/sailng Это пример/шаблонное приложение, которое использует последние Sails 0.10.0-rc5.

Он также демонстрирует, как использовать socket.io внутри Sails для предоставления обновлений в реальном времени для клиента без опроса ajax.

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

Ответ 3

Я также сделал пример приложения "templateplate/example" для Sails.js + Angular. В моем решении они разделены на обратные и сторонние стороны (два сервера).

Мое решение демонстрирует также связь сокетов + живые обновления в пределах данных между пользователями.

Не стесняйтесь попробовать. https://github.com/tarlepp/angular-sailsjs-boilerplate

Ответ 4

У меня такой же вариант использования, как и у вас. Я использовал Yeoman для создания структуры проекта для angularjs. В этой ситуации мое решение:

  • Используйте "grunt serve" для создания однострочного приложения angularjs в мини-версии, и все должно находиться в папке "dist".

  • В проекте routes.js в проекте sails.js удалите код конфигурации для просмотров:

    '/': {   view: 'homepage'  }

  • Удалите все файлы в папке sails.js views и assets. Но, пожалуйста, просто убедитесь, что вам не нужен файл в папке с ресурсами, прежде чем удалять все.

  • Скопируйте и вставьте уменьшенный сайт angularjs в папку с ресурсами.

  • Запустите sails.js(поднимите паруса), и вы можете просматривать веб-сайт angular на localhost: 1337

Sails.js теперь также кратко упомянули этот метод http://sailsjs.org/documentation/concepts/views

Ответ 5

Вы должны настроить задачу по умолчанию для копирования папки angular dist в .tmp

См. конфигурацию задачи в этом Проект Sails Angular