Breeze Angular Live Tutorial Overview

The Breeze Live Tutorial is a great way to learn basic Breeze interactively. Follow the instructions, type in some code, and see the results immediately. Feel free to deviate from the script and see what happens.

Here's what the tutorial looks like when you're looking at one of the Angular tutorials:

Live Tutorial running

You're looking at an Angular tutorial when the word "Angular" appears in the middle-top button. There are tutorials for other model libraries as well such as Knockout.

What are all these panes?

Each of the four panes has a purpose.

Instructions - The top left pane explains step-by-step what to do.

JavaScript - The top right pane is the JavaScript code for the current step. You'll be editing the code in this pane most of the time.

Html - The lower right pane holds the HTML template - with binding declarations - that display the data.

Output - The lower left pane shows what happens when your JavaScript code meets the HTML after you click the "Run" button.

Tutorial Steps

Each tutorial consists of a series of steps shown in the top left Instructions panel. A tutorial begins with pre-filled JavaScript and HTML panels.

You move between tutorial steps by clicking on the arrow keys at the top of this instructions panel.  We recommend that you try to perform all of the instructions listed in each panel before moving on to the next step. Have fun adding your own variations too. You can't hurt anything. Each time you click a step arrow, the Javascript and Html panes reset to a state consistent with the completion of the previous step.

If you're not sure how to proceed or your code isn't behaving as expected, you can always click the "Help, it didn't work!" button at the top of the page. This replaces the code and the HTML in the JavaScript and HTML panels with the step's ends state ... and runs it for you.

Data binding

This tutorial displays entity data by binding those data to HTML DOM elements with Angular. You can learn about Angular data binding here. If you already know Angular, great! Even if you don't, most of the examples should seem obvious once you grasp the basic data binding concepts:

Where is the data coming from?

This tutorial connects to a Breeze Web API controller ("NorthwindController") running on the live tutorial web site. That controller exposes an entity data model loosely based on Microsoft's Northwind database. The instantiation of the tutorial EntityManager in the JavaScript panel is your clue to these facts:

  var manager = new breeze.EntityManager('api/northwind');

We have nothing more to say about the server because we want to focus on Breeze's client side capabilities.

Return to the Live Tutorial