Building a SPA Framework Using AngularJS

Creating a SPA Framework Using AngularJS
Hello. My name is Mark Zamoyta, and welcome to this module titled Creating a SPA Framework. If you watched this course's introduction video, then you know the end product we're building throughout this course. Here's a sample image of the SPA we'll be building with the title bar, the menu for navigation, and a dashboard for moveable and resizable widgets. This module will focus on the title bar and the SPA's backdrop. What you see here is a custom directive named psFramework. One of our goals is to make this directive reusable and customizable. We want any developer to be able to simply add this framework to a JavaScript project. Here's the HTML markup used to create this framework. You can see that the application title, subtitle, and icon are all passed into the directive through attributes. We'll also allow the developer, or designer, to style this component by giving psFramework its own CSS file. Another aspect of this custom directive is that we want to allow user interface controls to exist within the right side of the title bar. You can see three buttons here, however, later in this course we'll modify this to include controls for a signed in user, search controls or any other controls that the application might need. One important aspect of this framework is that it needs to be responsive. We need it to run on large desktops, small smartphones, and everything in between. Here we can see how psFramework will look on various device sizes. Now let's set up our environment and build psFramework.

Building a Dashboard and Widgets
Hi. This is Mark Zamoyta, and this module is titled Building a Dashboard and Widgets. So far in this course we've built a feature-rich menu. However, it hasn't had any interesting views to show. We'll begin to fix that in this module by building out our psDashboard component. We'll start off by reviewing the various routing options our components will need to work with. We'll get our sample app, Whitewater Adventures, to route to various pages based upon menu item selections. Next we'll take a look at gridster. If you haven't worked with gridster yet, you're in for a treat. It makes building impressive dashboards and widgets very easy. Here you can see a sample page of widgets from the gridster site. Widgets are resizable and movable. In order to get gridster working with AngularJS, there's a GitHub project called angular-gridster. We'll integrate this into our psDashboard component and take full advantage of it. Here you can see a few widgets up and running in our Whitewater Adventures dashboard. We'll be adding headers to our widgets, and then we'll be adding a header to our dashboard so that we can show a title, breadcrumbs, and other controls related to the dashboard. By the end of this module, our psDashboard component will be all ready to go. Widget functionality will be working. However, as you can see by the white rectangles, there's no widget content yet. We'll be adding the widget content in the next module of this course. So for now, let's start building our psDashboard component and put our framework in place for widgetized dashboards.

Additional Angular SPA Features
Hi. I'm Mark Zamoyta. This module is titled Additional Angular SPA Features. We'll be covering a wide range of items, which will be useful in our SPA framework. First off we'll be looking at our SPA framework and sample application running on smaller devices. There are a few issues which you'll need to be aware of to make sure responsive behavior works well. Next we'll create a loading indicator for widgets. Here you can see a spinning refresh icon, which displays while widget data is waiting to be retrieved from a data service. We'll also handle errors in our widgets and show a message along with a refresh button when needed. We don't want our users recreating their dashboards every time they start their app, so we'll see how we can save off the dashboard state. We'll save the dashboard to local storage using an Angular service, then load it again when needed. We'll see how to integrate a simple sign in form to our page and we'll show user profile information in two places, above our vertical menu and also in the top right corner of our application. We won't be building an authorization system, but we'll put the user interface pieces in place for this. While reviewing our framework and sample application, a few bugs creeped in, and we'll be fixing those up. We'll get our menu and widget functionality working great together. Finally we'll take a look at Gulp for building distributable files. Our framework users would like to have a single JavaScript file, along with a single CSS file to include in their projects. We'll build this with Gulp. By the end of this module our framework will be in great shape, and we'll be able to let other developers use it to create Angular SPAs.