New Breeze Angular Service | John Papa

John Papa

Evangelist on the loose

New Breeze Angular Service

...

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.
        }]);        
})();
tags: angular breeze hottowel javascript pluralsight
  • Chris Seils

    Where can I get the breeze.to$q.shim.js file without having to install the Hot towel angular breeze package?

    • yyardim

      Why don’y you create a temp project, install hot towel angular breeze and get the files from your temp workspace?

  • Greg

    Just did this upgrade, to a fairly large project. It went flawlessly.. great job John!

  • Nasir

    Hot Towel Angular Breeze(Version 2.2) installs breeze.directives.validation but breeze.directives is missing. Whereas kick start instruction says to include breeze.directives. I have added this file from breeze website, is it correct? Shall I remove breeze.directives.validation from solution?

  • Buddy

    Likewise, breeze.directives.js was not installed. Also, the responsive design component does not refresh the “visible” left sidebar. This happens after reducing the width, opening the menu in hidden mode, then reestablishing a wider width. The newly exposed left sidebar then had its menu items in “display:none” style.

    • Fred Mastropasqua

      Version 2.2 installed the breeze.directives.js for me from nuGet. Strange that it’s missing from you and Nasir.

      • David Cornelson

        Same issue here. I get breeze.directives.validation.js.

        • Rob Hudson

          Same issue here. I stepped through the course, following along exactly, and I have breeze.directives.validation.js, not breeze.directives.js. I will try to install to an empty project and obtain the file that way.

          • Rob Hudson

            Figured it out… HotTowel installs Breeze.Angular.Directives 1.3.2. The necessary version is 1.3.6.

            If you manually install breeze.angular.directives, it will replace the breeze.directives.validation.js with the correct breeze.directives.js file.

            PM> install-package breeze.angular.directives

            Here is the output when I did it:

            Installing ‘Breeze.Angular.Directives 1.3.6′.
            Successfully installed ‘Breeze.Angular.Directives 1.3.6′.
            Removing ‘Breeze.Angular.Directives 1.3.2′ from CC.Web.
            Successfully removed ‘Breeze.Angular.Directives 1.3.2′ from CC.Web.
            Adding ‘Breeze.Angular.Directives 1.3.6′ to CC.Web.
            Successfully added ‘Breeze.Angular.Directives 1.3.6′ to CC.Web.
            Uninstalling ‘Breeze.Angular.Directives 1.3.2′.
            Successfully uninstalled ‘Breeze.Angular.Directives 1.3.2′.

  • Bob Mazzo

    After downloading template in Visual Studio (install-package HotTowel.Angular.Breeze), I get a build error in ..areasHelpPageXmlDocumentationProvider.cs :

    Error 2 ‘AngularSpa2.Areas.HelpPage.XmlDocumentationProvider’ does not implement interface member ‘System.Web.Http.Description.IDocumentationProvider.GetDocumentation(System.Web.Http.Controllers.HttpControllerDescriptor)’ c:usersrobertjmdocumentsvisual studio 11ProjectsAngularSpa2AngularSpa2AreasHelpPageXmlDocumentationProvider.cs 14 18 AngularSpa2

    Please advise…

    thanks.
    Bob

    • Albert

      Thanks Bob.

  • Ken Kletzien

    Thanks for the great work, John. As others have noted, I think you need to add breeze.directives.js.

    Here’s a separate bug and the fix:

    in shell.js, $rootscope.$on(events.spinnerToggle… your callback function signature is wrong. You have function(data) when it should be function(event, data). Your controller activate/deactivate stuff doesn’t use this so you probably didn’t notice. spinner.spinnerShow() and .spinnerHide() won’t work without this fix.

    • Chris

      Thanks for this fix Ken

  • Fred Mastropasqua

    I’m trying the new version and the removal of the to$q file but keep getting the error “TypeError: Cannot read property ‘then’ of undefined”

  • Fred Mastropasqua

    return datacontext.getSessionPartials().then(function (data) { this line on the sessions.js returns the error “TypeError: Cannot read property ‘then’ of undefined”

    • Fred Mastropasqua

      Figured it out, I had changed my method name and the one from the session didn’t match the one on the datacontext. User Error.

  • Ben

    I did this upgrade and noticed two things.
    1. On the BreezeJS site they mention that the Q.js file is no longer needed, but Breeze blows up with a message that Q.js is missing if it’s not there.
    2. After switching to using .then(), etc. my scope is no longer updating the same way it used to. It seems strange as I see the calls come back and change the viewmodel variables, but nothing that is watching the scope picks it up anymore. Not sure why this would change here and this upgrade is the only difference. Any ideas?

    • Ben

      So I think the issue in part was due to that before I was able to return one promise for multiple calls for the same active service call and have it handled properly. Now it doesn’t seem to work. Still need to do a bit more digging.

      • Bob Mazzo

        @Ben , I am having similar issues. I’m getting ‘Unknown provider: breezeprovider’ errors. It’s pointing to datacontext.js but I can’t figure out what’s wrong.
        My {{vm.messageCount}} var is not getting dynamically updated on the Dashboard.
        Any resolution on your side ?

        • Michael Witt

          Bob, I got a similar error. I resolved by adding the breeze.angular and breeze.directives to the app.js. Could that be it for you?

          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’,

          ‘breeze.directives’,

          ‘ui.bootstrap’ // ui-bootstrap (ex: carousel, pagination, dialog)

          ]);

          • Bob Mazzo

            yes indeed. I came back over here via StackOverflow, and realized exactly what you just pointed out as well. Thanks for responding.

  • Thomas

    I installed Hot Towel Angular Breeze (Version 2.2) to and empty web project in VS 2013.. I added breeze.directives.js to the scripts folder and used the code listed in this article. Running the project works but I see the following error in the console:
    Module ‘app’ is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

    What am I missing?

    • Mike Vrooman

      The new line needs to be placed after the existing line in the’ Bootstrapping’ section since it is dependent on the app module being initialized. Ideally it would be put in the section if you want to follow the existing pattern.

      • Thomas

        That fixed it. Thanks for help.

  • Brian

    I am watching/following along with your course from Pluralsight. So far, it is going really well and I am enjoying the new/modern way of doing web development.
    One huge issue for me is this. I have installed HotTowel 2.2 and updated all the libraries through NuGet. I then came to your post about the new services and updated the index.html file and such. Everything seemed to work. Then I noticed that when I have a deep object graph that I want bound to the view, nothing but the first level of data is bound. For example, School model has an address with two lookups attached. One for State and another for Country. I have foreign keys attached to the model (stateId and countryId, respectfully). So on the page when I try {{s.state.name}} this doesn’t ever go to the lookups and binds the name value from the stateId that is returned with the model. I banged my head against this for quite awhile and the only thing that I have found so far is to call .expand(‘State, Country’) in the datacontext to have the graph filled in for me when I get to the view. Now it works but if my lookups have models hanging off of them, they will not work. I guess that would be a good definition for it’s own method call in the datacontext.

  • nikivancic

    While creating the basic solution from scratch (empty asp.net app CC.Web and CC.Model, CC.DataAccess as provided by John Papa, I realized that the HotTowel.Angular.Breeze package is at version 2.3 – indicating perhaps that John has reacted to some of the reports listed below my comment. Trying to install that HotTowel.Angular.Breeze package version 2.3 I got the “NuGet failed to install or uninstall this package in CC.Model and CC.Web projects. The additional explanations are

    CC.Model
    Error: Failed to add reference to System.Net.Http. Please make sure that it is in the Global Assembly Cache

    CC.Web
    Error: Specified condition “$(CleanWPPAllFilesInSinglefolder)” evaluates to “” instead of a boolean.

    This ought to be a bug in HotTowel.Angular.Breeze package version 2.3 – did anyone else see this?

    • nikivancic

      It seems that the above problem is my own “pilot error” – going through the steps of the third module (Angular from scratch with HotTowel) I rushed too far ahead in the step Installing the Client via HotTowel.Angular and installed the HotTowel.Angular.Breeze instead – knowing that it will be needed later. In other words, I carelessly assumed that I can skip the installation of HotTowel.Angular package and go straight to the HotTowel.Angular.Breeze

      Sorry for the confusion

  • Doug Hagan

    Install-Package HotTowel.Angular.Breeze

    I ran into the following issue. I tried a bunch of different versions, cleaning my /packages and the like.

    Install-Package : Updating ‘Microsoft.AspNet.WebApi.Core 5.1.2′ to ‘Microsoft.AspNet.WebApi.Core 5.0.0′ failed. Unable to find a version of ‘Microsoft.AspNet.WebApi.OData’ that is compatible
    with ‘Microsoft.AspNet.WebApi.Core 5.0.0′.
    At line:1 char:16
    + Install-Package <<<< HotTowel.Angular.Breeze
    + CategoryInfo : NotSpecified: (:) [Install-Package], InvalidOperationException
    + FullyQualifiedErrorId : NuGetCmdletUnhandledException,NuGet.PowerShell.Commands.InstallPackageCommand

  • David Barel

    Hello,

    I am taking the course HT-Angular-Breeze on pluralsite. I installed all the packages correctly except for ng-breeze. I get the following error when i am trying to install it:
    /**********************************************/
    Updating ‘Microsoft.AspNet.WebApi.Core 5.2.0′ to ‘Microsoft.AspNet.WebApi.Core 5.0.0′ failed. Unable to find a version of ‘Microsoft.AspNet.WebApi.OData’ that is compatible with ‘Microsoft.AspNet.WebApi.Core 5.0.0′.
    /***********************************************/

    I am using Visual Studio 2013 if it matters.

  • Akill

    I tried to install HotTowel.Angular.Breeze. But I got the following error, which is “Updating ‘Microsoft.AspNet.WebApi.Core 5.1.2′ to ‘Microsoft.AspNet.WebApi.Core 5.0.0′ failed. Unable to find a version of ‘Microsoft.AspNet.WebApi.OData’ that is compatible with ‘Microsoft.AspNet.WebApi.Core 5.0.0′.” Could you help me to resolve this error and continue my first app.

%d bloggers like this: