Welcome to the final part of this review of the Pluralsight course Angular Best Practices by Joe Eames.

Joe has worked both full and part time as a technical teacher for over ten years.

He has produced 18 courses for Pluralsight.

Dealing With Models

Introduction

Now this is the first time I’ve heard about Backbone.js being used with Angular but as soon as I heard that idea it made sense to me.

Angular is unopinionated about models and Backbone is a library that can slot in quite easily. Joe looks at how to do this as part of this final module.

In this lesson Joe explains what a model is in Angular.

Creating Models with $http

This lesson looks at creating models from data retrieved by using the $http service.

There are many options for how we structure this data. Joe demonstrates just one example, but you can use it as a basis for structuring your models in the way that suits your preferences.

We see the that = this trick in our fetch function.

Joe summarizes the changes made 8 minutes into this lesson. The logic in app.js is now much simpler. The logic now exists in an encapsulated, abstracted and reusable service.

Creating Models with $resource

We continue to move business logic into our models, this time using our $resource objects.

We begin by creating an authenticate function in models.js. We also move registration logic into our catalog model.

Creating Models with Restangular

In this lesson Joe looks at Restangular, the first of three 3rd party libraries used in this module.

Joe gives a quick review of the steps to take to get Restangular working in our Angular project. We see the changes necessary to app.js and model.js.

Angular and Backbone.Model Together

Joe says some developers find the idea of combining Angular with Backbone ridiculous! They were never written to complement each other, but Joe has found they actually work very well together.

Angular is very un-opinionated about data. We look at three Backbone components

here:

• Backbone.Collection
• Backbone.Model
• Backbone.Events

Joe says it’s not “all rainbows and unicorns” as we need to remember to add a number of attribute properties, and there are places where Angular and Backbone feel very different to each other.

But he also says that there are significant benefits and it is a viable choice.

Joe explains the following points

• Represents Data and State
• Business Logic
• Caching
• Change Notification
• Simple
• Lifecycle Events

Creating Models with Backbone.Model – Retrieving Data

Joe starts with a demonstration of how to add the backbone libraries into our project, and we see that Backbone is available in the console.

We see how to setup backbone as a service. Joe recommends this approach with any 3rd party library. We previously saw this with toastr.

Later on in this lesson we test to see if our filter is working and get a Maximum call stack size exceeded error message.

We learn that Angular looks through the entire object no matter how deep it is, and that we have a circular reference problem. Fortunately this just needs a simple change to our catalog.html file.

Creating Models with Backbone.Model – Saving Data

This lesson involves new code in model.js and app.js as well as some updates to catalog.html and schedule.html.

We see that it is easy to listen to events on a specific object. Joe explains how the eventing system differs in Angular and Backbone.

A Brief Overview of Breeze

Joe explains the following headline points about Breeze:

• Save Offline Data
• Strongly Typed Query Syntax
• Change Tracking
• Object Navigation
• Consume and Extend Models
• Remote & Local Queries
• Sharing Data
• Works Great with Angular

Joe gives a quick example of a Breeze query.

If you want to dive deeper into working with Angular and Breeze, see the Build Apps courses from John Papa.

If you want to build Single Page Apps, without necessarily using Angular, see Building Data-Centric Single Page Apps with Breeze by Brian Noyes.