Building Realtime AngularJS Controls

Learn to build six visual, realtime controls using Angular and front-end technologies such as Google Charts, Google Maps, and standard HTML5. We’ll work with four different sources of realtime data: SignalR, NodeJS, Firebase, and PubNub. You will also learn how to integrate these controls into a realtime dashboard with widgets.
Course info
Rating
(78)
Level
Intermediate
Updated
Sep 2, 2015
Duration
3h 26m
Table of contents
Introduction
Building a Realtime Gauge Control
Building a Gauge Widget
Realtime Line and Stock Charts
Building a Security Monitor Control
Realtime GPS Tracking Using Google Maps and Firebase
Accessing a Realtime Twitter Feed Using PubNub
Description
Course info
Rating
(78)
Level
Intermediate
Updated
Sep 2, 2015
Duration
3h 26m
Description

We’ll build six Angular controls, each consisting of a service to connect to a realtime data source, and a custom directive. The controls will be built as stand-alone components and we will also integrate them into a dashboard as widgets. The first three controls we’ll build will utilize Google Charts and receive realtime data from a SignalR server. These controls are a gauge, a line chart, and a candlestick chart, which is common for showing stock prices. The fourth control will be used for monitoring security information, making use of HTML5 with a NodeJS back end. The fifth control will use Google Maps with a Firebase back end. The final control will use an HTML5 interface and consume a realtime PubNub Tweet service.

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

Building a Realtime Gauge Control
This module is titled, Building a Realtime Gauge Control. My name is Mark Zamoyta. We'll be using Google charts to display and update a gauge control, and we'll be using a SignalR hub as the source of realtime data. If you're not using Visual Studio on Windows as your development platform, don't worry, we can still get by without using SignalR. I'll show you how to create a fake SignalR realtime service. Here's the gauge control from Google Charts running in an Angular application. It's a rather simple control showing a value between 0 and 100. Because of this simplicity, it's a good starting point for the controls we'll be building in this course. In this module we'll take a look at Google Charts and the gauge control. We'll display the gauge in an Angular application. We'll take a look at how Google Charts loads its packages asynchronously and how we can use a GitHub project to simplify things. We'll create a SignalR hub from scratch and integrate it into our project. We'll get it to broadcast messages to all connected users. We'll connect our gauge app to our realtime data feed and we'll look at two methods of communicating between an Angular service and an Angular custom directive. We'll broadcast messages on $rootScope in this module, and in a later module, module 4, we'll use Angular Watches instead of broadcasting. Now let's start off by creating an Angular app to hold our gauge.

Building a Gauge Widget
Welcome to this module titled, Building a Gauge Widget. We created a gauge control in the last module, and it's perfectly fine to use that in any Angular app, however, gauges and other similar controls are sometimes found in user-configurable dashboards. By user-configurable dashboards, I'm talking about the menu and dashboard framework I created in my last Pluralsight course, Building a SPA Framework Using AngularJS. You don't need to watch that course to continue here, but it would be very helpful if you're interested in working with dashboards and widgets in Angular. Here we see the framework, and we'll go over this a bit more in this module. For now I'll just show you the final project we'll be creating. I'll add a gauge widget, and you can see that it is hooked up to a SignalR realtime data source. We can move it around and resize it the way you would expect it to behave as a widget. We can pull up properties and change the Metric from cpuPct over to bandwidthPct. Of course we need to let the user add as many widgets as they'd like, as well as organize them. Closing a widget can be easily done as well. All widget settings are saved to local storage, so starting up the app again will give us our same widget layout. We'll use a GitHub repository as a starting point and build this application step by step. We'll focus on getting the gauge widget up and running, but in future modules of this course we'll be adding more realtime widgets, so let's set up the starting point for this project.

Realtime Line and Stock Charts
Welcome to this module titled, Realtime Line and Stock Charts. My name is Mark Zamoyta. We've seen Google Charts gauge control, and we've used that to display a single value. In this module we'll be working with two controls that plot a value along with the time, the line chart and the candlestick chart. Google Chart's line chart control has over 100 options, and here we see a line chart being updated in realtime by accessing a SignalR server. We'll be building this Angular control along with a candlestick chart. Candlestick charts are usually seen plotting stock prices, but they can be used for any numeric value. Each period of a candlestick chart shows four values, the opening price, closing price, and the high and low values of the period. A solid body shows a rise in price, and a hollow body shows a price drop. Once we get these two controls working, we'll integrate them into our dashboard application as well. Here we see our dashboard, and it now has options for these two types of charts. A user may instantiate them as widgets and adjust their settings just as was done for the gauge widget. One other technical detail we'll touch upon in this module is Angular's $watch feature. We've been broadcasting messages on $rootScope so that charts can quickly get notified when incoming data arrives. We'll implement Angular's $watch mechanism so that changes can be picked up in the digest cycle. In an Angular SPA, you would only pick one of these data refresh techniques, so after this module you'll be able to make a decision which style works best for you. Let's get to work now and look at these Google Chart controls, the line chart and candlestick chart.

Building a Security Monitor Control
This module is titled, Building a Security Monitor Control Using Node. js. We've been working with Google Charts so far, but for the frontend of this component we'll be working with plain HTML5 and CSS. We'll be working with a stream of text-based information, so we'll show it in a scrollable div element. Here you can see the Security Monitor in action. A simple Node. js server is sending security-related events to our Angular application. We'll build this Node. js server from scratch and integrate it with the socket. io package for realtime socket communication. Next we'll build an Angular service which uses the frontend portion of socket. io to connect up with our Node server. We'll create a custom directive to communicate with our service, and show the security events in a list. We'll be able to filter this list to focus in on a single event we may be interested in. One problem with a large scrolling list is that it's constantly in motion. If a user decides to scroll back through the list, we need to make sure the scrolling stops, we'll see how to accomplish this in JavaScript, and then resume scrolling once the user scrolls back to the bottom of the list. As with all components in this course, we'll covert it into a widget for use in a dashboard application. We can have multiple widgets, each with a different filter setting.

Realtime GPS Tracking Using Google Maps and Firebase
Hello, my name is Mark Zamoyta, and this module is titled Realtime GPS Tracking Using Google Maps and Firebase. We'll be building an Angular component and widget to track busses in realtime. Firebase is a data storage service which works great with realtime data. Here you can see a demo app at Firebase. com titled sfVehicles, which tracks San Francisco busses in realtime using a publicly available data store. The buses are displayed on Google Maps and are animated as new GPS data arrives for each bus. We'll take a look at the source code for this demo app, and we'll convert it into an Angular service and custom directive for use in Angular applications. This will form the basis for any other GPS-related component you'll wish to build. We'll see how Google Maps and realtime data from Firebase can be used together. We won't be using Firebase's AngularFire library, however, we will be using the Firebase GeoFire library for GPS searching and events. Like the other components in this course, we'll also convert our control into a dashboard widget. Here you can see two separate map widgets connected in realtime to Firebase. There are settings for latitude and longitude, and these settings get saved to local storage for future use. Let's start off by taking a quick look at what Firebase is.

Accessing a Realtime Twitter Feed Using PubNub
Hello. This module is titled Accessing a Realtime Twitter Feed Using PubNub. We looked at Firebase in the last module, and now we'll take a look at a similar realtime service called PubNub, available at pubnub. com. Here's the website, and let's take a look at a demo which handles the twitter feed in realtime. This is a public feed that we'll access in this module using the PubNub API. We'll build an Angular service to access PubNub and this twitter feed, and we'll create an Angular custom directive to work with it visually. We'll also add the ability to filter out messages based on the message text. You'll see how we get access to dozens of fields for each tweet, and how we can display them in the user interface. Like always, we'll convert this custom directive into a widget for use in dashboard applications. We'll let the user decide what the filter text is and make sure it saves and loads properly from local storage. In the next video, we'll take a look at what PubNub is all about.