#405 AngularJS pro

Fantastic jump start (as always); mirrors all the lessons I had to learn myself over the last couple weeks.

I highly recommend https://github.com/tpodom/angularjs-rails-resource, especially the nested_urls branch, as an alternative for synchronizing with rails.

Everyone just a note.... In some of the firefox browsers the headers get passed as HTML.

To fix this Ajax issue just respond_with :json, :html

thanks very nice... I think will take this alternative over Backbonejs ... very nice

Excellent Railscast, as always!

That said, would anyone be willing to share opinions on when it's appropriate to use these frameworks (Angular, Backbone, etc.) vs. the traditional Rails/AJAX way of doing things? I image the benefit has to be pretty tremendous to undertake the learning curve but it's not apparent to me.

For example, would building the app the traditional way be suboptimal? And why?

I really appreciate the guidance! I'm allocating my excess capacity toward becoming a better Ruby programmer but would be willing to divert resource toward learning a new .js framework if that's a more prudent direction.

Excellent introduction to AngularJS! We've been using it fairly extensively in production (in a Rails app) for a couple months now, and it's definitely helped clean up and speed up our client-side code and development time.

egghead.io can't open.......

Looking forward to series for AngularJS：
parties
nested_urls
widget
...

Can someone who tried both Backbone and AngularJs give us some insights on the +/- of those two frameworks. I'm actually using Backbone in production, but AngularJs magic seems to attract my attention a lot!

thanks in advance for your replies.

Thanks for this great overview! As someone who's worked with BackboneJS, the dependency injection approach is a clever way of handling complex resource requirements that could crop up over time.

I've been using Angular for 6mos. now and im still amazed by its cleverness (module,DI, directives etc.).. IMO Backbone is past, Angular is the future of client-side webdev.. what Ember?

AngularJS doesn't work with Turbolinks. So if you are going for a non-single-page site you will have to disable Turbolinks. Angular registers alot of eventlisteners on the window and other stuff. It gets thrashed when you swap pages. Alternatively you could implement turbolinks in angular. It shouldn't be too difficult.

Something for Show Notes:

• AngularJS Batarang - AngularJS WebInspector Extension for Chrome

• AngularJS YouTube channel, e.g. "AngularJS MTV Meetup: Best Practices"

Awesome RailsCast!

I've been using angular for about 5 months now and it's been a great experience.

Personally I prefer it over Backbone and Ember, both of which I attempted to learn before I discovered AngularJS.

With Backbone, it seemed like I had to write a ton of boilerplate code to get anything working, and my code would get cluttered quickly.

After attempting Backbone, I tried to go with Ember. However, it seemed like it was under such heavy development, that finding good(current) tutorials/documentation was very difficult, which is important to anyone who is starting out to learn something new.

Very interesting episode.. Was giving out AngularJS a try and wanted to understand few things..

@ForumCtrl = ($scope, $resource) ->
  Topic = $resource("/forums/:id", {id: "@id"})
  $scope.topics = Topic.query()

So now when I go to forums/1 , I expected it would trigger show action, but it did not. It went to Index action.. How to pass routeParams to query()?

Also, I see that https://github.com/ludicast/angular-rails gem takes a totally different approach... Creating a very different directory structure under app/assets/angular/

controllers/
filters/
services/
widgets/

And all view logic is stuffed into /templates

Which would be more recommended? Anyone have tried out that gem...

I have yet to learn one of these framework (which I want to), but one thing I find odd is that in almost every tutorial or even the docs, it emphasizes "for a single page app".

When was the last time you ever made a single page app? What does that even mean? My apps span many many many pages, and could hardly be seen as some kind of single page calendar or todo list or something.

What am I missing here?

If I have model of User with first_name and last_name and I would use Angular with Rails. I would update User profile on the page on the fly and I would communicate with Rails in background. How should I do validation if model is being submitted attribute by attribute ?

One thing i wonder every time i fiddle around with (MVC-)JavaScript frameworks is how to do this the unobtrusive way – what if i want my app still to work without JS, and what about search engines?

One solution i could imagine are some kind of templates, which replace the "static" versions of my views via JS and then Angular (or whatever) does its job.

How do you solve this? Or is unobtrusive JS oldschool? ;-)

Nice episode! Will definitely check out Angular. I was focused on getting up to speed with ember, but this looks great too.

I would probably still hesitate to use any of these javascript frameworks in a consumer facing app though, at least one where I need SEO. But looks like they could be used very effectively for "dashboardy" stuff. Also, the clients have to download all the js before anything can start, and this might slow down the initial startup of your app.

You seem to keep improving all the time Ryan
we need a vote button here to give you some stats ;).
For now just take this high praise please:

+42

Been learning Angular for the last 2 weeks and it is nice to see a rails specific run through. Now do another one on Angularjs :)

good intro. please do one more screencast covering more aspects of angular

Is it just me, or AngularJS looks so a bad idea? Ryan, don't get me wrong, the episode was great, but I'm not convinced by the framework.

All that ng-show, ng-repeat, ng-class are looking like the old Java's JSF, and similar frameworks. It also enforces obtrusive JS with ng-submit and ng-click.

So my point is: your view will easily become cluttered and totally dependent on it. The advantage of other frameworks like Backbone, is to have a separation of concerns between the presentation and the behavior (less or no dependencies), and a structured client side application (MVVM).

Hey Ryan,
You should continue with Angular JS screencasts to build a non-trivial application and then repeat the process with Ember JS. That will give us a good frame of reference. Your Backbone screencasts have been very useful to me in coming up to speed.
Just a suggestion.
Keep up the good work.

Ryan, excellent as always!

I would REALLY like how integration with a testing framework. In particular, how to test interaction with the server, e.g. interaction requires login, and test verifies response from server.

Here is my small opensource project written in angularjs https://github.com/lucassus/mongo_browser I think it could be a good starting point for anyone interested in combining ruby apps with this awesome js framework ;)

Example of how to not populate the global name space using Angularjs and Coffeescript.

    @App = angular.module("App", ['ui', 'ngCookies', 'ngResource'])
        .config(["$routeProvider", ($routeProvider) ->

    App.controller 'MainCtrl', ->

Episode 404 is missing, great joke!

Excellent cast, I can definitely see how the jQuery soup I currently have can be moved into AngularJS. And 404 not found - very funny.

I've released angularjs_scaffold to help you develop your app with angularjs and rails (it generates angular's models, controllers and views) https://github.com/patcito/angularjs_scaffold

Thank you Ryan. This is really amazing screencast.

I have been seeing the lots of JavaScript frameworks on the planet. How can we determine the correct JavaScript framework?

[Angular|Knockout|Backbone|Active|Sammy|Raphael|Node].JS

Which is the best solution for specific applications as i expected to use with Rails?

I assume that Angular is a good starting point. :)

Any comments on Meteor? is it still far from a JS framework for production?

Great Cast!

FYI, Bootstrap components written in pure AngularJS:
http://angular-ui.github.com/bootstrap/

I did a slight variation of this project, and I was able to create new records (that persisted), the only problem is that now I pushed the app to heroku, records no longer persist.

It was working fine locally, so either it has something to do with precompiled assets, or there's some strange discrepancy when switching from sqlite to postgres.

Link to Repo:
https://github.com/lukethomas14/Angular-Todo

Link to App Deployed on Heroku:
http://angularfun.herokuapp.com/

Thx for this episode. Where is part 2? :)

I think this episode needs a part 2 or maybe part 3 episode since most rails apps are more complex. Would be great to have a proof of concept for a website with different pages, authentication, authorization.

Have a nice day.

Definitely a part 2 worth!!

As always. I'm looking at angularJS because I have to rewrite something.
Let's check out Railscasts... BÄM.. Tutorial for exactly that.

Mindreader.

Cheers

Btw... I got stuck how to use https://github.com/mikepinde/angular-ui-rails
on my angularJS application. I want to handle keypress event with it, but after I follow the steps in some tutorial (blog), it seems not worked. anyone can give me some good tutorial for "how to use angular-ui-rails"?

Cheers

Please fix the code markup, I see bunch of 'quot;'

Excelent article: AngularJS for jQuery Developers

Railscasts make me more and more sad lately: boring js-frameworks reviews instead of hardcore rails features.

It's time for be renamed to jscasts.

Thanks for this. It'd be great to see a RailsCast or two on Backbone Marionette.

Hi Ryan,

Thanks for the frontend framework episodes!

In the EmberJs app there was one feature not included in the AngularJs app - disabling the button if all entries are winners.

I implemented that in Angular easily by using ng-disabled="allWinners()" on the button and controller code

$scope.allWinners = ->
  for entry in $scope.entries
    return false unless entry.winner
  true

however I noticed that it was being called a lot (4 times on load and everytime a character is entered in the textbox).

Is there a way in Angular to only call a bound function when a property is updated, much like Ember does?

Hello everybody,

My questions:

• What is the difference between a rails resource and a rails model?
• Why does Ryan choose to generate a rails resource in this tutorial instead of a model?
• How come when a resource is generated, it still creates a model file?

Thanks for any help guys.

Kurt

Thanks for all the railscasts.

I have been thinking to change an existing app of mine to a single page app. Planning to use either backbone, angular or ember. Saw the railscasts on all three of them and I understood how to get them to rails.

I am sure that each of these have their own pros and cons depending on the situation. It would really be nice if you have a railscast that can elaborate on the situations where one them would be better than others.

I tried angularjs_scaffold as mentioned at the end of the video. But I see it's version of angular is 1.03 and seems like not much is happening on their github account either.
angularjs_scaffold github

The approach you used in this video is nice for a 1 page app but just wondering how it would scale for a full site with numerous apps or features which is why I tried angularjs_scaffold.

Do you think angularjs_scaffold is still viable? And is the method in this tutorial good enough to build a full angular website.

What I mean by full website is that as with angularjs_scaffold, other than the welcome page, all the controllers output json and all the views are basically being managed by angular.

Thanks for the great vids!
Al

Has anyone seen or created a solid example of using delete? Or even better, batch delete? Say I want to clear all entries in the example...I'm trying to use a simple call to a $scope.clearEntries function in my raffle.js.coffee file but doesn't seem to work.

Great kick off for Angular as always though, Ryan. Thanks again.

Does anybody have an example of extending this example with at least one more controller?

I tried to add more entities. After I add more entities, I tries to add data and I got 422 status. And this is my code:

class PostsController < ApplicationController
  respond_to :json

  def index
    respond_with Post.all
  end

  def show
    respond_with Post.find(params[:id])
  end

  def create
    respond_with Post.create(params[:post])
  end

  def update
    respond_with Post.update(params[:id], params[:post])
  end

  def destroy
    respond_with Post.destroy(params[:id])
  end
end

app = angular.module("newsApp", ["ngResource"])

app.factory "Post", ["$resource", ($resource) ->
  $resource("/posts/:id", {id: "@id"}, {update: {method: "PUT"}})
]

@NewsCtrl = ["$scope", "Post", ($scope, Post) ->
  $scope.posts = Post.query()

  $scope.addPosts = ->
    post = Post.save($scope.newPost)
    console.log(post)
    $scope.posts.push(post)
    $scope.newPost = {}
]

<div ng-controller="NewsCtrl">
  <form ng-submit="addPosts()">
    <input type="text" ng-model="newPost.title">
    <input type="text" ng-model="newPost.content">
    <input type="text" ng-model="newPost.source">
    <input type="submit" value="Add">
  </form>
  <ul>
    <li ng-repeat="post in posts">
      {{post.title}}
      {{post.content}}
      {{post.source}}
    </li>
  </ul>
</div>

Can I use this way?

Vide: Ember vs Angular

Can't verify CSRF token authenticity

Cage Match - EmberJS vs. Angular http://vimeo.com/68215606

On Rails4, this didn't work for me in config/environment/production.rb:

config.assets.js_compressor = Sprockets::LazyCompressor.new { Uglifier.new(mangle: false)}

but this did work:

config.assets.js_compressor = Uglifier.new(mangle: false)

Hi Ryan,

I liked this episode but would really like to see how one would approach the has_many model situation and nested forms with angularJs. I cant find anything that can help me save the attributes from one model plus the nested model.

I want to know if someone do some angular unit test with karma or something else ?

It hard to find something on the web when i use 'rails coffeescript angular test'
i found almost nothing ...

Ryan. On behalf of all beginners I am begging you PLEASE stop using Coffeescript. It is hard enough that we have rush to master several techniques simultaneously, people keep overcomplicating stuff which is already hard enough with things like Coffee. Please!!!

If you are getting a 406 'unacceptable' when following the tutorial, then make this small change in your $resource in the coffeescript file:

"/entries/:id.json"

The .json makes it acceptable.

Great vid mate, however using Rails 4 I'm getting the following error on my create and update methods:

ActiveModel::ForbiddenAttributesError

Great comments, especially Sergey and Adrian's comments helped me get mine working. I put a clear winner button. Here's the code:

raffler.js.coffee

$scope.clearWinner = ->
    angular.forEach $scope.entries, (entry) ->
      entry.winner = false

index.html.rb

  <button ng-click="clearWinner()">
    Clear Winners
  </button>

I recently wrote an article about how to set up Angular in Rails, making Karma aware of the assets pipeline.

The magic is basically in a rake task:

sprockets = Rails.application.assets
sprockets.append_path Rails.root.join("spec/karma")
files = Rails.application.assets.find_asset("application_spec.js").to_a.map {|e| e.pathname.to_s }

with the karma configuration being:

files: [
  APPLICATION_SPEC,
  'app/assets/javascripts/angular/*/*.{coffee,js}',
  'spec/javascripts/**/*_spec.{coffee,js}'
]

More info: http://sebastien.saunier.me/blog/2014/02/04/angular--rails-with-no-fuss.html

Not sure why the creator of this didn't post this, but here is a working version of this episode for Rails 4. https://github.com/nynj/angular-railscasts-rails4 A summary of the differences:
1. Add in strong parameters in the the entries controller
2. add in csrf-tokens in the coffeescript
3. keep jquery in application.js. Not sure why this is needed, but I had to keep jquery in.

Thank you very much for the cast. I've been having trouble with Entry.query(). It gives me an Server Internal Error 500 and does not return the query. If I replace the call with hardcoded list of entries it works. Anyone knows what might me going wrong? thank you

Here is a comparison of different ways to get started making an AngularJS app including the example from this railscast

http://www.dancancro.com/comparison-of-angularjs-application-starters/

Ryan, thanks for this intro. A nicer example would have been in one where you show how angular can help client side validations especially since client side validations is not well maintained.

So all that "complex" logic goes in the js files, and routing is done through angular. Does all of this make the rails functionality for these tasks redundant? How do you resolve or use both simultaneously?

For some reason I never connect to the database. Verified that it was populated withe seed data. However the seed data never displays neither is any input added. Any suggestions?

guys
in rails 4.2 not work for me

https://github.com/thiagovsk/raffler_rails_angularjs

To anyone who is looking for an easy Rails plus Angular setup, the gem Entangled might help. It's very easy to integrate and is basically ActiveRecord for Angular. It also syncs all changes to your database in real time across all connected clients.

https://github.com/dchacke/entangled

Wonderful! Just what I was looking for! :)

Very nice

Works with :

angular.module('Raffler', []).controller "RaffleCtrl", ($scope) ->

  $scope.entries = [
    {name: "Larry"}
    {name: "Curly"}
    {name: "Moe"}
  ]

and :

<html ng-app="Raffler">

Using Rails 4.1.7 ; very new angular user.