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.
What you'll learn
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.
Table of contents
- Introduction 2m
- Creating a Test Application 7m
- Google Charts and the Gauge Control 4m
- Displaying a Gauge 4m
- A Google Charts GitHub Project 2m
- Integrating a SignalR Hub 3m
- Adding a SignalR Background Timer 5m
- Faking a SignalR Hub 3m
- Client Side Access to SignalR 7m
- Angular Service Communication 3m
- Broadcasting an Event 2m
- A Working Gauge Control 3m
- Using Attribute Settings 5m
- Summary 1m
- Introduction 2m
- An SPA Starting Point 2m
- Using a Dashboard 2m
- Dashboard Creation 4m
- Using Widgets 2m
- Widget Creation 2m
- Importing psGauge 3m
- Showing the Gauge 4m
- Integrating the SignalR Service 3m
- Resizing the Gauge 3m
- Gauge Settings 2m
- Modifying Gauge Settings 5m
- SignalR Disconnections 4m
- Summary 1m
- Introduction 2m
- Line Chart Overview 2m
- Line Chart Control Setup 4m
- Understanding the timeofday Data Type 2m
- Displaying a Realtime Line Chart 5m
- Using $scope.$watch 5m
- Google's Candlestick Chart for Stock Prices 3m
- Displaying a Realtime Candlestick Chart 9m
- Creating a Line Chart Widget 4m
- Creating a Stock Price Widget 3m
- Summary 1m
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. He has written numerous mobile apps and games for clients including Electronic Arts and Yahoo! Games. Some of his popular mobile titles include Yahtzee, Yahoo! Chess, and Yah... more