Building Data Centric Apps with Angular and BreezeJS

This course will teach you how to build data-centric apps with Angular, and leveraging the Breeze client and server libraries to handle all your data management within the app.
Course info
Rating
(15)
Level
Intermediate
Updated
Jun 20, 2017
Duration
4h 32m
Table of contents
Course Overview
Understanding How Angular and Breeze Fit Together
Building a Breeze Services Back End
Generating Your Client-side Model
Making Rich Client-side Queries
Working with Entities on the Client
Validating Model Data
Description
Course info
Rating
(15)
Level
Intermediate
Updated
Jun 20, 2017
Duration
4h 32m
Description

When you need to build an app with Angular that will involve a lot of data presentation and data entry, there are many individual features of Angular you'll need to understand. In this course, Building Data Centric Apps with Angular and BreezeJS, you'll learn how to best leverage the features of Angular, and supplement them with the capabilities of the Breeze client and server libraries. First, you'll discover how to use many Angular features for implementing data presentation and input. Next, you'll explore how to use Breeze for getting data to the client side, working with it there, and persisting changes back to the server. Finally, you'll learn how to integrate Angular and Breeze to build out your data-centric functionality quickly and cleanly, with much less code than if you were to just use Angular on its own. By the end of this course, you'll learn how to make your life a lot easier building out your data centric use cases.

About the author
About the author

Brian Noyes is CTO and Architect at Solliance, an expert technology solutions development company. Brian is a Microsoft Regional Director and MVP, and specializes in rich client technologies including XAML and HTML 5, as well as building the services that back them with WCF and ASP.NET Web API.

More from the author
WPF Productivity Playbook
Intermediate
2h 57m
22 Aug 2016
Aurelia Fundamentals
Intermediate
8h 38m
4 May 2016
More courses by Brian Noyes
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi, this is Brian Noyes, and welcome to my course, Building Data Centric Apps with Angular and Breeze. I'm a software architect who focuses a lot on rich client technologies and the services that back them. In this course, I'll show you how you can get the most out of the Angular platform for your data centric apps by combining it with the power of a great library called BreezeJS. In this course, you'll see how to combine Angular and Breeze to build out the use cases of your app that query and retrieve data, work with it on the client side, and then send changes or new data back to the back end for persistence and execution of server business logic. In this course, you'll learn how to integrate Breeze into your Angular application and how to leverage Breeze for your interactive data presentation and input use cases. You'll see how to execute rich queries from the client side to filter, page, and sort your data before it gets returned to the client. You'll also see how to work with that data on the client side and get modifications to the data sent to the back end. I'll show you how you can use Breeze on the server side to quickly create the data services that the Breeze client talks to, and I'll show how to use the Breeze validation system for input scenarios to create a great user experience while ensuring only correct data gets into your system. I'm confident that once you see how seamlessly Angular and Breeze fit together and how Breeze can make your life a lot easier building out your data centric use cases, you'll want to use Breeze in most of your Angular applications from now on. So let's get started showing you how to do that.

Building a Breeze Services Back End
Hi, this is Brian Noyes. In this module, I'll cover how to create a back-end web API to support your BreezeJS client app. BreezeJS is capable of integrating with several different kinds of data centric back-end APIs, and I'll discuss what those options are and why you might choose one over the other. Then I'll get into details on using the most productive option, which is to use the Breeze Server libraries, which are built on top of ASP. NET Web API and Entity Framework. First up, I'm going to focus on the wire level and make sure you understand what kinds of API calls the BreezeJS client makes when you execute queries through it or ask it to save changed entities on the client side. Then I'll talk about the server technology options you have for setting up a back end that the Breeze client is capable of talking to for querying and persistence of your client application data. Next, I'll get into details on implementing the query and persistence web APIs you need using the Breeze Server libraries. And I'll finish off by showing that when using the Breeze Server components, you don't have to write any explicit query logic, but you can get your own business logic into the call chains easily for querying and saving changes.

Generating Your Client-side Model
Hi, this is Brian Noyes. Before we dive into the rich query capabilities of Breeze, in this module we're going to quickly look at how we get our client-side model definitions in place. First, we're going to look at how we can generate our TypeScript entities using some code-generation tools, and then we'll quickly see how we can get Breeze to return instances of those model entities from its queries.

Making Rich Client-side Queries
Hi. This is Brian Noyes. In this module, we're going to dive into fully leveraging the query capabilities of the Breeze Client. First up, we're going to talk about what those query capabilities are that Breeze provides. Then we'll talk a little bit about what the Breeze query architecture is: how your calls break out into individual steps that result in returning data to you. After that, we're going to dive into demo mode. And we're going to start walking through adding some functionality to the application that we've been using starting first by improving the presentation of customer information that we already have in there. And we'll do that by improving the list of customers. And we'll add a page to be able to get to the details for a customer and edit those details. Next, we'll look into filtering data: being able to send instructions to the server-side to return only certain entities based on your own filter criteria. After that, we'll sort our data, meaning we'll send instructions to the server-side to order the data before returning it to the client. Next we'll look at paging the data, only bringing back batches of entities to avoid returning a large list of entities all at one time. Next, we'll look at the expand and select queries. Expand lets you get related entities, for an entity type you're querying on, and select lets you specify which properties you care about so that not all property values for a given entity are returned from the server-side. And then we'll wrap this up by looking at a few assorted operators that let you work directly against the Breeze cache. So let's dive right in.

Validating Model Data
Hi. This is Brian Noyes. In this final module, I'm going to show you how to leverage the validation system in Breeze JS and integrate it with Angular forms for user input scenarios. While Angular has some built-in functionality for validation, Breeze makes it so your validation is more cleanly integrated with your front and back-end data pipeline. I think you will see that along with all the query, tracking, and persistence capabilities I've shown with Breeze already, this validation functionality rounds out how Breeze can make your data app development a lot easier. First up, I'll talk about validation in general and how it fits into your Angular application architecture. Next, I'll cover how validation fits with template-driven forms in Angular, and I'll demonstrate how the template-driven capabilities manifest themselves using just Angular. Then we'll get into the Breeze validation capabilities and I'll describe what's available high level, and then we'll dive into a series of demos showing how to use them. In those demos, I'll show you how to use automatic type validation on your model object properties and how to manually invoke validation rules when your data is changing. I'll show simple ways to present validation errors to the user at a field and form level. And next I'll show you how to encapsulate the coding pattern for a single input field into a custom component to avoid a lot of code redundancy in your markup. Next you'll see how to wire up some of the built-in validation rules on the client that Breeze provides, as well as how to define your own custom client-side validation rules and plug them into your entity model. Finally, I'll finish up by showing you how to implement server-side validation rules that will automatically populate the validation errors on the client-side when the call returns for a consistent user experience. So let's dive right in.