Ruby on Rails
레일과 함께 각도 구성

레일 101의 각도

1 단계 : 새로운 Rails 앱 만들기

gem install rails -v 4.1
rails new angular_example

2 단계 : 터보 링크 제거

터보 링크를 제거하려면 Gemfile에서 제거해야합니다.

gem 'turbolinks'

app/assets/javascripts/application.js 에서 require 를 제거합니다.

//= require turbolinks

3 단계 : AngularJS를 자산 파이프 라인에 추가

Angular가 Rails 자산 파이프 라인으로 작업하게하려면 Gemfile에 추가해야합니다.

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

이제 명령을 실행하십시오.

bundle install

AngularJS 의존성을 설치할 수 있도록 bower 추가하십시오.

rails g bower_rails:initialize json

bower.json 각도를 추가하십시오.

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

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

이제 bower.json 이 올바른 종속성으로 설정 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 에서 Angular에 대한 require 사항, 템플릿 도우미 및 Angular app 파일 구조를 추가합니다. 이렇게 :

//= 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"  ])

이제 Rails에 경로를 추가하여 제어를 Angular로 넘깁니다. config/routes.rb :

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

해당 경로에 응답하도록 Rails 컨트롤러를 생성하십시오.

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>

앱을 보려면 Rails 서버를 시작하고 http : // localhost : 3000 / example을 방문 하십시오 .