Do you need a starting point for your Angular Single Page Apps (SPA)? Menus, dashboards, and widgets are important parts of many Angular apps. In this course, we'll build components to easily add these items to any project.
Do you need a starting point for your Angular SPAs? Menus, dashboards, and widgets are important parts of many Angular apps. In this course, we'll build components to easily add these items to any project. We'll build a feature-rich menu system from scratch, then we'll use angular-gridster to create a dashboard and widget system. We'll package these components with Gulp so that they can be used in any Angular application.
Mark started in the developer world over 25 years ago. He began his career with a Bachelor of Science in Computer Science from St. Johns University. After spending 10 years on Wall Street working for Goldman Sachs, Lehman Brothers and other major investment banks, Mark became interested in animation and video game software.
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.