ruby on rails 3 - Ubicación de las vistas de AngularJS dentro de la aplicación Rails

ruby-on-rails-3

Question

Estoy tratando de integrar AngularJS dentro de una aplicación Rails. Tengo una aplicación Rails con un controlador de libros y un modelo de libro. En la vista de índice de Rails tengo esto, y AngularJS debería asumir desde aquí:

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

Y el controlador AngularJS se ve así:

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

Y este es el routeProvider:

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

Actualmente, la vista de AngularJS se encuentra en "app / asset / javascripts / angularjs / books / book-overview.html.haml". Cuando cargo la página, dice que no se encontró la página, así que ¿dónde tengo que almacenar las vistas de AngularJS en mi aplicación Rails? Este es el error:

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

Answer 1

Creé una nueva carpeta en la Aplicación / Activos / Javascript llamada Angular. La carpeta Angular contiene subcarpetas para controladores, vistas, servicios y directivas.

Ahora para hacer referencia a una vista, digamos sample.html. Así es como se veía mi ruta de templateUrl.

.when (''/ sample'', {templateUrl: ''/assets/angular/views/sample.html'', controller: ''SampleCtrl''})

De esta manera, todo el código Angular reside en una sola carpeta y no se dispersa por todo el lugar. Además, la línea de activos de Rails se puede aprovechar para minimizar y comprimir los controladores y servicios de Angular.

Answer 2

Después de algunas investigaciones, descubrí que hay dos maneras de lidiar con esto. La primera opción es la forma en que Mahbub y Adnan Doric mencionan: almacenar los archivos en la carpeta pública porque de todos modos son archivos html básicos.

Aunque esto funciona, no me parece natural, porque entonces los archivos se dispersan. Algunos están en la carpeta pública, y otros están en la carpeta de activos / javascripts. No es mi opción preferida, pero podría funcionar bien para otras personas.

La segunda opción es almacenar las rutas en un archivo específico, como "asset / javascripts / route.js.erb". Debido a la ".erb" es posible utilizar la ruta de los recursos de Rails dentro del archivo y crear una ruta relativa como esta:

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

Tal vez no sea la solución perfecta, pero para mí esto funciona mejor, porque ahora todos mis archivos Angular se mantienen juntos en la carpeta "asset / javascripts".

Answer 3

He desactivado la canalización de activos en config / application.rb y puse todos los archivos en una carpeta pública. Dado que los archivos del lado del cliente (proyecto angularJS) no necesitan ningún procesamiento, filtros, elegí de esa manera.

Answer 4

Lo siguiente puede ser bueno si desea mantener los dos completamente separados.

Una opción podría ser crear un enlace simbólico del sistema de archivos entre la /ngapp/dist o /ngapp/build y la carpeta /public o una subcarpeta dentro de /public . Use un servidor de gruñidos / nodos para desarrollar y probar, de modo que no tenga que reconstruir cada vez, y luego grunt build de forma /ngapp/dist carpeta vinculada /ngapp/dist cuando esté listo para ingresar a su servidor remoto.

Esto mantiene la carpeta AngularJS separada de la aplicación Rails, pero permite el acceso solo a los archivos de compilación finales, no a los archivos de origen dentro de su carpeta de aplicaciones AngularJS.

Answer 5

Pone los parciales de AngularJS en la carpeta pública SIN deshabilitar la canalización de activos, solo asegúrese de que esté accesible en su navegador en la URL especificada.

Answer 6

Puedes intentar usar la gema js_assets

Slim para AngularJS

Por ejemplo, queremos usar plantillas Slim en la aplicación AngularJS. Deja que nuestras plantillas estén en app/assets/webapp/ . Hacemos los siguientes ajustes:

# 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'']

No olvides conectar un archivo en tu application.js

//= require app_assets

Ahora, para la plantilla app/assets/webapp/blogs/edit.html.slim podemos obtener una ruta según el entorno:

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 
});

Answer 7

Si usa la gema de angular-rails-templates puede introducirlas en la línea de activos de rieles y usar la memoria caché de plantillas desde angular.

Campo de golf:

• angular-rails-templates
• plantilla de caché

Answer 8

También sugiero usar plantillas de rieles angulares

Gemfile

gem ''angular-rails-templates''

$ bundle install

aplicacion.js

//= require angular-rails-templates

app.js

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

Ahora, cuando incluya templateUrl: ''books/book-overview.html.haml'' buscará en la carpeta de activos la vista correcta.

Answer 9

Yo uso el $templateCache para manejar esto. Así que en la vista tengo:

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

Luego, con $ routeProvider puedes simplemente:

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

De esta manera, puede mantener sus vistas en el directorio de app/views/books donde normalmente las guardaría.