Learn With: Angular 4, Bootstrap, and NodeJS

223 Pages·2017·2.17 MB·English

by  Jeffry Houser

LEARN WITH
ANGULAR, BOOTSTRAP, AND NODEJS

By Jeffry Houser
https://www.learn-with.com
https://www.jeffryhouser.com
https://www.dot-com-it.com

Copyright © 2017 by DotComIt, LLC
About the Author
Jeffry Houser is a technical entrepreneur that likes to share cool stuff with
other people.
In the days before business met the Internet, Jeffry obtained a Computer
Science degree. He has solved a problem or two in his programming
career. In 1999, Jeffry started DotComIt; a company specializing in
custom application development.
During the Y2K era, Jeffry wrote three books for Osborne McGraw-Hill.
He is a member of the Apache Flex Project, and created Flextras; a
library of Open Source Flex Components. Jeffry has spoken all over the
US. He has produced hundreds of podcasts, written over 30 articles, and
written a slew of blog posts.
In 2014, Jeffry created Life After Flex; an AngularJS training course for
Flex Developers. In 2016, Jeffry launched the Learn With series with
books focusing on using AngularJS with other technologies. Jeffry has
worked with multiple clients building AngularJS applications.
Table of Contents Learn With Angular,
Bootstrap, and NodeJS
About the Author
Preface
Introduction
What is this Book Series About?
Who Is This Book for?
How to Read This Book
Common Conventions
Caveats
Want More?
Chapter 1: The Application Overview and Setup
Introducing the Task Manager Application
Setup Your Environment
Prerequisites
Get the Project Seed
Understand the Project Seed
Create the Database
Create the NodeJS Application
Create a Web Server in NodeJS
Create a Request Router
Create a Response Handler
Create the Main Application File
Create the Application Skeleton
Start with a Basic HTML Page
Set up the SystemJS Config
Setup the Angular Module
Set up the Routes
Create the Login Component
Create the Tasks Component
Create the Routing Module
Put it all Together
Final Thoughts
Chapter 2: Login
Create the User Interface
Creating Value Objects
The Generic Return Object
Create a User Value Object
Examine the Database
Write the Services
Install MSSQL NodeJS Driver
Creating a DatabaseConnection Package
Creating JSON in NodeJS
Create the AuthenticationService
Test in a Browser
Access the Services
Hashing the Password with Angular
Create the Service
Implement the authenticate( ) method
Turn the Service into a Provider
Wire Up the UI
Creating a UserModel
Accessing Component Values from Within the View
Implementing the Reset Button
Implementing the Login Handler
Final Thoughts
Chapter 3: Displaying the Tasks
Create the User Interface
What Goes in the Grid?
Setup the Grid
Tell Angular how to find the Grid Component
Creating a TaskModel and Other Value Objects
Create a Grid Component
Create the DataGrid
Creating a TaskFilter Object
Examine the Database
Write the Services
Install a DateFormatter
Create the Task Service
Testing the getFilteredTasks() Service
Create the TaskService Stub
Turning the Object into a JSON String
Accessing the loadTask( ) Service
Wire Up the UI
Validate the User before Loading Data
Loading the Tasks
Final Thoughts
Chapter 4: Filtering the Tasks
Create the User Interface
What Data Do We Filter On?
Setup ng-bootstrap
Tell Angular how to find ng-bootstrap
Modify the TaskFilterVO
Create the TaskFilter component
Create the TaskFilter Template
Populating a Select with Angular
Adding a DateChooser
The Filter Button
Adding Styles
Examine the Database
Write the Service
Revisit the getFilteredTasks() Method
Loading Task Categories
Testing Task Categories
Access the Service
Wire Up the UI
Loading Task Categories
Triggering the Filter
Catching the filterRequest Event
Test the Filtering
Final Thoughts
Chapter 5: Creating and Editing Tasks
Create the User Interface
The Task Window
Create the Popup Component
Populate the Popup Template
Opening the New Task Window
Opening the Edit Task Window
Examine the Database
Write the Services
Modify the getFilteredTasks( ) method
Creating a New Task
Testing Task Creation
Updating a Task
Testing Task Updates
Access the Services
Wire Up the UI
Clicking the Save Button
Handle the updateTask( ) Result
Final Thoughts
Chapter 6: Scheduling Tasks
Create the User Interface
The Task Scheduler Window
Create the TaskScheduler component
Create the Scheduler Template
Modifying the Main Screen
Clicking the Expand Button
Adding the Schedule Button to the TaskGrid
Examine the Database
Write the Services
Revisit the getFilteredTasks( )
Scheduling a Single Task
Testing Scheduling a Single Task
Scheduling a Lot of Tasks
Testing Scheduling a Lot of Tasks
Access the Services
Use the scheduleTask( ) Service
Use the scheduleTaskList( ) Service
Wire Up the UI
Loading Tasks when Scheduler is Opened
Loading Tasks when the Scheduler Date Changes
Implement the Delete Task from Scheduler Button
Saving all Scheduled Tasks
Final Thoughts
Chapter 7: Marking a Task Completed
Create the User Interface
The Completed Checkbox
The Checkbox Implementation
Examine the Database
Creating the Service
The completeTask( ) Service Method
Testing the completeTask( ) service
Complete Tasks from Angular
Wire Up the UI
Final Thoughts
Chapter 8: Implementing User Roles
Review User Roles
Role Review
What UI Changes Are Needed?
Modify the UI
Modifying the UserModel
Disabling the Completed Checkbox
Removing the Show Scheduler Button
Removing the Edit Task Column
Final Thoughts
Afterword
Preface
I was a Flex developer for a long time; however, Adobe’s Flash Platform
is no longer relevant. A smart developer will spend time educating
himself on new technologies to keep up with a changing market, and to
make sure he has healthy job prospects in the future. While cultivating
these new skills, I decided to write about my experiences. With this series
of books, you can leverage my experience to learn quickly.

This book is about my experiences building Angular applications. Angular
is a JavaScript framework built by Google for building smart user
interfaces. It is built on TypeScript and allows you to build dynamic views
in HTML5. It is fully testable, which is important to many enterprise-level
applications. It has a large developer community, ready to help with
problems. I greatly enjoy building applications with Angular.
This book will show you how to build a Task Manager application using
Angular and Bootstrap. It uses REST services built with NodeJS, so
Angular can interact with a fully functional backend.