Knowledge to Boost Your Career
By Jeffry Houser
https://www.learn-with.com
https://www.jeffryhouser.com
https://www.dot-com-it.com
Purchase Now !
Just with Paypal
Just with Paypal
Book Details
Price
|
2.50 USD |
|---|---|
Pages
| 224 p |
File Size
|
4,749 KB |
File Type
|
PDF format |
ISBN
| 0-240-51942-6 |
Copyright
| 2017 by DotComIt, LLC |
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.
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.
What is this Book Series About?
The purpose of this series is to teach by example. The plan is to build an application
using multiple technologies. These books will document the process, with each
book focusing on a specific technology or framework. This entry will focus on
Angular 4 as the application framework, and Bootstrap as the primary UI
component library.
The application built in this book will focus on common functionality required when
I build applications for enterprise consulting clients. You’ll receive step-by-step
instructions on how to build a task manager application. It will integrate with a
service layer. A login will be required. Functionality will be turned off or on based
on the user’s role. Data will be displayed in a DataGrid, because all my enterprise
clients love DataGrids. Common tasks will be implemented for creating, retrieving,
and updating data.
How to Read This Book
Each chapter of this book represents one aspect of the application’s user interface;
logging in, editing a task, etc. Each chapter is split up into these parts:
· Building the UI: This section will show you how to create the UI elements of
each chapter.
· The Database: There will be sections to review the data that each chapter’s
functionality deals with. The database storage tables will be examined here,
as well as an explanation of the data types.
· The Services: This section will cover the APIs of the services that need to be
interacted with. This book will help you create services using NodeJS. If you’re
feeling adventurous, you should be able to build out the services to any
language of your choice.
· Connecting the UI to the Services: This section will show you how the UI
code will call the services and handle the results.
Who Is This Book for?
Want to learn about building HTML5 applications? Are you interested in Angular or
Bootstrap? Do you want to learn new technologies by following detailed examples
with runnable code? If you answered yes to any of these questions, then this book
is for you!
Here are some topics we’ll touch on in this book, and what you should know before
continuing:
· TypeScript: This is the language behind Angular. TypeScript is a statically
typed language that compiles to JavaScript. The more you know about it, the
better. If you are not familiar with it yet, check out our tutorial lesson on
learning the basics of TypeScript.
· NodeJS: We use these scripts to compile our TypeScript into JavaScript,
process CSS, and copy files. We’ll also use NodeJS to build rest services which
the main UI will integrate with. Familiarity with NodeJS will be beneficial, but
is not required.
· JavaScript: TypeScript compiles to JavaScript to run in the browser. Aside
from that, we touch on JavaScript routinely through the book in order to
configure NodeJS scripts, and SystemJS; a module loader used by Angular. You
should be familiar with JavaScript.
· Angular: The primary focus of this book is on Angular, so we are going
assuming you have no experience with it. At the time of this writing, the most
current version is Angular 4. If you’re looking for information on the AngularJS
1.x code base, check out some of the other books in this series.
· JSON: The data returned from the services will be done so as JSON packets.
JSON should be easy to understand, but if you have no experience with it,
check out our free introduction.
· Bootstrap: This is a CSS framework that helps create things such as popups
and date choosers. We’ll use it in conjunction with Angular to help flesh out
the application’s user interface.
· SQL: This is the database Server used as the storage mechanism for this
book. As such, the SQL language will be used to communicate with the
database from NodeJS. There aren’t any advanced SQL concepts in this book,
but you should have a general understanding of this type of database Server.
Table of Contents
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
Bookscreen
Afterword
I wrote this book to document my own learning process building HTML5
applications. This book continues the LearnWith series, focusing on Angular 4 with
some hints of TypeScript. I hope you benefited from my experience.
If you want more information, be sure to check out www.learn-with.com. You can
test the app we created in this book, get the source code for each chapter, get the
most up to date version of the books, and browse some of our other titles which
will build the same app using different technologies.
When you’re there, be sure to sign up to get a free monthly tutorial from us.
If you need personal mentoring or have a custom consulting project, we’d love to
help out. Please don’t hesitate to reach out.
Send me an email at jeffry@dot-com-it.com and tell me how this book helped you
become a success.