Building a SPA Framework Using AngularJS

By Mark Zamoyta
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.
Course info
Level
Advanced
Updated
Apr 29, 2015
Duration
4h 48m
Table of contents
Introduction
Introduction 6m Prerequisites and Helpful Pluralsight Courses 1m
Creating a SPA Framework Using AngularJS
Introduction 2m Project Setup 2m Our AngularJS Modules 3m Creating AngularJS Modules 3m Building Our Framework 5m Styling the Header 6m Styling Controls 3m Making the Framework Responsive 4m Passing Values to an Isolate Scope 2m Catching Exceptions 1m Summary 1m
Building a Menu Component in AngularJS
Introduction 2m Declaring a Menu 3m Menu Custom Directives 4m A Menu Item Custom Directive 3m Showing the Menu 2m Styling the Menu 4m Specifying Icons 3m Routing 8m Menu Item Selection 3m Making Our Menu Responsive 7m Styling the Responsive Menu 5m Activating the Responsive Menu 5m Summary 1m
Advanced Menu Features
Introduction 2m Grouping Menu Items 2m A Custom Directive for Groups 4m Opening and Closing a Group 5m Multiple Menu Levels 1m Creating a Horizontal Menu 6m Styling the Horizontal Menu 7m Horizontal Menu Cleanup 5m Controlling the Popup Menu 8m Making the Menu Responsive 9m Animating the Menu Using ngAnimate 4m Summary 1m
Building a Dashboard and Widgets
Introduction 2m Routing Options 3m Setting up Routing 3m Routing to Custom Directives 6m Introduction to Gridster and angular-gridster 2m Setting up angular-gridster 1m Dashboard Creation 9m Dashboard Options 6m Widget Headers 4m Dashboard Headers 2m Summary 1m
Widget Content
Introduction 3m Our Widgets 3m A Fake Data Service 3m Creating Widget Custom Directives 7m Compiling Widget Content 6m Loading Widget Data 5m A Button to Add Widgets 5m Adding Widgets to a Dashboard 2m Adding a Widget Menu 2m Closing Widgets 2m Showing a Widget Settings Dialog 9m Updating Widget Settings 3m Mobile Fixes 3m Fixing Background Image Loading 3m Summary 1m
Additional Angular SPA Features
Introduction 2m Responsive Widgets 4m Loading Indicators for Widgets 3m Widget Errors 5m Save and Load Dashboard Layouts 4m A Sign-in Page Using ngSwitch 4m User Profile Components 5m Fixing Widget Size and Menu Bugs 3m Setting up Gulp 4m Using Gulp to Package Components 15m Summary 1m
Description
Course info
Level
Advanced
Updated
Apr 29, 2015
Duration
4h 48m
Description

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.

About the author
Mark Zamoyta
About the author

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.

More from the author
Angular Forms
Beginner
2h 3m
Apr 2, 2019
JavaScript Fundamentals
Intermediate
3h 0m
Jul 26, 2018
JavaScript: Getting Started
Beginner
2h 47m
Jan 19, 2018
More courses by Mark Zamoyta

You're the smartest person in the room

PROVE IT

Your team won't just close the skills gap

THEY'LL HURDLE IT