Build Apps with Angular and Breeze | John Papa

John Papa

Evangelist on the loose

Build Apps with Angular and Breeze


angular-iconYou know how sometimes we start coding a simple app and you start sprinkling a few cool tiny features and suddenly you realize your app has blossomed into something special? Well, that’s how I feel about the app you will build in my latest course-series (yes, “series” is no typo) for Pluralsight titled “Building Apps with Angular and Breeze“. I started out thinking I’d just help folks get up to speed on building simple Angular apps, but the app started to speak to me. It wanted to do more and when doing more the app needed some structure. Pretty soon patterns emerged as the story evolved.

So let’s talk about a cool Angular app, kick-starter NuGet packages, HotTowel, Breeze, and a new series of courses!

Experiencing the Story

Something I feel very strongly about was showing HOW the app evolved. It would be much easier for me to just show the app in its completed state and walk through the code. It would be a disservice though as you’d miss out on all of the decision points where I decided to refactor working code, why I refactored it, and what options I weighed, and how to refactor it. As we all know, that’s real world development. Of course, this meant the course took me much longer to complete than if I just walked through it (which is a fine teaching tool, but just not the one i wanted to choose here). The net result is what I believe is a valuable experience where you get to join me for a story of how to build a web app with Angular, Breeze, and JavaScript patterns.

I would be remiss if I did not call out Ward Bell (Breeze.js master) who once again has provided a ton of input on this course and the app. In fact, several Breeze features came out of this course (ex: a validation directive). Thanks Ward for both your technical input and being a tremendous friend!

The Story Continues

The added benefit of this is that I was able to craft a follow-up story quickly to this first course. The story will continue very soon in another course (Part 2 if you will in this course-series) where I expand on some more advanced topics including how to manage your app once you have a significant amount of real-world data interaction, saving and rehydrating from local storage, powerful data validation, and some surprises with some wicked cool ways to handle saving. :) The course is targeted to be out by Dec 31. And who knows … perhaps if these are received well, i’ll keep going :)

10-26-2013 6-49-25 PM

What’s Covered?

So what’s in this course? Well, the description in a nutshell is that you will build a Single Page Application (SPA) from scratch using JavaScript, Angular, and Breeze. You will learn how to combine the Angular presentation framework, rich data features of Breeze, and raw features of JavaScript, CSS, and HTML5 to create robust modern web applications. There is a live demo so you can see what you are building, some starter code, step by step instructions, and some new NuGet packages to get you started (more on those later in this article).

The chapters/modules are below. I truly hope you enjoy this course as much as I enjoyed producing it!

  • Building an App with Angular, Breeze and JavaScript Patterns
  • Getting Started with Single Page Apps
  • Angular from Scratch with HotTowel
  • Creating Vertical Slice Through Your App
  • Object Graphs, Extending Models, and Custom Directives
  • Sharing Local and Remote Data Across Views
  • Route Resolvers
  • Filtering
  • Paging, UI-Bootstrap, and Expanding the Data Service with Queries
  • Building a Dashboard
  • Animations with Angular and CSS
  • Where Are We and a Look Ahead at What’s Next

HotTowel Angular on NuGet

Sometimes you just want a kick-start … or if you are like me, a kick in the pants to get your project off the “blank canvas”. if that’s you, then HotTowel.Angular is perfect for you. It uses some styling, some popular libraries, and of course Angular to get you off to a nice starting point. When its time to pull in Breeze, just ad in HotTowel.Angular.Breeze.

Install-Package HotTowel.Angular -pre
Install-Package HotTowel.Angular.Breeze -pre

Notice that these are both pre-releases. That’s because they depend on the package AngularJs.Core which is a package that uses the pre-release of Angular 1.2.0 RC3 (currently the latest). Once Angular goes live (which i hear is very soon) these packages will all no longer need the -pre option.

What’s AngularJs.Core? This package makes it easy to grab just the core module for Angular. Angular 1.2.x begins a new era with Angular where each module is broken out into its own files. This means you don’t need to load code you are not using. but it also means you don;t have to pull down a bunch of files into your project that you won;t be using either. So the AngularJS.Core package pulls just the core module. There are also a series of other packages for the Angular modules that I created and maintain with Scott Allen and Jeremy Likness. You can find all of these packages on NuGet or in this article here.

  • Tim Falkins

    I saw your tweet and thought you were going to say “you know how sometimes we start coding a simple app and it morphs into this unwieldy animal that stays in production for 10 years?” Looking forward to watching the course.

  • Sampath Lokuge

    It’s really great news.But I have one general question about SPA.That is,Is SPA suitable only for the Dashboard kind of applications ? Or Can we use SPA for any size of Enterprise level application development (say for ERP solution)?

  • johnpapa7

    Hi folks! Thanks for watching my course! Some of you have let me know that there are some issues with the newest WebApi NuGet packages. Once these are resolved (coordinating with Microsoft and Breeze folks) I will let you all know. In the meantime, here is the workaround which is quite simple:

    For now, the easiest thing to do is install the nuget packages in this order. I am working with the Breeze team and the ASP.NET team to make this easier soon :)

    Install-Package Microsoft.AspNet.WebApi -version 4.0.30506.0

    Install-Package Microsoft.AspNet.WebApi.Odata -version 4.0.30506.0

    Install-Package EntityFramework.SqlServerCompact -version 4.3.6

    install-Package HotTowel.angular -pre

    Install-Package HotTowel.angular.breeze -pre

    The first 3 ask it to use the WebApi 4.0.30506 … which makes it all work. Once I get confirmation from the Breeze team on some changes and check them with the Web Api team, I will update this and let everyone know how to make it work with Web API v2.

    Thanks again for your support!

  • Rodi de Boer

    Hi and thanks for another course.
    Is this the course we’ve been waiting for that was supposed to be a similar course as the knockout one, but with Angular? And it just has gotten bigger and better? Or is it really something different?
    Is there still some ASP.Net Web API in there? Or is it a pure client side course?

  • Pingback: Build Apps with Angular and Breeze | Nova Tech ...()

  • Luciano Correia

    Very good John,

    The responsive design is very good.

    But i think its not a good idea to load all the javascript at the start, especially if you load the app in a mobile device. Can you cover a better solution for that in the part 2?

    VERY GOOD layout ^^

    • Luciano Correia

      I got some erros in the VS 2013, i think there is some incompatibility with EntityFramework 6.0 and breeze.

      • John

        Luciano – Check the comment I made in this post for the fix.

      • Chris Hoffman

        I am also getting error with vs 2013 and EF 6.

  • Rusty

    Breeze just released new nuget package that supports entity framework 6. John, can you update your template and project to support entity framework 6?

    • johnpapa7

      Rusty – I’m travelling this week and will look at it when I get back. Once I can test it, I’ll update it. Should be a few days.

  • Rick Hubka

    Why Lord? Why do 95% of all tutorials I try not work? Sorry John. It’s not your fault. Everything in I.T changes daily or sooner. I learned Fortran, dBase 3/4, C++, PowerBuilder, Flash, VB, C#, ASP.NET, etc… Then Microsoft said “Use the force Luke, learn SilverLight”. ARGggg. Idoits!!! Last year I found Bootstrap and really love it. Now I am learning MVC 4/5. MMMmmm… Next I need a framework for productivity, Angular “Really” looks good. Wish me luck folks cause I don’t have many years left.

    What was the best development tool set I ever used for it’s time? Sybase PowerBuilder. Sadly Sybase has zero marketing skills and vision, so PowerBuilder has all but disappeared into obscurity. Yes, Sybase was way ahead of their time once. Did you know that SQL Server database was not invented at Microsoft. Microsoft bought the source code for the Sybase database and forked it to the name SQL Server and now Sybase’s database product is almost dead.

    As developers, we may hate marketers but they make or break a company.

    Sorry I do believe I’m rambling on here… :)

    • Trevor de Koekkoek

      Powerbuilder was ok, but not ahead of it’s time. Now Delphi on the other hand blew everything out of the water and still to this day there is nothing that matched the productivity we had back in 1996.

  • Drew Hawken

    Thanks for another great course John!

    I just finished this one on the weekend and have taken your other courses.

    I find your structure, pacing and attention detail quite excellent and when I completed the course I felt I firm enough grounding to begin my Angular learning in a well structured way.

    I really like the code organization and conventions you used throughout it helps a tonne!

    My only gripe is I have to wait until December for part 2. 😀

    I have been using the metronic theme for the application my company is building and we were deciding what SPA framework to go with after going down the jquery / DOM manipulation route for a while. (ugly ugly code). This really helped to bootstrap (overloaded term in this context) our project down the more sane Angular route.


    • johnpapa7

      Drew – Thanks for the feedback. I’m really happy you enjoy the course. I can;t wait for part 2 to be released too. It’s got some AWESOME features in it.

  • Greg Reese


    Thanks for the great tutorial! You make having a Pluralsight subscription worth it 10 fold!

    Anyways, I was just curious, how do you get all the great intellisense for your applications? Mine never work :(

    • johnpapa7

      Greg – Thanks! Its great when I hear that people like the material.

      The intellisense is from Resharper.

  • Andrew

    Another incredibly useful “evolutionary” SPA course. Please introduce role based and angular based security? (simple membership back end?) into the mix so it becomes even more useful and practical. Where is the security angle (excuse the pun) in all your great stuff! cheers.

  • Duncan Faulkner

    hi any update on when this will be using bootstrap 3.0?

  • Joe Suchy

    John – as others have said, great course! We are working on a production application that will go live in January, a smaller site with less than 50 users. Where would you suggest adding security/login capabilities? Security is still important so people can see their slice of the data. I would really appreciate any suggestions and would rather work through your elegant solution and direction instead of adding a crappy bolt on to what you have presented! :-)

    Thanks in advance and keep up the great work. Can’t wait for the next part in the series!

  • Paul

    Hi John, just finished watching your new course over the weekend, I’m a massive fan of the Durandal course too, your spa courses keep getting better and better, and it keeps my pluralsight subscription going…. hope they look after you 😉

    I’ve built a few LOB apps using durandal and have enjoyed the experience so far, and Angular looks very exciting. Playing around with Angular it doesn’t seem to support child routes like durandal which is a great feature, do you have any suggestions as to how to implement child routes in Angular?

    I agree with other comments here in regards to loading up all the controllers and services at once in index.html, in large LOB apps that also work on mobile devices,this would be a major concern I would think, I prefer the way require.js is used in durandal to load view-models and services only when required. I wonder if you have any thoughts/experience in regards to this and if there is an Angular way of achieving the same?

    I too would like to see some basic Authentication with a sprinkle of role based security as part of your spa courses.

    thank you so much for all your efforts

    Cheers Paul.

    • johnpapa7

      Paul – Thanks for the great feedback and for watching the courses. Pluralsight is good peoples :)

      I think you mean multiple composition points, right? Angular routing OOB does not handle this today. There are other efforts like UI-Route that go further. I hope Angular will enhance the routing story in the near future.

      I’ll do some security with SPA in the future. It’s on my list, but its a big list. So no promises on when … sorry

  • Max

    I am midway through the course. Really thoughtful and well put. Just wanted to know the plugin you are using for getting the Awesome Java Script support in Visual Studio.

    • johnpapa7

      Max – Thanks. It is Resharper.

  • Yair Loeza

    Hi John, I just finished your latest SPA course. I can tell you that I’m big fan or your work, I’ve been following your series of SPA courses and I really enjoyed this one. You make me look into Angular even when I was skeptical of it’s capabilities. Now I feel that need to learn more and more about Angular, and let Knockout a little bit. For sure I can wait for the release of the part 2 of this course. One more reason go get touched by JS as a language.
    Thanks for taking all this time to create all this courses. You are making a better world by making us better developers.

  • Rayk

    So nothing on adding security to this, in over a year?

%d bloggers like this: