angular js

AngularJs Tutorial 6 — Pt 3 — Building a RESTful Application With PHP & MongoDB

I guess all the people are same, inside. All they want is fun and when commitments comes by, they say ‘Ta-Ta’!!!. God, when are they gonna learn “You have to fight for something u believe in and nothing can be obtained without sacrificing certain things’….But, I have no regrets, I gave everything, but, you will have.

“If you love somebody, let them go. If they return, they were always yours. If they don’t, they never were.”

Anyway, back to topic.

Our final tutorial in building a Restful API – AngularJs & PHP (with MongoDB) is Complete!!!

So, What are the things we gonna see…

  • [API] – CORS!!!
  • [UI] – Advanced concepts in AngularJs $resource & Custom reusable resourceFactory

CORS – “cross-origin resource sharing”

It means “Cross-Origin Resource Sharing (CORS) is a specification that enables truly open access across domain-boundaries.

To explain it simple, “Generally, One(web) cannot access or request or send resource to another domain, unless both present in same site(According to “Same Origin Policy“!). What CORS does is, it provides a way for cross domain access by specifying certain things in ‘header’ request, thereby allowing a site from another server can access!”

Example:

In our example, our PHP application runs in default ’80’ port. However, our AngularJS UI is executed via Yeamon-GruntJS, which is in 3501 port. So, when runned in browser, both act like in different server and our poor AngularJs cannot access our PHP/API part. 🙁

But, not to worry, Here comes CORS!!!

(https://github.com/sk8terboi87/simple-restful-tutorial-api/blob/blogs/app/index.php)

As you can see, all our response in our API are send to this ‘responseHandler’ method where we have specified our CORS.

Check here for detailed information about it

  1. http://en.wikipedia.org/wiki/Cross-origin_resource_sharing
  2. http://enable-cors.org

Note: Normally, to enable CORS, you first have to send a ‘pre-request or pre-flight request’ from UI (before making the actual request). That is an “OPTIONS” (similarly to GET, POST…).

But, AngularJS is nice enough to send it automatically, so you don’t have to worry about it when using $resource.

Advanced concepts in AngularJs $resource

“AngularJS Promise variables – $then & $resolved”

Before jumping into this, some have no idea what this is.

In our blogs application, we are making a request to fetch all ‘blogs’ from API and display in a nice tabular form.

Our code is something like this,

The second line makes an ajax call to API, and the result is binded to ‘$scope.blogs’ as expected. But, JavaScript goes in ‘asynchronous’ way, what happens is, before getting the result, our third line will be executed, which causes ‘undefined’ thingy!!!

To solve this, we need to make certain things in our code, ‘synchronous’, i.e We need to bind our ‘$scope.blogs’ only when we get response from ‘blogResource’. This is where AngularJs ‘$then & $resolved” comes in.

For updated code looks like this,

‘$then’ from AngularJs will be executed only when response comes in. Thus making our two-binding works nicely.

(Note: Older version of AngularJs $resource will not send $then)

And our lastly, our Reusable ‘resource factory’

https://github.com/sk8terboi87/simple-restful-tutorial-ui/blob/blogs/coffee/Services/resourceFactory.coffee

This is a separate AngularJs factory which we used along with the controller showed before. We can use this simple usable resource methods for all of our new modules, say ‘Users’ or ‘Categories’ or ‘whatever’. Just inject in our controller, thats all. You can easily make a any kind of calls to our API.

(Note: PUT request is not directly available by AngularJs $resource, so, you noticed the difference in our code)

Thats it for our Simple Restful tutorial!!! Even though my explanation seems lil big, just browse the code to know how simple this is :). Just small bunch of files which creates an entire CRUD application.

What we have so far done is just a start, we will slowly continue to evolve… to next level. So, be sure to be with me 🙂

(And don’t forget to share :P)

Leave a Reply