Расположение представлений AngularJS в приложении Rails

Я пытаюсь интегрировать AngularJS в приложение Rails. У меня есть приложение Rails с контроллером книг и книжной моделью. В представлении индекса Rails у меня есть это, и AngularJS должен взять на себя отсюда:

.page_text{"ng-app" => "books"}
  .row
    .twelve.columns
      %div{"ng-view" => ""}

И контроллер AngularJS выглядит следующим образом:

function BooksOverviewCtrl($scope, $http) {
  $http.get('/books.json').success(function(data) {
    $scope.books = data;
  });
}
BooksOverviewCtrl.$inject = ['$scope', '$http'];

И это routeProvider:

angular.module('books', []).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
      when('/books', { templateUrl: 'books/book-overview.html.haml',   controller: BooksOverviewCtrl });
}]);

В настоящее время представление AngularJS находится в "app/assets/javascripts/angularjs/books/book-overview.html.haml". Когда я загружаю страницу, она говорит, что страница не найдена, поэтому где мне нужно хранить представления AngularJS в моем приложении Rails? Это ошибка:

GET http://localhost:3000/books/book-overview.html.haml 404 (Not Found)

Ответы

Ответ 1

После некоторых исследований я обнаружил, что есть два способа справиться с этим. Первый вариант заключается в том, как упоминаются Mahbub и Adnan Doric: хранить файлы в общей папке, потому что они все равно являются файлами staic html.

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

Второй вариант - хранить маршруты в определенном файле, например, "assets/javascripts/routes.js.erb". Из-за ".erb" можно использовать путь Rails-ресурса в файле и создать относительный путь следующим образом:

when('/books', { templateUrl: "<%= asset_path('book-overview.html.haml') %>",   controller: BooksOverviewCtrl });

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

Ответ 2

Я использую $templateCache, чтобы справиться с этим. Таким образом, у меня есть:

<script type="text/ng-template" id="bookOverview.html">
  <%= render partial: "book-overview" %>
</script>

Затем с помощью $routeProvider вы можете просто:

$routeProvider
  .when('/books', {
    templateUrl: 'bookOverview.html',
    controller: BooksOverviewCtrl 
  });

Таким образом, вы можете просто сохранить свои представления в каталоге app/views/books, где вы обычно сохраните их.

Ответ 4

Вы помещаете партитуры AngularJS в общую папку БЕЗ выключения конвейера активов, просто убедитесь, что он доступен в вашем браузере по указанному URL.

Ответ 5

Я создал новую папку в App/Assets/Javascript под названием Angular. Папка Angular содержит подпапку для контроллеров, представлений, служб и директив.

Теперь, чтобы ссылаться на представление, скажем sample.html. Вот как выглядел мой путь к шаблону.

.when('/sample', {       templateUrl: '/assets/ angular/views/sample.html',       контроллер: 'SampleCtrl'     })

Таким образом, весь код Angular находится в одной папке и не разбросан по всему месту. Кроме того, Rails Asset Pipeline может использоваться для минимизации и сжатия контроллеров и служб Angular.

Ответ 6

Я также предлагаю использовать Angular Шаблоны Rails

Gemfile

gem 'angular-rails-templates'

$ bundle install

application.js

//= require angular-rails-templates

app.js

angular.module('myApp', ['templates'])

Теперь, когда вы включите templateUrl: 'books/book-overview.html.haml', он проверит вашу папку с ресурсами для правильного представления.

Ответ 7

Я отключил конвейер активов в config/application.rb и поместил все файлы в общую папку. Поскольку файлы на стороне клиента (проект angularJS) не нуждаются в обработке, фильтры, я выбрал именно этот путь.

Ответ 8

Следующие могут быть хорошими, если вы хотите, чтобы они полностью разделены.

Один из вариантов может заключаться в создании символической ссылки файловой системы между папкой /ngapp/dist или /ngapp/build и папкой /public или подпапкой в ​​/public. Используйте сервер grunt/node для разработки и тестирования, поэтому вам не нужно перестраивать каждый раз, а затем grunt build в связанную папку /ngapp/dist, когда вы готовы нажать на свой удаленный сервер.

Это держит папку AngularJS отдельно от приложения Rails, но позволяет получить доступ только к окончательным файлам сборки, а не к исходным файлам в вашей папке приложения AngularJS.

Ответ 9

Вы можете попробовать использовать gem js_assets

Slim для AngularJS

Например, мы хотим использовать шаблон для Slim в приложении AngularJS. Пусть наши шаблоны будут в app/assets/webapp/. Мы делаем следующие настройки:

# config/application.rb
config.assets.paths << Rails.root.join('app', 'assets', 'webapp')

# config/initizlizers/assets_engine.rb
Rails.application.assets.register_engine('.slim', Slim::Template)

# config/environments/production.rb
config.assets.precompile += ['*.html']

Не забудьте подключить файл в application.js

//= require app_assets

Теперь для шаблона app/assets/webapp/blogs/edit.html.slim мы можем получить путь в зависимости от среды:

var path = asset_path('blogs/edit.html')

// the function will return for development:
// /assets/blogs/edit.html

// and for production
// /assets/blogs/edit-5eb3bb250d5300736006c8944e436e3f.html

$routeProvider
    .when('/books', {
    templateUrl: assetPath('bookOverview.html'),
    controller: BooksOverviewCtrl 
});