Ruby on Rails
पटरियों के साथ कोणीय कॉन्फ़िगर करें

रेल 101 के साथ कोणीय

चरण 1: एक नया रेल एप्लिकेशन बनाएं

gem install rails -v 4.1
rails new angular_example

चरण 2: टर्बोलिंक्स निकालें

टर्बोलिंक्स को हटाने से इसे जेमफाइल से हटाने की आवश्यकता होती है।

gem 'turbolinks'

app/assets/javascripts/application.js से require को निकालें:

//= require turbolinks

चरण 3: परिसंपत्ति पाइपलाइन में AngularJS जोड़ें

रेल संपत्ति परिसंपत्ति पाइपलाइन के साथ काम करने के लिए कोणीय प्राप्त करने के लिए हमें जेमफाइल में जोड़ने की आवश्यकता है:

gem 'angular-rails-templates'
gem 'bower-rails'

अब कमांड को रन करें

bundle install

bower जोड़ें ताकि हम AngularJS निर्भरता स्थापित कर सकें:

rails g bower_rails:initialize json

Angular को bower.json जोड़ें:

{
  "name": "bower-rails generated dependencies",
  
  "dependencies": {

    "angular": "latest",
    "angular-resource": "latest",
    "bourbon": "latest",
    "angular-bootstrap": "latest",
    "angular-ui-router": "latest"
  }
}

अब वह bower.json सही निर्भरताओं के साथ सेटअप है, आइए उन्हें स्थापित करें:

bundle exec rake bower:install

चरण 4: कोणीय एप्लिकेशन को व्यवस्थित करें

app/assets/javascript/angular-app/ में निम्नलिखित फ़ोल्डर संरचना बनाएं:

templates/
modules/
filters/
directives/
models/
services/
controllers/

app/assets/javascripts/application.js , कोणीय, टेम्पलेट सहायक और कोणीय एप्लिकेशन फ़ाइल संरचना के लिए require जोड़ें। ऐशे ही:

//= require jquery
//= require jquery_ujs

//= require angular
//= require angular-rails-templates
//= require angular-app/app

//= require_tree ./angular-app/templates
//= require_tree ./angular-app/modules
//= require_tree ./angular-app/filters
//= require_tree ./angular-app/directives
//= require_tree ./angular-app/models
//= require_tree ./angular-app/services
//= require_tree ./angular-app/controllers

चरण 5: कोणीय ऐप को बूटस्ट्रैप करें

app/assets/javascripts/angular-app/app.js.coffee ।

@app = angular.module('app', [ 'templates' ])

@app.config([ '$httpProvider', ($httpProvider)->
$httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrftoken]').attr('content') ])  @app.run(->   console.log 'angular app running' )

app/assets/javascripts/angular-app/modules/example.js.coffee.erb पर एक कोणीय मॉड्यूल बनाएँ:

@exampleApp = angular.module('app.exampleApp', [     # additional dependencies here   ])   .run(->     console.log 'exampleApp running'   )

इस ऐप के लिए app/assets/javascripts/angular-app/controllers/exampleCtrl.js.coffee पर एक कोणीय नियंत्रक बनाएँ:

angular.module('app.exampleApp').controller("ExampleCtrl", [   '$scope',   ($scope)->     console.log 'ExampleCtrl running'      $scope.exampleValue = "Hello angular and rails"  ])

अब कोणीय पर नियंत्रण पारित करने के लिए रेल के लिए एक मार्ग जोड़ें। config/routes.rb :

Rails.application.routes.draw do   get 'example' => 'example#index' end

उस मार्ग पर प्रतिक्रिया देने के लिए रेल नियंत्रक उत्पन्न करें:

rails g controller Example

app/controllers/example_controller.rb :

class ExampleController < ApplicationController
    def index
    end
end

दृश्य में, हमें यह निर्दिष्ट करने की आवश्यकता है कि कौन सा कोणीय एप्लिकेशन और कौन सा कोणीय नियंत्रक इस पृष्ठ को चलाएगा। तो app/views/example/index.html.erb :

<div ng-app='app.exampleApp' ng-controller='ExampleCtrl'>
  
  <p>Value from ExampleCtrl:</p>
  <p>{{ exampleValue }}</p>
  
</div>

ऐप को देखने के लिए, अपना रेल सर्वर शुरू करें और http: // localhost: 3000 / example पर जाएँ ।