The world of JavaScript changes at a fast pace and in the time since my Angular and Breeze Part 1 and Angular and Breeze Part 2 Pluralsight courses have been released, both libraries have had some revisions. One such revision is worth making some changes in your code. The good news is that the folks at Angular and Breeze made it easier on us all. This post explains the changes and how you can refactor your code quickly to work with the latest Angular and Breeze libraries.

Short Version

With HotTowel.Angular.Breeze 2.1.0 (and prior), we used to need these 3 files:

  • scripts/breeze.angular.q.js
  • scripts/breeze.directives.validation.js
  • app/config.breeze.js

If you had that code, you can safely replace it with these files:

  • scripts/breeze.angular.js
  • scripts/breeze.directives.js
  • scripts/breeze.to$q.shim.js (optional shim ... read more on this down below)

Then remove all references to config.breeze.

If you want to rid yourself of the breeze.to$q.shim.js entirely, simply replace all of the places in your code where you see to$q with then.

Or, if you are starting from scratch, simply run install-package HotTowel.Angular.Breeze which will get you version 2.2.0 and the correct files.

The entityManagerFactory.js file has changed from HotTowel.Angular.Breeze 2.1.0 to 2.2.0. You should be sure to use the newer file.

I'll be updating my Angular and Breeze Pluralsight courses to show this change soon.

Q and $q

Why the changes? Well let's break it down. The breeze.angular.q.js file no longer exists. It used to handle converting Q to $q between Breeze and Angular. This is thankfully no longer needed, so let's say goodbye to it.

breeze directives

The breeze.directives.validation.js file used to contain the breeze validation directive. Since then, there are other directives the Breeze folks have added, so they renamed the file to account for that and now they live in breeze.directives.js.

to$q shim

When the Q to $q issue went away, unfortunately all of the code in my course still referenced it. So there is a shim file named breeze.to$q.shim.js just for this purpose. It allows you to write Breeze queries that use the to$q function in place of a then. This shim only exists to help with my course. So if you are working through my course, and you replace every place you see to$q with a then you will no longer need this shim file either.

Angular Breeze Service

The file config.breeze.js used to help us configure Breeze for Angular. One night I was chatting with my friend Ward Bell at IdeaBlade (makers of Breeze) and I asked why they didn't create a Breeze configuration service. The Breeze team soon thereafter created the breeze.angular.js file, which contains the breeze Angular service. This service configures Breeze to be "Angular Ready". And thus the need forconfig.breeze.jswas soon gone and replaced withbreeze.angular.js. This is great because now we just add that file and its all set to go. Before, we had to write the code to make Breeze ready for Angular.

The Whole Sha-Bang

If you start from scratch and use HotTowel.Angular.Breeze version 2.2.0, you are presented with instructions to add these files to your project. Then you simply add the modules breeze.angular and breeze.directives as dependencies to your application's module and you are off to the races!

<link href="content/breeze.directives.css" rel="stylesheet" />

<script src="scripts/breeze.debug.js"></script>
<script src="scripts/breeze.angular.js"></script>
<script src="scripts/breeze.directives.js"></script>
<script src="scripts/breeze.saveErrorExtensions.js"></script>

<script src="scripts/breeze.to$q.shim.js"></script> <!-- Needed only if you are using to$q -->

<script src="app/services/entityManagerFactory.js"></script>

Update your app.js to include the breeze modules

(function () {
    'use strict';

    var app = angular.module('app', [
        // Angular modules 
        'ngAnimate',        // animations
        'ngRoute',          // routing
        'ngSanitize',       // sanitizes html bindings (ex: sidebar.js)

        // Custom modules 
        'common',           // common functions, logger, spinner
        'common.bootstrap', // bootstrap dialog wrapper functions

        // 3rd Party Modules
        'breeze.angular',    // configures breeze for an angular app
        'breeze.directives', // contains the breeze validation directive (zValidate)
        'ui.bootstrap'       // ui-bootstrap (ex: carousel, pagination, dialog)
    ]);

    // Handle routing errors and success events.
    // Trigger breeze configuration
    app.run(['$route', function ($route) {
            // Include $route to kick start the router.
        }]);        
})();