Ricodigo's blog

We write delicious code.

Announcing the Release of AngularJS Scaffold

If you’re a rails dev interested in using AngularJS on the client than this gem is for you. Basically, it makes your rails app return only JSON. Just put all your templates in assets/templates/controller_name and enjoy. The app also takes care of CSRF and other stuff to get you going with rails.

Last but not least, it comes with bootstrap and font-awesome so your app looks beautiful by default (or not horrible by default ;)).

To get going, just add angularjs_scaffold to your Gemfile or install the gem:

gem install angularjs_scaffold

Second set it up, this will add angularjs, bootstrap and fontawesome (there’s an option to only install AngularJS):

rails g angularjs:install

Run your usual scaffold command:

rails g scaffold Post title:string body:string
rake db:migrate

Now run the angularjs command and it will rewrite everything the AngularJS way:

rails g angularjs:scaffold Posts

Get it fresh here.

I gave a presentation at this month’s ParisRB greatly inspired by the one given by Igor, you can check the slides here. People seemed to like it in general, but there were two critics.

One by Ori Pekelman about the use of the ng-* attributes, you can still use data-ng-* and that’s what I do in my own code usually, I used the ng-* attribute for brievity during the presentation but I guess I could switch to data next time.

The other critic by Paul Chavard (a self-confessed EmberJS troll) was the use of attributes such as ng-click=”archive()” which is mixing html with app logic. Well you don’t have to use those, you can just create a directive such as ngArchive where you describe the kind of event it should listen to and then use it as a simple attribute. So instead of:

<a ng-click="archive()">archive</a>

You can do:

<a data-ng-archive>archive</a>

Then you just have to define your directive in your JS code. I used the ng-click attribute during the presentation for brievity, AngularJS is also awesome for writing quick prototypes but it shines for building huge apps too (thanks to directives among others). And there you go, no logic in your HTML! Even less so than Mustache which comes with if statements and each loops all around (just trolling EmberJS here).

It was a fun event in general and thanks to Ori for it.

Comments