Todo-Angular Sample

The Todo-Angular sample demonstrates Breeze and AngularJS working together in a single page CRUD (Create/Read/Update/Delete) application.

Check out John Lantz's CodeProject article describing this sample.

The user experience is the same for this and all Todo Sample variations. The source lies within the "Samples" package which you can download here.

Todo-Angular runs in modern browsers such as IE9, IE10, and recent Chrome, Safari, Firefox, and WebKit browsers. Breeze does not support AngularJS apps running in older browsers that lack ECMAScript 5 property getters and setters.

App Architecture

Todo is the simplest full-CRUD app we could think of. The architecture is deliberately primitive and simplistic. There's only one model type (TodoItem) and only one screen. It's all about the mechanics of manipulating data and presenting them for user review and edit.

The entire app is organized in a single .NET web application project that hosts both server-side and client-side components. The three items outlined in red are the client; everything else is server-side.

Server

The server is a simple ASP.NET Web Application. It hosts the client-side assets (HTML, CSS, and JavaScript). It also hosts an ASP.NET Web API service consisting of a single Breeze-styled Web API controller in front of an Entity Framework "Code First" model talking to a SQL Server database.

The server is identical across all Todo sample variations.

Client

There are no client-side .NET dependencies: no ASP.MVC, no Razor, just pure CSS, HTML, and JavaScript.

The Content folder holds CSS files, the Scripts folder holds 3rd party and application JavaScript libraries; the application libraries are within an inner App folder. The index.html file holds all HTML.

We divide the client app into four functional areas:

Angular highlights

We assume you're acquainted with AngularJS and that the markup in index.html and the JavaScript programming model are familiar to you.

View

The Todo app's  "View" is embedded in index.html. You'll recognize the way Angular markup binds buttons to actions, value attributes to data properties, CSS classes to controller properties, and repeats Todo items within a list using an <li> tag template.

The "data-ng-app" attribute references the "TodoMain" module; the "data-ng-controller" attribute references the "TodoCtrl" controller module.

Here's an excerpt showing the TodoItem template within the <li> tag:

<li data-ng-repeat="item in items">
    <!-- readonly view -->
    <div data-ng-show="!(item.isEditing)">
	<input type="checkbox" 
               data-ng-model="item.IsDone" 
               data-ng-class="{done: item.IsDone}" />
	<label data-ng-click="edit(item)" 
               data-ng-class="{done: item.IsDone, archived: item.IsArchived}" >
           {{item.Description}}
        </label>
	<a href="#" data-ng-click="removeItem(item)">X</a>
    </div>
    <!-- edit view -->
    <div data-ng-show="item.isEditing">
	<form data-ng-submit="completeEdit(item)">
	    <input type="text" 
                   data-ng-model="item.Description" 
                   data-on-blur="completeEdit(item)" 
                   data-focus-when="item.isEditing" />
	</form>
    </div>
</li>

We're using the HTML "data-" prefix for attributes that Angular recognizes as its "directives".

Main Module

Every Angular app needs a main module. Scripts/app/main.js defines that module, "todoMain", as well as the app's global namespace, "app".

We add to this TodoMain module several custom application "directives" that bind controller actions to state changes of an HTML tag.

For example, the "onBlur" directive binds the TodoItem Description's textbox to the completeEdit controller method; the completeEdit method is called when the textbox loses focus. The "focusWhen" directive watches the bound item's isEditing property; when it becomes true, the directive sets the focus on the TodoItem Description's textbox (after a brief delay to let the browser DOM settle down).

The "onFocus" directive complements the "onBlur" directive; although it isn't used, it's there for completeness.While creating the module we also add custom directives to it.

Controller

The Scripts/app/controller.js file defines the Angular controller that is responsible for the presentation of Todo items to the user in the "Todo" view.

At runtime the controller definition function receives an Angular-supplied $scope object. This function adds properties and methods to $scope and Angular then binds them to the view within index.html.

We're also injecting the Angular $timeout service and plugging it into the dataservice (see next).

This controller is written in the style of a "ViewModel" per the MVVM pattern. The controller has no references to view elements. Its properties and methods are virtually identical to the "viewmodel" implementations of the Knockout Todo samples. The Todo ViewModel Sample Design topic provides all essential details of this controller's implementation.

Dataservice

The dataservice.js file handles the creation of new Todo objects and all interactions with the server. It's written in Breeze and almost all Breeze-related code is in this dataservice. See the "Todo Sample Dataservice" page for details.

The only critical difference ... is a single line of Breeze configuration near the top of the file

breeze.config.initializeAdapterInstance("modelLibrary", "backingStore", true);

It tells Breeze which library to use when it creates or materializes JavaScript "model" objects. For an Angular application you use the native Breeze model library called "backingStore".

Logger

The logger.js file is an abstraction for logging messages and displaying them to the user. Internally it uses the open source toastr library to display messages as "toasts" that float up from the bottom right of the screen.

This file is identical across all Todo sample variations.

Back to the main Todo Sample page

Bonuse: live code

You can explore Breeze + Angular binding with this Todos Plunker.

This only works with modern browsers (IE10+, FF, Chrome).