रेलवे जावास्क्रिप्ट संपत्ति

पर निर्भर करता है अजीब तरीके से व्यवहार करते हुए मैं वर्तमान में रेल सीख रहा हूं, और मैं अपनी परियोजना में कोणीय का उपयोग करना चाहता हूं।रेलवे जावास्क्रिप्ट संपत्ति

यहां स्क्रैच से एक साधारण एप्लिकेशन है।

1)। एक नया रेल ऐप बनाएं:

rails new hello_rails

2)। करने कोणीय मणि जोड़े Gemfile

gem 'angularjs-rails'

3)। बंडल

bundle install

4) स्थापित करें। app/assets/javascripts/application.js

//=require angular

5) में जावास्क्रिप्ट मेनिफेस्ट में कोणीय जोड़ें। स्वागत सूचकांक

rails generate controller welcome index

6) उत्पन्न करें। एक कोणीय हैलो दुनिया

<div style = "background-color: grey"> 
    this is index.html.erb<br> 

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

</div>

7) के साथ index.html.erb populate। 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) को भी संशोधित करें। में config/routes.rb

root 'welcome#index'

इस भागो welcome#index के लिए रूट मार्ग निर्धारित करें - यह ठीक काम करता है।

कोणीय काम कर रहा है:

हालांकि, अगर मैं root_path पर लौटने के लिए लिंक पर क्लिक करें यह कार्य करना बंद कर

यहाँ हम क्या मिलता है

इसके अतिरिक्त, अगर हम अपने application.html.erb पर कुछ कोणीय जोड़ते हैं तो उपज कोणीय काम करना बंद कर देता है।

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

तुम क्यों इस तरह से काम कर रहा है रेल व्याख्या कर सकते हैं?

स्रोत

2015-11-15 dwjohnston

क्या आपने टर्बोलिंक हटा दिए हैं? – max

@ मैक्स नोप ... .. – dwjohnston

मुझे नहीं लगता कि टर्बोलिंक्स और कोणीय का उपयोग एक साथ किया जाना है और अधिकतर अच्छा नहीं खेलेंगे। अपने Gemfile से टर्बोलिंक निकालें और '// = आपके 'application.js' से turbolinks की आवश्यकता है'। – max

मैंने आपके चरणों का पालन किया और उसी तरह से कोणीय कॉन्फ़िगर किया जैसा आपने किया था। मैंने टर्बोलिंक्स को हटा दिया और इससे पहली समस्या हल हो गई। दूसरी समस्या ngApp निर्देश के गलत उपयोग के कारण थी।

AngularJS ngApp प्रलेखन

ngApp निर्देश आवेदन और का मूल तत्व निर्दिष्ट करता है जिनकी आम तौर पर पेज के मूल तत्व के पास रख दिया गया है

और

केवल एक AngularJS एप्लिकेशन प्रति HTMLपर स्वत: बूटस्ट्रैप किया जा सकता हैदस्तावेज़।

कहा। आपके कोड में ng-app="" है। और चूंकि एक एप्लिकेशन केवल बूटस्ट्रैप किया जा सकता है, पहले div आपके application.html.erb में कोणीय कोड युक्त काम करेगा लेकिन दूसरा index.html.erb में नहीं होगा।

आपकी समस्या का हल अपनी आवश्यकताओं के अनुसार अपने application.html.erb में अपने <body> या <html> टैग पर जगह ng-app="" है। (आप <head> अनुभाग उदाहरण के लिए पेज <title> की तरह में टैग में हेरफेर करने के कोणीय चाहते हैं, बस में ngApp रखकर अपने <html> टैग पर ng-app="" जगह।, तो बस अपने शरीर टैग पर रखें नहीं।

<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>

जोड़ तोड़ पृष्ठ का शीर्षक <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> 
...

वर्क्स एक आकर्षण की तरह!

यहां रेल के साथ कोणीय का उपयोग करने के लिए कुछ संसाधन हैं और कोणीय के साथ टर्बोलिंक को सही तरीके से कॉन्फ़िगर करें। Resource 1
Resource 2

स्रोत

2015-11-30 01:17:16

रेलवे जावास्क्रिप्ट संपत्ति

उत्तर

संबंधित मुद्दे