Posted on by & filed under Content - Highlights and Reviews, Programming & Development, Web Development.

AngularJS is a JavaScript framework that can help you write web applications quickly using less code. AngularJS is not a library, rather it is an entirely different way of thinking about writing web applications. As such, AngularJS has certain opinions about how you should be using it. Whereas in the vanilla JavaScript world, you are given a blank canvas on which to paint, AngularJS provides structure, organization and patterns to work with.

In this post we are focusing on using the ngResource module in AngularJS, which is “a factory that creates a resource object and lets you interact with RESTful server-side data sources.” Read Chapter 9: Practical Applications, Ajax to see an example using ngResource with Ajax.

Why Can’t AngularJS Find the ngResource Module?

I’ve seen this question asked again and again by people starting out with AngularJS. You often see this in the JavaScript console:

The answer is that you have not included the appropriate JavaScript file. ngResource is not part of the AngularJS core distribution (it used to be), and if you want to use it, you must go download angular-resource.js (or angular-resource.min.js) from the AngularJS repository.

How Can I Make $resource Synchronous?

If you do something like this in a controller:

You will find that $scope.user is, in fact, undefined, and you get a lovely JavaScript error. You may believe that you need to make ngResource synchronous so that your $scope.user will be populated when you need it. This is incorrect. What’s happening is: User.get() returns a promise, and when a promise lives in a Scope, it is automatically resolved, but it is undefined until then (more about promises).

What you really want to do is execute code after the User.get() call is finished up. You can do it like this:

You will still get $scope.user eventually, when the request completes. After it is complete, you will be able to concatenate names.

PUTting to URLs

If you need to PUT, you need to PUT. ngResource does not support PUT out of the box, but it is extremely easy to implement:

The first parameter is the URL, of course. The second parameter is for default request parameters. For example, if you want to hit /your/url?foo=bar, use the above. The third parameter is where the good stuff happens. This creates a custom method called “put” that executes a PUT request against your URL. In addition, we can supply different default parameters for this particular method. To use our put, do this:

This was an example of creating a custom Resource (“class”) method. We could have called our method whatever we wanted to, and supplied default parameters for a shortcut to some commonly used resource. You’ll see another example below.

Basic Authentication

ngResource’s $resource service uses the built-in $http service for its requests. It’s simply an abstraction layer on top of that to make it easy to work with RESTful URLs. $resource itself isn’t very configurable, but $http is. One way to tackle the problem is to implement a solution akin to that found here. Once we’ve included the handy Base64 service, we can go about making that request this way:

The problem with this approach is that browser behavior differs. In Firefox, if you put in incorrect credentials, you get a 401 response and that’s that. If you are in Chrome, however, the user will be prompted (with the default basic auth prompt) for the login and password repeatedly until the user hits “Cancel”, at which point you will receive your 401. In fact, the request is still in a “Pending” state while this occurs. Not only is this annoying and awful, AngularJS doesn’t have access to whatever the user entered.

A workaround, if appropriate, is to tell your web server to return something other than 401 on an authentication failure, and go from there. In AngularJS, a 500 (for example) will cause the $http promise to be rejected and you can handle it however you’d like. This is not recommended if you actually ever need the login prompt to occur!

Hopefully this has been helpful for someone looking to solve ngResource-related problems.

For more details about AngularJS, check out the books below or explore the AngularJS library on Safari.

Safari has the content you need

Developing an AngularJS Edge is intended for intermediate JavaScript programmers. No attempt has been made to explain the JavaScript syntax used (except in the cases where AngularJS may introduce a peculiarity), nor do we explain concepts such as closures, function chaining, callbacks, or other common patterns. What we do explain are basic AngularJS concepts, components, and their applications. We provide examples along the way, answer questions, and correct common misconceptions. Together, we’ll build a working single-page weblog application using AngularJS, which will help you become proficient with using AngularJS to go out and create your own applications.
Develop smaller, lighter web apps that are simple to create and easy to test, extend, and maintain as they grow. AngularJS is a hands-on guide that introduces you to AngularJS, the open source JavaScript framework that uses Model–view–controller (MVC) architecture, data binding, client-side templates, and dependency injection to create a much-needed structure for building web applications.
Instant AngularJS Starter is designed to get you ramped up on AngularJS as quickly and efficiently as possible. By the end of this book, you’ll possess all of the knowledge you need to make full-featured, real-life applications with AngularJS. The code samples are reusable, and specifically intended to give you a head start on your next project. This book will transform your curiosity about AngularJS into a set of production-ready AngularJS skills, through a broad overview of the framework and deep dives into its key features.

About the author

Christopher Hiller is a full-stack software engineer living and working in Portland, OR. He has over 15 years of web development experience and is a JavaScript zealot. When not coding epic masterpieces, he enjoys being a new dad, gaming, craft beers and woodworking. Chris can be contacted via GitHub, at: You can also reach him on Twitter: @misterhiller.

Tags: AngularJS, Javascript, ngresource,

Comments are closed.