Sharing Top Content from the Angular-sphere.

Working with AngularJS and Silex as Resource provider

  • First of all we must realize that resources aren’t included in the main AngularJS js file and we need to include angular-resource.
  • We can create our http services with AngularJS without using this extra js file but it provides a very clean abstraction (at least for me) and I like it.
  • In the example we will use one simple SqlLite database (included in the github repository)

    Our main (and only one) html file:

    As we can see we will use ng-app=”MessageService” defined within the js/services.

  • Silex (and Symfony) returns HTTP 302 moved temporaly when we’re trying to access to the resource without the trailing slash but when we’re working with mounted controllers we will obtain a 404 page not found (bug/feature?)
  • We’re using mounted routes in this example:

    With one simple Silex application (without mounted routes) in one file it doesn’t happen (we will see HTTP 302 and a new request with the trailing slash).

How to use Silex as restful resource provider for AngularJS applications.

@NobisNews: Working with AngularJS and Silex as Resource provider via @gonzalo123

This days I’m playing with AngularJS. Angular is a great framework when we’re building complex front-end applications with JavaScript. And the best part is that it’s very simple to understand (and I like simple things indeed). Today we are going to play with Resources. Resources are great when we need to use RestFull resources from the server. In this example we’re going to use Silex in the backend. Let’s start.

First of all we must realize that resources aren’t included in the main AngularJS js file and we need to include angular-resource.js (it comes with Angular package). We don’t really need resources. We can create our http services with AngularJS without using this extra js file but it provides a very clean abstraction (at least for me) and I like it.

We’re going to create a simple application with CRUD operations in the table. In the example we will use one simple SqlLite database (included in the github repository)

Our main (and only one) html file:

As we can see we will use ng-app=”MessageService” defined within the js/services.js file:

And our controller in js/controllers.js:

Now the backend part. As we said before we will use Silex. We’re going to use also RouteCollections to define our routes (you can read about it here). So our Silex application will be:

And finally our Resource controller:

And that’s all. Our prototype is working with AngularJS and Silex as REST provider. We must take care about one thing. Silex and AngularJS aren’t agree in one thing about REST services. AngularJS removes the trailing slash in some cases. Silex (and Symfony) returns HTTP 302 moved temporaly when we’re trying to access to the resource without the trailing slash but when we’re working with mounted controllers we will obtain a 404 page not found (bug/feature?). That’s because my REST service is /api/message/resource/:id instead of /api/message/:id. If I chose the second one, when angular tries to create a new resource, it will POST /api/message instead of POST /api/message/. We’re using mounted routes in this example:

With one simple Silex application (without mounted routes) in one file it doesn’t happen (we will see HTTP 302 and a new request with the trailing slash). Because of that I use this small hack to bypass the problem.

Working with AngularJS and Silex as Resource provider

Comments are closed, but trackbacks and pingbacks are open.