Rails Javascript-Assets verhalten sich merkwürdig abhängig vom Routing

Ich lerne gerade Rails, und ich möchte angular in meinem Projekt verwenden.Rails Javascript-Assets verhalten sich merkwürdig abhängig vom Routing

Hier ist eine einfache Anwendung von Grund auf neu.

1). Erstellen Sie eine neue Schienen App:

rails new hello_rails

2). In Winkel Juwel Gemfile

gem 'angularjs-rails'

3). Installieren Sie das Bündel

bundle install

4). Fügen Sie eckigen Javascript-Manifest in app/assets/javascripts/application.js

hinzu

5). Welcome Index erzeugen

rails generate controller welcome index

6). Füllen Sie index.html.erb mit einer eckigen Hallo Welt

7). Ändern Sie auch application.html.erb

<pre> 
<!DOCTYPE html> 
<html> 
<head> 
    <title>HelloRails</title> 
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> 
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 
    <%= csrf_meta_tags %> 
</head> 
<body style = "background-color:green"> 

    This is application.html.erb <br> 

    <%= link_to "click here to go home", root_path %> <br> 

A yeild statement is below: <br> 
<%= yield %> 

</body> 
</html>

8). Set Wurzel Route zu welcome#index in config/routes.rb

root 'welcome#index'

Run dieses - das funktioniert gut.

Hier ist, was wir bekommen:

Die Winkel arbeitet:

Allerdings, wenn ich auf den Link klicken, um root_path zurückzuversetzen

nicht mehr funktioniert

Zusätzlich, wenn wir etwas Winkel zu unserem application.html.erb hinzufügen, ergeben sich die erzielten Winkelanschläge.

<div ng-app=""> 
<p>Name : <input type="text" ng-model="home_name"></p> 
<h1>Hello {{home_name}} at home</h1> 
</div>

Können Sie erklären, warum Schienen auf diese Weise funktioniert?

Quelle

2015-11-15 dwjohnston

Haben Sie Turbolinks entfernt? – max

@max Nope ... .. – dwjohnston

Ich denke nicht, dass Turbolinks und eckig dazu gedacht sind, zusammen verwendet zu werden und höchstwahrscheinlich nicht gut spielen werden. Entfernen Sie Turbolinks aus Ihrer Gemfile und '// = erfordern Turbolinks' von Ihrer 'application.js'. – max

Ich folgte Ihren Schritten und konfigurierte eckig wie Sie es taten. Ich entfernte Turbolinks und dies löste das erste Problem. Das zweite Problem war auf eine falsche Verwendung der ngApp Richtlinie zurückzuführen.

AngularJS ngApp Dokumentation

Die ngApp Richtlinie bezeichnet das Wurzelelement der Anwendung und typischerweise in der Nähe des Wurzelelements der Seite platziert wird

und

Nur eine AngularJS-Anwendung kann per HTML-Code automatisch per Bootstrapping gestartet werden. Dokument.

Das sagte. Sie haben ng-app="" zweimal in Ihrem Code. Und da nur eine Anwendung bootstrappt werden kann, würde der erste div Winkelcode in Ihrem application.html.erb funktionieren, aber der andere in index.html.erb würde nicht.

Die Lösung für Ihr Problem ist Platz ng-app="" auf <body> oder <html> Tags in Ihrem application.html.erb nach Ihren Bedürfnissen. (Wenn Sie Winkel wollen Tags manipulieren im <head> Abschnitt wie Seite <title> zum Beispiel nur Platz ng-app="" auf Ihrem <html> Tag. Wenn es einfach auf Ihrem Körper-Tag nicht platzieren.

<pre> 
<!DOCTYPE html> 
<html> 
<head> 
    <title>HelloRails</title> 
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> 
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 
    <%= csrf_meta_tags %> 
</head> 
<body style = "background-color:green" ng-app=""> 

    This is application.html.erb <br> 
    <div> 
    <p>Name : <input type="text" ng-model="home_name"></p> 
    <h1>Hello {{home_name}} at home</h1> 
    </div> 

    <%= link_to "click here to go home", root_path %> <br> 


A yeild statement is below: <br> 
<%= yield %> 

</body> 
</html>

Manipulieren von Seitentitel, indem ngApp in <html>

<html ng-app=""> 
<head> 
    <title>{{home_name}} | HelloRails</title> 
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> 
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 
    <%= csrf_meta_tags %> 
</head> 
...

wirkt wie ein Zauber!

Hier finden Sie einige Ressourcen zur Verwendung von Angular mit Rails und zur korrekten Konfiguration von Turbolinks mit Angular. Resource 1
Resource 2

Quelle

2015-11-30 01:17:16

Rails Javascript-Assets verhalten sich merkwürdig abhängig vom Routing

Antwort

Verwandte Themen