Learn With: Angular 4, Bootstrap, and NodeJS PDF
Preview Learn With: Angular 4, Bootstrap, and NodeJS
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.
The list of books you might like
