1. дома
  2. Вопрос и ответ
  3. AngularJS + sails.js

AngularJS + sails.js

2014-02-21 2 views
49

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

  1. НОЙ установки -g парусов
  2. паруса новое приложение

И затем я перенесу все свои файлы 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

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

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

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

источник

2014-02-21 rishy

+0

BT W: Вы пробовали https://github.com/diegopamio/angular-sails-bind? Я только что выпустил в мир, и это может помочь вам (но не со структурой). –

ответ

56

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

  1. Создать новое Sails приложения с sails new myApp
  2. уничтожить содержимое папки myApp/assets
  3. Скопируйте содержимое углового Seed app папки в myApp/assets
  4. Замените содержимое myapp/views/layout.ejs с теми углового Seed app/index.html файла
  5. Вырезать все содержимое тега не-скрипта из файла layout.ejs (все после <body> тега и перед первым <script> тегом и использовать его, чтобы заменить содержимое myApp/views/homepage.ejs
  6. Места <%-body%> после <body> тега layout.ejs

После этого вы можете запустить сервер с sails lift, и вы увидите Угловое приложение на http://localhost:1337.

У меня put this on Github для справки.

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

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

источник

2014-02-22 08:25:07 sgress454

+0

Yeoman создает папку «dist» в качестве окончательной производственной версии приложения, в данном случае, для приложения «Угловое». Таким образом, он содержит файлы, похожие на «app» каталог «Angular-Seed». Единственное отличие состоит в том, что, поскольку «dist» - это производственная версия, все файлы уже прошли через минимизацию. Итак, я думаю, было бы более целесообразно развить мою интерфейсную логику отдельно, используя Yeoman, а затем, наконец, добавить каталог dist в место «app» в каталог sails/assets /. Таким образом, я также смогу использовать Jade, Stylus, Coffee и тестирование с использованием Karma. Как вы относитесь к этому? – rishy

+4

Если вы создаете одностраничное приложение, и вы просто будете использовать Sails в качестве бэкэнда API (то есть не обслуживаете множество просмотров), то было бы прекрасно сохранить проекты Angular and Sails полностью отдельно и даже одновременно запускать как Sails, так и Angular test server. Или, если это не одна страница, но вы все еще хотите, чтобы все угловые генераторные колокола и свистки, вы можете попробовать символизировать каталог углового приложения в каталог ресурсов Sails. Мой лучший совет - всегда просто сделать вашу среду разработчиков настолько похожей, насколько возможно, на то, как будет выглядеть ваше окончательное развертывание! – sgress454

+0

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

12

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

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

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

источник

2014-04-10 02:26:07 Ryan

+1

+1 Один вопрос, какая версия Angular нужна? Запуск установки bower представляет несколько опций. –

+0

Кажется, что в настоящий момент угловой 1.3 не поддерживается, выберите один с угловым 1.2.x – octavian

4

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

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

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

источник

2015-05-29 22:32:08 tarlepp

0

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

  1. Используйте «grunt serve» для создания однострочного приложения angularjs в мини-версию, и все должно быть в папке «dist».

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

    '/': { вид: 'главная страница' }

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

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

  5. Start sails.js (паруса поднять), и вы можете просматривать веб-сайт на угловой локальный хосте: 1337

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

источник

2015-08-16 08:06:34 afterglowlee

0

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

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

источник

2017-07-27 12:43:17 Janka

Смежные вопросы

 Смежные вопросы