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.jsORangular-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-ujsAnd 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