Recent Comments

For EmberJS there is a great PeepCode screencast: https://peepcode.com/products/emberjs

It covers the latest version of Emberjs and is IMO worth the 12$.

Use:

  Roo::Excel.new(file.path, nil, :ignore)

Just checked on both 1.9.2 and 1.9.3, works fine.

I found a fix for it just now. I called up Excel/Csv classes from the Roo object. Seems to be working ok

def self.open_spreadsheet(file)
  case File.extname(file.original_filename)
    # ...
    when ".xls" then Roo::Excel.new(file.path, nil, :ignore)
    # ...
  end
end

Yeah, i have it too, but with Excelx. The problem occurs with ruby 1.9.3, but not in 1.9.2 Anyone know about this?

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).

Brandon,

Thanks for the review... Have heard that SEO becomes really difficult with AngularJS... Have you experienced the same with learni.st ? What all strategies did you use to overcome SEO related issues??

+1... Also I'm waiting for an EmberJS episode ;) would be really awesome

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

Thanks, glad to hear you like the site! As far as learning JavaScript and CSS, I'd take a look at Code School--while they have a monthly membership fee, I feel it is well worth the cost. All their courses are interactive (you actually get to write code that they verify works on their servers during practice sessions), and they cover everything from jQuery basics to CSS3 to CoffeeScript to Backbone and beyond. They even have some really great Rails courses for programmers of all expertise levels.

Thanks for the feedback! The mobile web experience is in flux at the moment, but we do have native iOS apps that are pretty awesome! ;) [Edit: I just notice you already said you knew this. My apologies. :)] (To be fair to Angular, we've had mobile web display bugs long before we introduced Angular.)

The infinite scrolling on the homepage, profile page, and board page is something that is now dead simple to set up, thanks to an infinite scroll directive I wrote. Also, binding site-wide follow and like buttons (and other such things) to a currentUser model means a single update in the model updates the view everywhere. Also, admin pages (for staff to manage users, featured content, etc.) have been written in record time.

We've also been able to both simplify and boost our client-side test coverage compared to the old code (which had far too much DOM access to test effectively).

Thanks Brandon, that's a really helpful post. Would you have any recommendations on learning JS/CS for a JS Noob that knows Rails/Ruby?

Btw, great site too! I searched for Rails and one of my blog posts showed up :D

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 :)

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

This could work nicely with Mongoid to create custom fields in MongoDB.

Unfortunately we cannot use this gem the ip is remote but on lan configuration.

I use a virtualbox for rails server and found out that the 192.168 ranged ip's are not counted as trusted request.

@Ryan I hope we are not abusing the comment space with this.
@Erwin it would surely be nice to have a postprocess method, but my real issue with at_exit was that I need to know when the
callbacks are registered.
Thus it might be a good idea to have the postprocess inside Rails::AppBuilder and let Rails::AppBuilder expose some
register_* methods like register_first, register_last etc.
Another possibility would be, that a register method returns the registered block, which later can be used to specify dependencies. Voilà an example:

class AppBuilder < Rails::Appbuilder
   def initialize
     # ...
     @rspec = register do
       generate 'rspec:install'
     end
   end

   #...
     register after: @rspec do
       generate 'I:Do:Not:Know:What' # ;)
     end
   
end

SEO is one of the biggest problems with single page apps and goes back to Flash days as well. Even angularjs.org has bad SEO. They are working on solutions though but this is a global SE issue, not Angular specific.

It is definitely something to consider when choosing the tech for your project.

Here is more information on validation: http://docs.angularjs.org/guide/forms.

I HIGHLY suggest validating on the client and backend to cover your bases.

It isn't just for single page apps. You can put ng-app anywhere so one single widget on the page could use Angular.

If your needs are grand (one-page app), it works. If you just need a small widget/form, it works.

I see, that makes a lot more sense, but still, funnily enough I still cant think of many apps I use that are 'single page' aside from gmail. Most apps I like seem more like websites, and model stack overflow more.

I'm sure angular would work fine for a 'website' (as you put it) but are there any JS frameworks more intended for websites rather than one page apps?

Hi Dan, would you please share how you did this? Thanks

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.

+1

There is often a distinction made when discussing this topic that separates "web applications" and "web sites." The difference is, perhaps, a bit pedantic, but thinking about it in this way can help understand where people are coming from.

For example, Gmail would be a "single page app"--there are no page reloads, and all the content changes are handled via JavaScript. Generally your server software will only render a single view, and the client-side technology will handle moving things around.

A site like StackOverflow, however, would be classified as a "web site" (even though many might call it a web application). While it has elements that lean on JavaScript and Ajax, you still primarily browse content by browsing different URLs, which the server software renders separately.

Client-side frameworks like Angular provide special tools for building the former (Gmail-style) web applications (for example, see Angular's $routeProvider service and ngView directive), and people often focus on this because these apps can be harder to write and seem "newer" or "cooler," but Angular can be used to drive elements in a more traditionally built web site as well.

I was thinking about this also. The happiest spot for me would be to consider my app as a set of single page apps. Each one would greatly lighten the page reloading, and user experience, but make it easy to move to another single page. The pages would map to my primary resources.

I would hope it wouldnt limit it. But it goes beyond just a 'hint'.. i mean a lot of places i read it pretty explicitly says "for one page applications". And ive seen it written more than just here or there. It's pretty much every where I look

I only have my iPad with me. I opened your learnalist site and while it looks great it seems to be quite glitchy on the iPad. The menu floats about 20% from the top of the screen, it seems to resize every so often, every page seems to freeze and become unresponsive on load or when scrolling. While I see you have an iPad app, it seems to be a recurring theme that more complex sites with loads of bindings (ahem gmail ahem) seem to not work well or at all on tablets and lower performance devices. Something to keep in mind.

Also, can you please give us some examples of client side features learnalist has that would otherwise be messy to implement manually with something like jquery?

Not trying to belittle your website btw, I will be sure to open it from a PC later and I'm sure my experience will be great :)

here's a nice slideshare presentation that covers rspec among other details: http://www.slideshare.net/homanj/background-jobs-with-resque

Maybe i don´t understand your question, but why should Angular (or another framework) limit your app to a single page?
I think docs start with minimalistic (single page) examples to give you an understanding of how it works, but that doesn´t mean you have to stay at that level.

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? ;-)

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 ?

Yes Same error here.

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?

BTW it will be nice to mention that better_errors works only with Rails >= 3.x

• I think what you are looking for is setting up routes. In order to be able to use routeParams in your controller, you must first set up routes. There is good documentation for setting up routes here: http://docs.angularjs.org/tutorial/step_07

• When you are finished setting up routes, you can then use routeParams in your controller. There is an angular service called $routeParams, which you can pass in just like the other 2 services($scope and $resource).
  Ex:

@ForumCtrl = ($scope, $resource, $routeParams) ->
  # more code ...

Note: When you want to retrieve a single record, Topic.query() won't work, you must use Topic.get({id: my_id_here})
Ex:

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

In the angularjs documentation you can find another example of this: http://docs.angularjs.org/tutorial/step_11

and more about using $resource here:
http://docs.angularjs.org/api/ngResource.$resource

Hi Brandon - Thanks a million for sharing your valuable insight!

I'll keep honing my Ruby skills for now but will definitely dabble with a client-side .js framework (and it seems that AngularJS is like the RoR of these...)

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

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.

Are you sure? I used Turbolinks with another, similar framework - KnockoutJS - and it all worked OK. But if somebody want to build singe page sit it does not need to use Turbolinks.

Something for Show Notes:

• AngularJS Batarang - AngularJS WebInspector Extension for Chrome

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

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.

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?

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.

Thanks for the great overview

Nice Episode.. Thanks :) Is it possible to open in Netbeans?

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.

Devise is almost ready to use with Rails (look at 'rails4' branch in its repository), but including ActionController::Live crashes the application.

For the moment, solution is to move events action to separate controller.

This is a fantastic question. As I expressed in a comment below, we've been using AngularJS in production for a couple months now with huge success. However, we didn't start off using Angular--at first, we used a more "traditional" (one might say "old school") style of basic, imperative jQuery code.

While this worked, as the application's complexity grew over time, the JavaScript we had written (which I have come to term "jQuery Soup") became more and more unmaintainable. It became clear that our existing direction was not tenable in the long term; this is when I introduced AngularJS to the team.

Now, we have rewritten significant portions of our application using Angular, and things are going very well. That said, if we had started out using Angular (or another client-side framework like Ember, Knockout, Backbone, and so forth), perhaps we wouldn't have felt the JavaScript pain as early as we did, and would not have to rewrite anything.

On the flip side, sometimes these frameworks can take a bit of time to master--Angular gets a little more complex conceptually when you start getting into providers, directives, child and isolate scopes, etc. While the learning curve has proven worth it to our team now, using plain jQuery in the beginning may have allowed us to get our app out the door faster than learning a new framework like Angular would have.

So, while I would say that learning such a client-side framework is a great idea (I believe every web developer should have some proficiency with at least one), I don't think it's necessary to try to force that kind of architecture on every application you write. You have to make a judgement call and determine for yourself if you think it'll be worth it. I will say, however, that if you believe that your client-side code will grow to be even a little complex, some kind of framework is likely a good idea, and as Ryan has demonstrated so expertly here, Angular makes it really simple to build client-side apps!

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

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

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.