Course #:WA2870 Introduction to Angular Using Hackathon Style Project Training 02/01/2021 - 02/05/2021 USD$3,450.00 Instructor Led Virtual 03/22/2021 - 03/26/2021 USD$3,450.00 Instructor Led Virtual Students are tasked with creating a CRUD (data) based application that retrieves its data through network calls from a RESTful web service. Pages in the app will be built from Angular components to fulfill various design requirements. The completed application will include: Angular Components and Services A modular page with separate components for Header, Body, Navigation, and Footer Custom pipe(s) for data filtering/formatting Routing and navigation using the Angular Component Router A data service that makes use of the Angular HTTP Client Tools and Technologies The course project makes use of the following tools and technology:NodeJS Node Package Manager (npm) Angular CLI Visual Studio Code Editor Command Prompt/Terminal Deliverables After completing the project students should be able to show a bug-free runnable Angular project that fulfills the design criteria set out in the project definition document. Duration Five days Outline of Introduction to Angular Using Hackathon Style Project Training Day 1 Morning Chapter 01 Angular and Development Setup (40 min) Lab 01 Development Setup (35 Min) Chapter 02 TypeScript, Components and Form Basics (60 min) Lab 02 - Introduction to Components (25 min) Lab 03 - Create the Subscription Form Component (20 min) Lab 04 - Template Driven Form (25 min) Afternoon Project Work (80 min) Progress Review (20 min) Project Work – continued (80 min) Progress Review (20 min) Project Overview Today you will be creating a new Angular project that displays to-do items, implementing components to represent the main areas of the page and getting familiar with the development environment and tools. Project Goals Create a new Angular development setup and project Work with Angular CLI to create components Implement components for; Header , Body and Footer sections Create a ToDo item detail form component Implement form submit to save data locally Get familiar with coding in TypeScript Gain experience using Visual Studio Code editor Day 2 Morning Chapter 3 Binding, Component Communication and Directives (55 min) Lab 5 Understanding Data Binding (25min) Lab 6 One Way Data Binding in a Custom Component (15min) Lab 7 Using Structural Directives (20min) Chapter 04 Services and HTTP (40 min) Lab 8 Service and Dependency Injection (20min) Lab 9 HTTP Client Development (15 Min) Afternoon Project Work (80 min) Progress Review (20 min) Project Work – continued (80 min) Progress Review (20 min) Project Overview On day two, you will be adding a To-do list component, adding navigation links to switch between the list and detail component views and accessing the To-do data from a file using HTTP.Project Goals Move to-do list property to app.component Pass list property to detail form in template Add a list component that uses ngFor Use ngSwitch to switch between list and details Add navigation links between list and details Move to-do list data into a file Access the file on startup using HttpClient Place startup code in an ngOnInit method Day 3 Morning Chapter 5 Chapter 5 Pipes and Routing (55 min) Lab 10 Using Pipes (20 Min) Lab 11 Basic Single Page Application Using Router (25min) Chapter 6 Advanced Routing and HTTP (55 min) Lab 12 Angular Communication with REST Services (45) Afternoon Project Work (80 min) Progress Review (20 min) Project Work – continued (80 min) Progress Review (20 min) Project Overview Your project goals for today include coding features that support adding of new To-do items, switching to a RESTful web service as your data source, adding type-through search capabilities and using routing to navigate between components. Project Goals Add input box and button that creates new todo items Use a rest service to retrieve data Create custom array pipes Place search box and controls on list screen Hookup search box and controls to custom pipes Add routing to the app Replace ngSwitch with routed components Replace navigation links with ones that use routing Day 4 Morning Chapter 7 Advanced Routing Techniques (55 min) Lab 13 Advanced Routing (60 Min) Chapter 8 Observables and Web Sockets (55 min) Lab 14 Lazy Loading Modules (20 min) Lab 15 Consuming Data from Web Sockets (25 min) Afternoon Project Work (80 min) Progress Review (20 min) Project Work – continued (80 min) Progress Review (20 min) Project Overview On day four you will add create, delete and update capabilities to the application, use route parameters when navigating from the list to the detail screen and implement push updates using web sockets. Project Goals Add navigation link styling Implement "Add record to REST service" Implement "Delete record from REST service" Implement "Update record on REST service" Use route parameter to navigate to specific detail record Add navigation links to each list item Implement push updates using web sockets Day 5 Morning Chapter 9 Styling, Custom Directives, Validation and Modules (70 min) Lab 16 Using Basic Angular Directives (20 min) Lab 17 Validation of a template driven form (25 min) Chapter 10 Unit Testing and Angular Bootstrap (70 min) Lab 18 Introduction to Testing Angular Components (35) Lab 19 Using Angular Bootstrap (15) Afternoon Project Work (80 min) Progress Review (20 min) Project Work – continued (80 min) Progress Review (20 min) Project Overview The final day of the project, you will refactor the application to include a home page, modularize the To-do components and services, add To-do detail form validation, lazy load the To-do module and style the application using bootstrap. Project Goals Refactor the app to add a home page Refactor todo list functionality into its own module Make a link on home page that brings up the todo list Implement lazy loading for the todo module Add validation to the todo detail form Style the application We regularly offer classes in these and other cities. Atlanta, Austin, Baltimore, Calgary, Chicago, Cleveland, Dallas, Denver, Detroit, Houston, Jacksonville, Miami, Montreal, New York City, Orlando, Ottawa, Philadelphia, Phoenix, Pittsburgh, Seattle, Toronto, Vancouver, Washington DC. View Course Outline Share This Request On-Site or Customized Course Info REGISTER FOR A COURSEWARE SAMPLE x Sent First Name Last Name Email Request On-Site or Customized Course Info x Sent First Name Last Name Phone Number Company Name Email Question
Course #:WA2870 Introduction to Angular Using Hackathon Style Project Training 02/01/2021 - 02/05/2021 USD$3,450.00 Instructor Led Virtual 03/22/2021 - 03/26/2021 USD$3,450.00 Instructor Led Virtual Students are tasked with creating a CRUD (data) based application that retrieves its data through network calls from a RESTful web service. Pages in the app will be built from Angular components to fulfill various design requirements. The completed application will include: Angular Components and Services A modular page with separate components for Header, Body, Navigation, and Footer Custom pipe(s) for data filtering/formatting Routing and navigation using the Angular Component Router A data service that makes use of the Angular HTTP Client Tools and Technologies The course project makes use of the following tools and technology:NodeJS Node Package Manager (npm) Angular CLI Visual Studio Code Editor Command Prompt/Terminal Deliverables After completing the project students should be able to show a bug-free runnable Angular project that fulfills the design criteria set out in the project definition document. Duration Five days Outline of Introduction to Angular Using Hackathon Style Project Training Day 1 Morning Chapter 01 Angular and Development Setup (40 min) Lab 01 Development Setup (35 Min) Chapter 02 TypeScript, Components and Form Basics (60 min) Lab 02 - Introduction to Components (25 min) Lab 03 - Create the Subscription Form Component (20 min) Lab 04 - Template Driven Form (25 min) Afternoon Project Work (80 min) Progress Review (20 min) Project Work – continued (80 min) Progress Review (20 min) Project Overview Today you will be creating a new Angular project that displays to-do items, implementing components to represent the main areas of the page and getting familiar with the development environment and tools. Project Goals Create a new Angular development setup and project Work with Angular CLI to create components Implement components for; Header , Body and Footer sections Create a ToDo item detail form component Implement form submit to save data locally Get familiar with coding in TypeScript Gain experience using Visual Studio Code editor Day 2 Morning Chapter 3 Binding, Component Communication and Directives (55 min) Lab 5 Understanding Data Binding (25min) Lab 6 One Way Data Binding in a Custom Component (15min) Lab 7 Using Structural Directives (20min) Chapter 04 Services and HTTP (40 min) Lab 8 Service and Dependency Injection (20min) Lab 9 HTTP Client Development (15 Min) Afternoon Project Work (80 min) Progress Review (20 min) Project Work – continued (80 min) Progress Review (20 min) Project Overview On day two, you will be adding a To-do list component, adding navigation links to switch between the list and detail component views and accessing the To-do data from a file using HTTP.Project Goals Move to-do list property to app.component Pass list property to detail form in template Add a list component that uses ngFor Use ngSwitch to switch between list and details Add navigation links between list and details Move to-do list data into a file Access the file on startup using HttpClient Place startup code in an ngOnInit method Day 3 Morning Chapter 5 Chapter 5 Pipes and Routing (55 min) Lab 10 Using Pipes (20 Min) Lab 11 Basic Single Page Application Using Router (25min) Chapter 6 Advanced Routing and HTTP (55 min) Lab 12 Angular Communication with REST Services (45) Afternoon Project Work (80 min) Progress Review (20 min) Project Work – continued (80 min) Progress Review (20 min) Project Overview Your project goals for today include coding features that support adding of new To-do items, switching to a RESTful web service as your data source, adding type-through search capabilities and using routing to navigate between components. Project Goals Add input box and button that creates new todo items Use a rest service to retrieve data Create custom array pipes Place search box and controls on list screen Hookup search box and controls to custom pipes Add routing to the app Replace ngSwitch with routed components Replace navigation links with ones that use routing Day 4 Morning Chapter 7 Advanced Routing Techniques (55 min) Lab 13 Advanced Routing (60 Min) Chapter 8 Observables and Web Sockets (55 min) Lab 14 Lazy Loading Modules (20 min) Lab 15 Consuming Data from Web Sockets (25 min) Afternoon Project Work (80 min) Progress Review (20 min) Project Work – continued (80 min) Progress Review (20 min) Project Overview On day four you will add create, delete and update capabilities to the application, use route parameters when navigating from the list to the detail screen and implement push updates using web sockets. Project Goals Add navigation link styling Implement "Add record to REST service" Implement "Delete record from REST service" Implement "Update record on REST service" Use route parameter to navigate to specific detail record Add navigation links to each list item Implement push updates using web sockets Day 5 Morning Chapter 9 Styling, Custom Directives, Validation and Modules (70 min) Lab 16 Using Basic Angular Directives (20 min) Lab 17 Validation of a template driven form (25 min) Chapter 10 Unit Testing and Angular Bootstrap (70 min) Lab 18 Introduction to Testing Angular Components (35) Lab 19 Using Angular Bootstrap (15) Afternoon Project Work (80 min) Progress Review (20 min) Project Work – continued (80 min) Progress Review (20 min) Project Overview The final day of the project, you will refactor the application to include a home page, modularize the To-do components and services, add To-do detail form validation, lazy load the To-do module and style the application using bootstrap. Project Goals Refactor the app to add a home page Refactor todo list functionality into its own module Make a link on home page that brings up the todo list Implement lazy loading for the todo module Add validation to the todo detail form Style the application We regularly offer classes in these and other cities. Atlanta, Austin, Baltimore, Calgary, Chicago, Cleveland, Dallas, Denver, Detroit, Houston, Jacksonville, Miami, Montreal, New York City, Orlando, Ottawa, Philadelphia, Phoenix, Pittsburgh, Seattle, Toronto, Vancouver, Washington DC. View Course Outline Share This Request On-Site or Customized Course Info REGISTER FOR A COURSEWARE SAMPLE x Sent First Name Last Name Email Request On-Site or Customized Course Info x Sent First Name Last Name Phone Number Company Name Email Question