Building Apps with AngularJS and Breeze - Part 1

Getting Started with Single Page Apps
In this course, we're going to be building apps with Angular and Breeze, but to kick things off, let's ask ourselves some questions so we can help ourselves get started. One of the first questions you always should ask is what features do you need in the application, what is your user story, and what do you need to accomplish. And of course we need to know what exactly is a SPA so we can know what the capabilities are of what we need to build. And finally, what can we build, what are some examples of things that a SPA can do? So let's start there with what can we build? And here's an application you're probably very familiar with called Gmail. Google created this and it's effectively a SPA because now we can have multiple aspects loaded all up inside the browser so there's not a lot of round tripping for the user. What does this mean? It makes a nice user experience as you're going through your mail so you don't have to continually reload the page to get to the different messages. And most of the functionality that a user needs for an inbox or email is built right in and loaded the first time inside the browser. Gmail is an information and data-intensive type of SPA that gives a lot of information back to the user so they can process it, and allows both reading and updating of the data. But what if you need something a little more highly interactive and maybe more unique. Well if you go to trask-industries. com right here, you can actually check out another SPA that was built with Angular. And this SPA here allows you to interact with different pages and the menus on the left, and it just looks nontraditional. But if you're taking this course, you're probably thinking, well I work a lot with data, so I've got a lot of data to show and I've got a workflow with menus and screens, you might be wanting to build something a little bit more like this. Well the good news is in this course we're going to build exactly that kind of application. So now that we know what kind of apps we can build, let's go take a look at what a SPA offers.

Angular From Scratch with HotTowel
Authors call it writer's block, but developers have a similar case. Sometimes we stare at a blank screen or canvass inside of our tools and it's really hard to get started. So how do we solve that? Well one thing I like to do when building applications with Angular is to get a kick start using some really cool resources. So in this module, let's take a walk together and build an application from scratch, and by the end of this module you'll have everything you need for a solid structure to keep moving with your Angular project.

Creating Vertical Slice Through Your App
After you get your application started, your next step is to say, how do I add my first view and get some data to show on the screen? In this section, we're going to take a look at how we can do that so we can expand upon what we did in the last module and then build our own custom views on top of it. So in addition to having the Dashboard and the Admin, we're going to put a Sessions view on here so we can get a list of sessions out of our database when we're back in and show it on the screen. And ultimately there's really two features you want. We want to have navigation so we can get to that view, and then show it on the screen, and we also of course want to get real data, so we want to go back to the back-end and pull it back up to the client. Of course we want to use good practices along the way, and by the end of this module, we'll have built up the views together using those good practices, and taking advantage of a lot of the Angular and some of the Breeze features so we can get our data to the client. We may even add a couple extra features in just for kicks.

Object Graphs, Extending Models, and Custom Directives
Creating a view and navigating to it and getting the data to the client is quite an achievement, but there's a lot more to do to really flush out the views. So as we go down our journey of rounding out that vertical slice through the application, we want to fill in a lot of the fields for the Sessions view. Currently we don't have the pictures or the times, or even the rooms or the full names or the tags or the tracks, all that's related data that comes with an object graph for the sessions. So in this module, we're going to go get that data and figure out how we can pull it all together and cache it using Breeze. So the goals for the vertical slice were to make sure we could add that view and show it and get to it and get the data, but that real key is doing it right, that last square. And to make sure we can do it right, we're going to have to round out the last pieces of this vertical slice to get that related data that we just mentioned. And to do that, we're going to prime the application with that data. So we're going to get the data up front that we need to share across multiple screens, and that's going to include any data that's really kind of the 80% scenario, meaning it's data that's used in a lot of places and it's really pretty static, things like rooms and tracks and timeslots, those don't change much in the app, so we're going to get those up front. And once we get that information about the speaker, we want to make sure we can show that image. Now there's some logic in there to make sure, well do we have an image or don't we have an image, and then what do we show and where's that path? We don't want to put that kind of presentation logic inside of our views and controllers, so we're going to wrap that up and encapsulate it in a directive. And in real world applications, a lot of times the data that we get from the back-end isn't exactly what we need on the client. So we often have to extend that model on the client. And we'll show several examples of where we need to extend the client in this application. By the end of this module, you'll have built up the entire sessions view and left it in a great state so we can scale and build even further.

Sharing Local and Remote Data Across Views
As developers, we solve real world business problems, we don't just build for the fun of it. Well okay, sometimes we do, but in real world, we have issues like not just having one screen that has to get data, but we have to build apps with a lot of screens, and when we do that, more real world problems kind of creep in. So in this module, we're going to see what happens as we start scaling our application out to multiple views and we'll see how easy it is using the Angular structure to build those views, but then also some problems that can arise if we don't face how to deal with the data that needs to be shared across those different views. For example, once we go get speaker information, we want to share that information on multiple screens. How do we do that? Well there's actually some really great ways to do that. So by the end of this module, we're going to see if we can scale our app out horizontally to multiple views and take advantage of the structure we've already built, and build in some rich data features so we can share that data and know if we need to cache it locally or go get it remotely, and these are all practical and important issues that we need to solve for business applications.

Route Resolvers
Moving from view to view is one of the most important parts of a SPA presentation framework, and that process as we know is called routing. Our apps just come to rely on routing, we just expect them to work, but it's important to know what those basic routing needs are. Of course we'd like to start with, we need to move from point A to point B. If somebody wants to go to a specific view or page, we want to make sure we can navigate there, but routing also has events that we need to be notified about, when the routing was successfully changed or when it's about to start or when there's an error. And sometimes we like to take action before a route actually happens, and there's several cases for this, one of which is maybe we need to go prime the data to make sure that we get the data before we get to a specific view. And then sometimes we also want to cancel those routes. In this module we'll take a look at how we can use the combination of events and route resolvers to make sure we handle all of our routing needs, because routing safely is really important to the application. Not only do we need to make sure we have a route setup to go to the right views and invoke the right controllers, we need to make sure that we can inject the right events and make sure we get the data to the right pages on time as well. So in this module, we'll learn how to use these features in routing to really create a robust application.

Filtering
Users have high expectations to make sure that they can filter and customize and sort and do paging on their data the way they want to. With Angular, you get a lot of filtering features right out of the box, and if you want to get something a little more powerful and robust, you can even customize it. So in this module, we're going to show you how you can filter your data using some simple techniques, and we're going to build in some custom filtering, which will take advantage of performance using things like throttling.

Paging, UI-Bootstrap, and Expanding the Data Service with Queries
As your application grows, the need for the data really grows with it, and in some cases it can present problems. For example, what do you do when you've got hundreds or thousands of rows of data and you need to present that to the user in an effective way? In this module, we'll take a look at a couple ways we can do that by using paging and filtering in concert with things like UI Bootstrap, which is a great module and plugin that you can use to combine Bootstrap's features with Angular through directives. And since we'll be getting data using paging, we're going to take advantage of the features that Breeze exposes to us so we can combine Angular with Breeze to create some really effective queries. And by the end of this module, you'll have learned some effective ways that you can handle your growing data needs.

Building a Dashboard
Throughout this course, we've been building different pieces of the application that solve different business problems, but sometimes we need some kind of a view that gives us several answers in one place. And for this, a dashboard is a great solution. A dashboard gives us a view of several different pieces of information all in one place so we can make decisions quickly. And users love dashboards because they can aggregate the data, they can make it easy on themselves, they can see all that data very quickly, and a dashboard is usually the first thing they see when they open the application, and this really helps them make decisions fast. So in this module, we'll combine a lot of what we've learned so far using local and remote queries and predicates with Breeze, Angular controllers and factories, and more to create a dashboard landing page for the application, and we'll do it in a way that's very conscious of responsive design because we do want our application to work on multiple form factors. So by the end of the module, we'll have built a dashboard that gives us a quick glimpse into several aspects of the CodeCamper application.

Animations with Angular and CSS
Subtle animations can truly enhance the user experience in an app. This module is going to demonstrate how you can apply animations to the app we've built using Angular and CSS. We'll focus on different aspects that you can animate, including the directives ng-repeat and ng-view, and several others. And we'll take a look at the animations that are already in the application and see how they're working, as well as adjusting a few of those to see the effect. And by the end of this module, you'll have a good understanding of how to apply effective animations to your application.

Where Are We and a Look Ahead at What's Next
You've built a solid foundation for your SPA application, but now it's time to look ahead at what's coming in Part 2 of this course. We're going to continue exploring the features of Angular, Breeze, and JavaScript to really unleash the power of what we can do in a SPA. We'll build on the existing application and add in a Work in Progress feature so users can start to make changes in the application and then save off those changes and come back to them later. We'll even alert the users of how much is in progress at any time on the dashboard. And the Work in Progress will show them what they're actually modifying and when it was modified, and a little bit of information about that data, and of course a way to cancel it. You'll be creating the screens to allow you to edit and add information such as Sessions, and we'll establish data validation so we can track things like required fields, missing data, string lengths, and even just regular expression patterns. We'll toss in a couple other features such as change detection and local storage so we can tombstone our information and bring it back into the app. So together, we'll refactor the application to add all these features and more, and all this is coming soon to Part 2 of Building Apps in Angular and Breeze, right here on Pluralsight.