Library

Course: Angular 6 Crash Course

Angular 6 Crash Course

  • Life Time Access
  • Certificate on Completion
  • Access on Android and iOS App
About this Course

Do you have the knowledge of JavaScript and TypeScript and want to master AngularJS then this course is for you.If you are an experienced AngularJS developer who wants to fill in any gaps in your knowledge of creating a Single Page Applications using AngularJS then this course is for you too.You will learn how to create Rest APIs using Express and Java Spring Boot and use them in your Angular Front End and build Full Stack Application from scratch.

AngularJS is the most widely used Single Page Application Development framework in the industry today. Angular makes it super easy to create production ready Single Page applications. You will start this course by learning what Angular is ,the different features that are a part of every Angular application .You will be working hands on one feature at a time .You will then create two mini Single Page applications using all the knowledge you gain from those sections.

  • Learn what Single Page Applications are
  • Understand how Angular makes it easy to build SPAs
  • Create Angular Components
  • Use various directives angular provides
  • Create Services and use them to make GET and POST calls
  • Develop REST APIs using Node and ExpressJS
  • Create a Angular front end that consumes those REST APIs
  • Configure routing for the Single Page Application
  • Create and use pipes to format the data
  • Use Reactive Forms and Template Driven Forms
  • Create custom directives and use them
  • Create a Flight Reservation back end API using JAVA
  • Create a Front End by consuming the back end API
  • Create a Check In App that will check in a Passenger
  • What are the requirements?

AngularJS , Visual Studio Code (Installation is covered in easy setup section)

Who this course is for:

  • Anyone who want to understand and create Single Page Applications
  • Students who want to master Angular features in easy steps
  • Students who want to create end to end applications using Angular Frontend and Java Backend
  • Students who want to create end to end applications using Angular Frontend and Node/Express Backend
Basic knowledge
  • Knowledge of JavaScript and TypeScript
  • Or Should have completed my TypeScript course
  • Knowledge for Java Spring Boot is required to work on the Java Backend
What you will learn
  • Learn what Single Page Applications are
  • Understand how Angular makes it easy to build SPAs
  • Create Angular Components
  • Use various directives angular provides
  • Create Services and use them to make GET and POST calls
  • Develop REST APIs using Node and ExpressJS
  • Create a Angular front end that consumes those REST APIs
  • Configure routing for the Single Page Application
  • Create and use pipes to format the data
  • Use Reactive Forms and Template Driven Forms
  • Create custom directives and use them
  • Create a Flight Reservation back end API using JAVA
  • Create a Front End by consuming the back end API
  • Create a Check In App that will check in a passenger
Curriculum
Number of Lectures: 191
Total Duration: 09:12:38
Introduction
  • Course and Instructor Introduction  
  • How to make the best of this course  
  • What are Single Page Applications  
  • What and why Angular  
Software Setup
  • Install Angular  
  • Install Yarn  
  • Install Visual Studio Code  
  • Install MySql and MySql Workbench  
  • Launch MySql Workbench  
  • Completed Projects and Resources  
Projects and Resource Files
  • Angular Project  
  • Executable File  
  • Flight Services  
  • Resource Files  
Components
  • Components  
  • Create the project  
  • Important Project Files and Folders  
  • Create the First Component  
  • NgModules  
  • Bootstrap and run the first component  
  • Using the new component as the root component  
  • Create a Seller Component  
  • Using Arrays of data and ngFor directive  
  • Use the function  
  • Input property binding  
  • Output Event Binding  
Directives
  • Introduction - Directives  
  • ngIf  
  • Using ngIf dynamically  
  • Using ngSwitch  
  • Using ngSwitchDefault  
  • Using ngFor  
  • Using ngFor with objects  
  • Using ngNonBindable  
  • NgStyle  
  • Dynamic Styling with ngStyle  
  • Using NgClass  
  • Dynamic NGClass  
Services
  • Dependency Injection  
  • Usecase  
  • Links to rest services  
  • Create the project and service  
  • Service code Walkthrough and Imports  
  • Implement the service  
  • Handle error conditions  
  • Create the component  
  • Handle Errors  
  • Implement HTML  
  • Update configuration  
  • Services in action  
  • Add styles  
Posting Data
  • Introduction  
  • Create the project - Posting Data  
  • Implement the Service - Posting Data  
  • Implement the Component  
  • Implement the HTML  
  • Bootstrap the applicaiton  
  • Run the application  
Using Multiple Services
  • Introduction - Multiple Services  
  • Create the project - Multiple Services  
  • Implement the Services  
  • Use the Services  
  • Implement the HTML - Multiple Services  
  • Configure the app  
  • Run the application - Multiple Services  
  • Use forkJoin  
REST API Using ExpressJS
  • Introduction - REST API Using ExpressJS  
  • Create the Product table  
  • Create the project - REST API  
  • Create the DB Connection  
  • Create a controller  
  • Implement the READ endpoint  
  • Initialize REST application  
  • Test READ  
  • Get single Product  
  • Create  
  • Test and Troubleshoot Create  
  • Update  
  • Delete  
Create a Angular Client Project
  • Create the project - Angular Client Project  
  • Create and implement Get Products Service method  
  • Create the component and view  
  • Configure and test GET Products  
  • Implement the Other Methods  
  • Test Create  
  • Test other methods  
Routing
  • Routing  
  • Usecase and Refactoring  
  • Refactor Components  
  • Refactor HTML  
  • Routing Steps  
  • Create the Routing Module  
  • Add the Routes  
  • The pathmatch property  
  • Configure the routing module  
  • Use routes in HTML  
  • Routing in Action  
Pipes
  • Introduction - Pipes  
  • Text Pipes  
  • Date  
  • Currency  
  • Json  
  • Number  
  • Percent  
  • Slice  
  • Using slice in for  
  • Create a promise  
  • Use async pipe  
  • Create a Custom Pipe  
Reactive Forms
  • Forms  
  • Usecase and Project  
  • Add Bootstrap css  
  • Create the model  
  • Create the form view  
  • Add a Address sub group  
  • Add submit button  
  • Handle onSubmit  
  • Test and Summary  
  • Default Values and Validations  
  • Handling Validation Errors  
  • Get countries dynamically  
Template Driven Forms
  • Template Driven Forms  
  • Create the project - Template Driven Forms  
  • Create the Template and Form  
  • Add sub FormGroup fields  
  • Handle Submit  
  • Test  
  • Two-Way Binding  
Custom Directives
  • Create a custom structural directive  
  • Implement the conditional logic  
  • Use *myIf  
  • Create loop directive  
  • Create a Attribute Directive  
  • Pass Inputs  
  • Handle Events  
Project Usecase
  • Introduction - Project Usecase  
  • Flight Reservation Usecase  
  • Flight CheckIn Usecase  
Create the Java Backend
  • Create the DB Schema  
  • Install Java  
  • Install STS  
  • Download the completed source code  
  • Create the project - Java Backend  
  • Create the Entities  
  • Mark them with JPA Annotations  
  • Define relationships  
  • Create the Repositories  
  • findFlights API  
  • saveReservation API  
  • Implement saveReservation  
  • findReservation  
  • updateReservation  
  • Configure The Data Source and Run  
  • Add Flights  
  • Filter Flights  
  • Test Filter Flights using Postman  
  • Test Save and Find Reservation  
  • Test Update  
  • Create and Test FindFlight  
  • Add Cross Site Origin Support  
Create the Flight Reservation APP
  • Usecase - Flight Reservation App  
  • Create the project - Flight Reservation APP  
  • Create Service  
  • Fetch single flight  
  • Save reservation  
  • Configure Routing  
  • Implement Find Flights Component  
  • Implement Binding  
  • Handle Search  
  • Display Flight Details  
  • Bootstrap the application and run  
  • Application in action  
  • Add Select Button  
  • Fetch single flight details  
  • Render Flight Details  
  • Gather passenger details  
  • Collect Card Details  
  • Handle reservation save  
  • Show the confirmation screen  
  • Test End to End  
Develop Flight CheckIn App
  • Develop Flight CheckIn App - Create the project  
  • Create the Service  
  • Implement the saveReservation method  
  • Implement routing  
  • Code the root component  
  • Create Start Checkin HTML  
  • Handle OnClick  
  • Add Forms Module and assign reservation data  
  • Render Flight and passenger details  
  • Add noOfBags and confirm button  
  • Complete Checkin  
Reviews (0)