Angular data access: it’s a breeze

One of the big challenges in separating concerns in your team between frontend SPA / App development and backend API development is to find that correct interface between the two. To avoid confusion or even discord in the team, I find it always best to have both worlds ‘overlap’; either the backend developers share the work on the services in the frontend (in the case of Angular), or the frontend developers share the work in the backend on the API Controllers (in the case of Web API). Now there is a more transparent way: enter Breeze.

Breeze can be most easily seen as your Entity Framework for JavaScript frontend development – including but not limited to Angular. Your backend can be a wide range of implementations from Ruby and PHP to .NET Web API, or even MongoDB. It supports caching, changesets and data querying.

Querying data through Breeze can be done in similar syntax to what we’re used in LinQ. In the following example, we compose a query for all customers whose name begins with the letter ‘C’ and sort the results by company name.

Source code

var query = breeze.EntityQuery()
    .from('Customers')
    .where('CompanyName', 'startsWith', 'C') 
    .orderBy('CompanyName');

Then we create an EntityManager and execute the query.

Source code

var manager = new breeze.EntityManager(serviceName);
manager.executeQuery(query)  // [1]
       .then(querySucceeded) // [2]
       .fail(queryFailed);   // [3]

Any Web API Controller that is decorated with the BreezeController attribute and serves IQueryable data, can be natively queried from Breeze and the query is passed to the backend. This query can be forwarded up to Entity Framework, ending up directly on your database queries!

To find out all the details on how to implement this I would like to give props and forward you to this blog entry.