Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/rnd-soft/oxymoron

oxymoron
https://github.com/rnd-soft/oxymoron

Last synced: 3 months ago
JSON representation

oxymoron

Awesome Lists containing this project

README 

        
# Oxymoron



##Установка



Добавьте гем в Gemfile:



```

gem "oxymoron", git: "https://github.com/storuky/oxymoron.git", branch: :master

```



## Первичные настройки (Asset Pipeline)



Подключите зависимости внутри application.js и application.css



**application.js**

```

/*

= require oxymoron/angular

= require oxymoron/angular-resource

= require oxymoron/angular-cookies

= require oxymoron/angular-ui-router

= require oxymoron/ng-notify

= require oxymoron

*/

```



**application.css**

```

/*

 *= require oxymoron/ng-notify

 */

```



## Дополнительные настройки



**config/initializers/oxymoron.rb**

```

Oxymoron::Config.setup do |c|

  # изменить путь сохранения генерируемого oxymoron.js

  c.oxymoron_js_path = Rails.root.join('app', 'assets', 'javascripts', 'public') 

  

  # Изменить конструктор форм. По умолчанию используется OxymoronFormBuilder

  c.form_builder = MyFormBuilder 

  

  # Запретить переопределение form_for из ActionView::FormHelper. В этом случае используйте хэлперы oxymoron_form_for и oxymoron_field_for

  c.rewrite_form_for = false 

end

```



##Использование



Далее необходимо заинжектить 'oxymoron' и 'ui.router' в ваше AngularJS-приложение



**application.js**

```

angular.module('app', ['ui.router', 'oxymoron'])

```



Создайте файл routes.js, который будет содержать роуты приложение. Метод $stateProvider.rails() дублирует роутинг рельсового routes.rb.



**routes.js**

```

angular.module('app')

  .config(['$stateProvider', function ($stateProvider) {

    $stateProvider.rails()

  }])

```



В applicaiton_controller.rb необходимо выключать лейаут, если была запрошена страница посредством ajax-запроса.



**app/controllers/application_controller.rb**

```

class ApplicationController < ActionController::Base

  layout proc {

    if request.xhr?

      false

    else

      index

      'application' # или другой лейаут

    end

  }

  

  private

  def index

    # В продуктовом режиме следует прописать эту строчку в initializers/oxymoron.rb

    ActionView::Base.default_form_builder = OxymoronBuilder

  end

end

```



Отредактируйте ваш лейаут, изменив



**app/views/layouts/application**

```

= yield

```

на

```

ui-view

```

или для СЕО-френдли на

```

ui-view

  div[ng-non-bindable]

    = yield

```



Все методы CRUD должны быть обернуты внутрь respond_to



**Example:**

```

class PostsController < ActiveRecord::Base

  before_action :set_post, only: [:show, :update, :destroy]



  def index

    respond_to do |format|

      format.html

      format.json {

        @posts = Post.all

        render json: @posts

      }

    end

  end

  

  def show

    respond_to do |format|

      format.html

      format.json {

        render json: @post

      }

    end

  end

  

  def new

  end

  

  def edit

  end

  

  def create

    respond_to do |format|

      format.json {

        @post = Post.new post_params

        if @post.save

          render json: {post: @post, msg: "Post successfully created", redirect_to: "posts_path"}

        else

          render json: {errors: @post.errors, msg: @post.errors.full_messages.join(', ')}, status: 422

        end

      }

    end

  end



  def update

    respond_to do |format|

      format.json {

        if @post.update(post_params)

          render json: {post: @post, msg: "Post successfully updated", redirect_to: "posts_path"}

        else

          render json: {errors: @post.errors, msg: @post.errors.full_messages.join(', ')}, status: 422

        end

      }

    end

  end



  def destroy

    respond_to do |format|

      format.json {

        @post.destroy

        render json: {msg: "Post successfully deleted"}

      }

    end

  end

  

  private

    def set_post

      @post = Post.find(params[:id])

    end

    

    def post_params

      params.require(:post).permit(:title, :description, :author)

    end

end

```



Oxymoron добавляет некоторую функциональность для вашего AngularJS-приложения. В частности, нам становятся доступны фабрики-ресурсы имя которых соответствует имени вашей модели в Rails-приложении. В нашем случае это фабрика Post.



**Доступны следующие методы для работы с ресурсами:**

```

Post.query() // => GET /posts.json

Post.get({id: id}) // => GET /posts/:id.json

Post.new() // => GET /posts/new.json

Post.edit({id: id}) // => GET /posts/:id/edit.json

Post.create({post: post}) // => POST /posts.json

Post.update({id: id, post: post}) // => PUT /posts/:id.json

Post.destroy({id: id}) // => DELETE /posts/:id.json

```



Создайте AngularJS-контроллер "PostsCtrl"



**Пример:**



```

angular.module('app')

  .controller('PostsCtrl', ['Post', 'action', function (Post, action) {

    var ctrl = this;

    

    // Данный код вызовется только на странице '/posts'

    action('index', function(){

      ctrl.posts = Post.query();

    });

    

    // Вызовется на страницах соответсующих паттерну '/posts/:id'

    action('show', function (params){

      ctrl.post = Post.get({id: params.id});

    });

    

    // Вызовется на '/posts/new'

    action('new', function(){

      ctrl.post = Post.new();

      ctrl.save = Post.create;

    });

    

    // Вызовется на '/posts/:id/edit'

    action('edit', function (params){

      ctrl.post = Post.edit({id: params.id});

      ctrl.save = Post.update;

    })

    

    // Вызовется на двух страницах

    action(['edit', 'new'], function(){

      //

    })

    

    // Вызовется на '/posts/some_method'

    action('some_method', function(){

      //

    })

    

    // etc

  }])

```



##Пример Views

**posts/index.html.slim**



```

h1 Posts



input type="text" ng-model="search"



table

  thead

    tr

      th Date

      th Title

      th Author

  tbody

    tr ng-repeat="post in ctrl.posts | filter:search"

      td

        | {{post.created_at | date:"dd.MM.yyyy"}}

      td

        | {{post.title}}

      td

        | {{post.author}}

```



**posts/show.html.slim**

```

dl

  dl Date

  dd

    | {{ctrl.post.created_at | date:"dd.MM.yyyy"}}

  dl Title

  dd

    | {{ctrl.post.title}}

  dl author

  dd

    | {{ctrl.post.author}}

```



**posts/new.html.slim**

```

h1 New post



= render 'form'

```



**posts/edit.html.slim**

```

h1 Edit post



= render 'form'

```



**posts/_form.html.slim**

```

= form_for Post.new do |f|

  div

    = f.label :title

    = f.text_field :title

  div

    = f.label :description

    = f.text_area :description

  

  = f.submit "Save"

  

```



Для задания ссылок используйте аттрибут ui-sref, как это описано в документации

```

a ui-sref="posts_path" Все посты

a ui-sref="new_post_path" Новый пост

a ui-sref="edit_post_path({id: id})" Редактировать пост

a ui-sref="post_path({id: id})" Просмотр поста

```



##Дополнительно

В window вам доступна переменная Routes, в которой хранятся все роуты приложения.



**Например**

```

Routes.posts_path() //=> '/posts'

Routes.post_path({id: 1}) //=> '/posts/1'

Routes.post_path({id: 1, format: "json"}) //=> '/posts/1.json'

Routes.posts_url() //=> 'http://localhost:3000/posts'

```

Старайтесть избегать использование Routes для составления ajax-запросов на методы ресурсов.



Если ожидается, что ваш метод, определенный на ресурсе возвращает массив, то необходимо сделать соответстующую пометку



```

resources :posts do

  get 'my', is_array: true

end

```



Тогда выполнив метод Post.my() внутри вашего AngularJS-контроллера, вы получите данные в виде массива. В противном случае, AngularJS выкинет исключение.



Приятного кодинга:)