Building a Responsive SPA Framework with Angular

Build a better starting point for your Angular SPAs! In this course, you'll learn to build a reusable framework with many valuable features, including a responsive user interface, menu system with nested popup menus, user controls, and more.
Course info
Rating
(156)
Level
Intermediate
Updated
Mar 16, 2017
Duration
5h 10m
Table of contents
Course Overview
Introduction
User Interface Layout
Configuration, Styling, and Responsiveness
Menus and Navigation
Advanced Menu Features
User Controls
Forms and CRUD Operations
Building Responsive Content Panels and a Dashboard
Description
Course info
Rating
(156)
Level
Intermediate
Updated
Mar 16, 2017
Duration
5h 10m
Description

Angular is a great framework, but it doesn't offer a great starting point for us to develop modern SPAs. In this course, Building a Responsive SPA Framework with Angular, you'll build a much better starting point for your Angular SPAs! You'll build a reusable framework with many valuable features, including a responsive user interface and a menu system with nested popup menus. Next you'll explore building user controls and dynamically generated forms for CRUD operations. Finally, you'll learn about a panel system for application layout and styling. By the end of this course, you'll have a modern framework as a great starting point for Angular applications. You'll be able to configure it and update it for your own needs. Most importantly, you'll be able to focus on building your applications by leveraging the many features of this framework.

About the author
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 46m
Jan 19, 2018
More courses by Mark Zamoyta
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hello everyone. My name is Mark Zamoyta and welcome to my course Building a Responsive SPA Framework with Angular. I am a software consultant and developer in the Portland, Oregon area. Angular is a great framework, but it doesn't really give you a great starting point to create a SPA or Single Page Application. In this course we'll build a much better starting point for you SPAs. I'll walk you step by step in building a framework that any SPA will need. Some of the major features of this framework include building a user interface with a title bar and status bar, adding an advanced menu system including nested popup menus, adding user components for user sign-in, registration, and SPA controls, building a dynamic form system which will let Angular build our forms for us, and creating a panel system to organize our application content and create a dashboard. By the end of this course you'll have a valuable SPA framework which is fully responsive. Your applications will run fine and look great on desktop, tablet, and smartphone devices. You'll be able to customize this framework and use it for many of your Angular projects. Before beginning this course you should be familiar with the fundamentals of Angular 2. Two great Pluralsight courses for this are Angular 2: Getting Started and Angular 2: First Look. I hope you'll join me on this journey in building a great framework with my Pluralsight course, Building a Responsive SPA Framework with Angular.

User Interface Layout
Hi, my name is Mark Zamoyta and welcome to this module titled User Interface Layout. In this module we'll get things started by building the base of our framework. This foundation is important because just about everything we do in this course will be built on top of it. As we build our SPA framework we'll also need to build an application which uses the framework. I'll call this sample application Green Nations, a SPA which lets users view and edit environmental performance index values for countries. Those are also known as EPI numbers. We'll start off by using the Angular CLI to easily create a new Angular project. Then we'll build an Angular module to hold our SPA framework. This module will be heavily utilized in this course. Flex boxes are currently spiking in popularity and we'll be making use of them in our framework. If you're not familiar with flex boxes, they're a modern way of laying out web pages or single page applications. They were designed to solve many of the problems in older HTML and CSS layouts, and major projects, such as bootstrap 4 and Angular material, are built on flex boxes. There are only a few CSS properties we'll need to understand in order to use them, and I'll cover them in this module. Next we'll create a few body class upon which our entire SPA and framework will live. To wrap up this module we'll create a title bar component. For now the title bar will only hold a logo, but we'll be expanding upon this later in the course. By the end of this module we'll have laid the foundation for our user interface, so let's get started and use the Angular CLI to create our project.

Configuration, Styling, and Responsiveness
Welcome to this module titled Configuration, Styling, and Responsiveness. My name is Mark Zamoyta. In this module we'll look into passing configuration information to our SPA framework. Configuring our framework is important because it will allow each application using the framework to have its own design and styling. We'll create an Angular service to deal with this. We'll create a small menu area at the top of the application, I'll call this the top bar component. And we'll create a status bar area fixed to the bottom of the screen. Next we'll look at various ways of styling our application by using CSS. We'll need to be able to style elements of our framework from our application code, and there are a few different ways to do this. Up to this point we'll have the foundation of our SPA framework, however it won't be responsive yet. We want to make sure our framework works on any size screen, so it can be a solution for smartphones, tablets, web or desktop applications. We'll create a screen service to monitor the screen size, then we'll use this screen service to show our title bar with the appropriate layout for any viewport size. Finally we'll create some Angular directives, which make use of our screen service. These directives will allow us to more easily work with various screen sizes while writing Angular templates for components. By the end of this module we'll be able to configure, style and use our framework on any sized devices. So let's get started and take a look at configuring our framework so that it can be used by multiple applications.

Advanced Menu Features
Hi this is Mark Zamoyta, our menu is in place and we're routing to application components fine. Next up, we want to further expand this functionality. In this module we'll expand our menus in several ways. First we'll add buttons to our user interface, which allow the end user to switch menu orientation. Clicking this button here will hide the horizontal menu and show the vertical menu. We can switch back by pressing this button here. Not only will this let a user choose their own style, but we'll be able to more easily test our menu as we make changes throughout this module. Next we'll take a look at how popup menus will be implemented. We'll set up our menu data object to allow for nested menus. If there's a nested menu, we'll need to show it in a popup. Then we'll go ahead and create our Angular component to show a popup menu. We'll get the styling right, handle mouse events properly and make sure navigation still works. We'll make sure we can handle nested popup menus as well. We'll add arrow icons to our popup menus to make sure end users are aware of which menu items open up. Popup menus only show for horizontal menus, so we'll need to do things differently for our vertical menu. We'll put the CSS styling and coding changes in place to make sure vertical menus show submenus appropriately. Here you can see the indenting needed to properly show submenus. Next we'll take a look at animating our popup menus. We'll simply give them a fade in and fade out animation, which gives our menus a more polished look. Finally, we'll make sure everything works fine on smaller device sizes. By then end of this module we'll have built a dynamic menu system complete with popups, nested popups, and three different layouts, horizontal, vertical, and vertical for mobile. Let's get started.

Building Responsive Content Panels and a Dashboard
Hi this is Mark Zamoyta for Pluralsight. Welcome to this module titled Building Responsive Content Panels and a Dashboard. Our framework has lots of great features already and we'll do a bit more in terms of organizing application content within panels. We can also create a dashboard component, which is made up of panels. We'll start off this module by discussing content projection. This feature allows us to take a component compiled within our application and display it within another component which is part of our framework. We can do this without the framework having any kind of dependency on our application. This concept was called transclusion in Angular 1. But now that we're working with components in Angular 2 and beyond, the better term is content projection. We'll use content projection to create a panel component in our framework. A panel will be used to hold application data and keep it organized visually. We'll build out our Green Nations application and use panels to show lists of countries along with their EPI numbers. We'll also make sure our panel content is responsive and offer a different layout on smaller devices. Then we'll create another application panel using our panel component and fill out our applications dashboard component. Finally, we'll see how to work with multi-slot content projection, in order to add more sophisticated feature to our panel component. This will complete our application and framework. So let's get started and take a look at the concept of content projection.