Awesome

angular-ujs

Distributed via

Unobtrusive scripting for AngularJS ( without jQuery dependency )

Project philosophy

Develop in LiveScript

LiveScript is a compile-to-js language, which provides us more robust way to write JavaScript.
It also has great readibility and lots of syntax sugar just like you're writting python/ruby.

Native, lightweight directives

Unobtrusive scripting in jquery_ujs provides the same interface with angular directives.
We use the similarity between them and provides seamless intergration with jquery_ujs.

Spec / Scenario coverage

We use krama to run unit test against angular-ujs.spec.ls and use protractor to run intergration test via angular-ujs.scenario.ls.

Installation

We follow DRY and has one dependency only on angularjs.
However, we recommend you add ng-rails-csrf into your project. As it name suggests, ng-rails-csrf automatically resolves CSRF in angularjs environment without jquery_ujs.

Just use it

(Optional) Download and include ng-rails-csrf.js.
Download and include angular-ujs.js OR angular-ujs.min.js.

Then include them through script tag in your HTML.

Rails projects (Only support 3.1+)

Add this line to your application's Gemfile:

gem 'ng-rails-csrf' # Optional
gem 'angular-ujs'

And then execute:

$ bundle

Then add these lines to the top of your app/assets/javascripts/application.js file:

//= require angular
//= require ng-rails-csrf (Optional)
//= require angular-ujs

And include in your angular module definition:

/* 'angular.ujs' DO NOT depend on 'ng-rails-csrf' module.
* You need to include it yourself.
*/  
var module = angular.module('my-awesome-project', ['angular.ujs']).

Note: Ensure that the ng-app is specified in your application layout (app/views/layouts/application.html.erb):

<!DOCTYPE html>
<html ng-app="my-awesome-project">
<head>

Usage

"data-confirm": Confirmation dialogs for links and forms

<form data-confirm="Are you sure you want to submit?">...</form>

"data-method": Links that result in POST, PUT, or DELETE requests

<a href="..." data-method="delete" rel="nofollow">Delete this entry</a>

"data-remote": Make links and forms submit asynchronously with Ajax

** Notice : API changed **

For angularjs apps, ONLY those items with ng-model will be submitted with data-remote

<form data-remote="true" action="...">
  <input type="text" name="name" ng-model="name">
</form>

You can specify the model name via `data-remote` :

<form data-remote="user" action="...">
  <input type="text" name="name" ng-model="user.name">
  <input type="email" name="email" ng-model="user.email">
</form>

Use them all together :

<a href="..." data-method="delete" data-remote="true" data-confirm="Are you sure you want to delete?" rel="nofollow">Delete this entry</a>

Contributing

Fork it ( https://github.com/tomchentw/angular-ujs/fork )
Create your feature branch (git checkout -b my-new-feature)
Commit your changes (git commit -am 'Add some feature')
Push to the branch (git push origin my-new-feature)
Create new Pull Request