Come integrare le viste di Rails con angularjs ng-view?

Ho creato la vista rotaie (ERB). Tuttavia, voglio integrarlo in angularjs $routeProvider, ma non so che url dovrei compilare in templateUrl per darmi la vista delle rotaie appropriate. Ad esempio, ho provato:Come integrare le viste di Rails con angularjs ng-view?

$routeProvider.when('/pages/foo', { 
templateUrl: "/pages/foo",     
controller: "PageFoo" 
       })

Ma il risultato appare come una pagina vuota. Le due funzionalità sono anche integrabili? O devo creare nuovi file .html, invece di usare preesistenti .html.erb

fonte

2013-10-22 user1542639

ho angolare movimentazione mia applicazione Rails, quindi la sua possibile. Devi solo creare percorsi – apneadiving

@apneadiving, puoi darmi un esempio? Ho provato templateUrl: "/ pages/foo", e ho pagine # pippo, ma ng-view non mostra nulla. – user1542639

Angular js fornisce i propri percorsi. le rotte delle rotaie saranno sempre utilizzate quando si desidera connettere le viste con il database (CRUD). che è l'associazione dei dati con angular.js ora ti mostrerò come usarlo con le rotaie ...

Voglio aggiungere un nuovo utente utilizzando viste angolari js ed elencare tutti gli utenti. userò le rotaie come backend per archiviare gli utenti nel database quindi creerò user_controller

Prima creare una risorsa di utente. noi non creerà alcuna vista in modo da essere attento per quel
```
rails g resource user name:string 
```
Poi vai a route.rb e verificare c'è un percorso creato, e creare regolatore casa con l'azione indice che useremo come la nostra applicazione singola pagina in cui la nostra produzione sarà resa.
```
rails g controller home index 
root to: "home#index" 
```
digitare questo comando sul terminale in cui vedrete i nostri 7 percorsi. non usiamo mai il metodo new e edit, perché new e edit non rispondono a json.
```
rake routes 
```
Ora vogliamo tutto l'utente con un nome univoco in modo da andare alla migrazione create_user e rimuovere il commento di questa linea e poi ci sarà la migrazione del database.
```
add_index :users, :name, unique: true 
rake db:migrate 
```
Ora modificare il nostro controller in modo che tutti i dati recupero e l'inserimento sarà fatto con formato JSON. quindi metti questo codice all'interno di user_controller.rb, se stai usando le rotaie 4 segui questo altrimenti no. gli attributi saranno regolabili nel modello.
```
class UsersController < ApplicationController 
    respond_to :json 

    def index 
    respond_with User.all 
    end 

    def create 
    respond_with User.create(user_params) 
    end 

    private 
    def user_params 
     params.require(:user).permit(:name) 
    end 
end 
```
Il suo tempo di utilizzare angulajs nella nostra applicazione rotaie
Vai application.html.erb sostituire i tag line con questo
```
<html ng-app="userApp"> 
```
Ora aggiungere angular.js file in asini/javascript, scaricalo da http://angularjs.org/
Ora creeremo un controller per gestire il nostro applicativo angolare percorsi ionici per sapere poi che questo controller vuole qualcosa da me. quindi digita sul terminale
```
mkdir -p app/assets/javascripts/angular/controllers 
```
Ora creiamo il file controller stesso. Sto chiamando questo controller "userCtrl", quindi il nostro nome file sarà app/assets/javascripts/angular/controller/userCtrl.js.caffè

controller userCtrl

app = angular.module("userApp", ["ngResource"]) 

@userCtrl = ($scope, $resource) -> 
    User = $resource("/users", {id: "@id"}, {update: {method: "PUT"}}) 
    $scope.users = User.query() 

    $scope.createUser = -> 
    user = User.save($scope.newUser) 
    $scope.users.push(user)

(Questo inserirà nuovo record utente nel database, con la creazione di metodo createUser)

creare una vista per prendere input da utente scrivere questo codice in casa/index.html.erb.

<div ng-controller="userCtrl"> 
    <form ng-submit="createUser()"> 
    <label>Enter Name</label> 
    <input type="text" placeholder="Enter user name" ng-model="newUser.name" /> 
    <button ng-click="createUser()" class="button tiny">Submit</button> 
    </form> 


    <!-- List all usres --> 
    <h4 ng-show="users.$resolved && users.length > 1">All users</h4> 
    <span ng-repeat="c in users"> 
     {{c.name}}<br> 
    </span> 
</div>

applicazione Run e guardare uscita.

fonte

2013-12-29 06:58:15 SSR

In questo page, fornisce un esempio di impalcatura Angularjs + Rails "Hello World". (Si prega di ignorare le parti aggiuntive per le funzioni aggiuntive.) Quando si digita un nome, quindi si visualizza un messaggio Hello per lui, si ha un'app funzionale Angularjs + rails.

Un paio di punti da condividere:

Un modo semplice per includere angular.js di file:
1. Metti gem 'angularjs-rails' nella vostra Gemfile;
2. Quindi inserire //= require angular nel file app/assets/javascripts/application.js.
3. Molto probabilmente sarà necessario //= require angular-resource in modo da poter utilizzare i servizi ngResource per accedere all'API RESTful fornita dall'applicazione rails dal server. See this page per esempi.

include-specifici Rails-controllore codici javascript nel layout in questo modo:

Aggiungere i seguenti codici per app/views/layouts/applications.html.erb file dopo la linea <%= yield %>:

<%= page_specific_js = "#{params[:controller]}_#{params[:action]}" %> 
<%= javascript_include_tag page_specific_js if Rails.application.assets.find_asset page_specific_js %> 
<%= stylesheet_link_tag page_specific_js if Rails.application.assets.find_asset page_specific_js %>

Rimuovere //= require_tree . da application.js.

Includere i seguenti codici in config/inizializzatori/assets.rb per precompilare js e file css:

Rails.application.config.assets.precompile << Proc.new do |path| 
    if path =~ /\.(css|js)\z/ 
    full_path = Rails.application.assets.resolve(path).to_path 
    app_assets_path = Rails.root.join('app', 'assets').to_path 
    if full_path.starts_with? app_assets_path 
     puts "including asset: " + full_path 
     true 
    else 
     puts "excluding asset: " + full_path 
     false 
    end 
    else 
    false 
    end 
end

fonte

2014-07-11 11:14:30 gm2008

Come integrare le viste di Rails con angularjs ng-view?

risposta

Problemi correlati