Angular Training Course
Who will benefit
- School leavers intending to do one of our Coding Bootcamps.
- Anyone that wants to start learning to code the right way.
- This course is a requirement for entry into our Coding Bootcamps
Duration
- 5 Full Days or 40 hours part time
Price
What do I need?
- Live Online Training : A laptop, and a stable internet connection.
- The recommended minimum speed is around 10 Mbps.
- We use Google Meet and Google Classroom so it is required that you have a gmail address.
- Classroom Training : We will resume classroom training in Woodmead as soon as we have clarity on the lockdown restrictions.
Outcomes
- Know the Fundamentals of HTML, CSS, JavaScript and how they work together to build apps.
- Know how to debug JavaScript programs in the browser.
- Know how to use data structures, control flow to build 5-10 useful small apps combining HTML, CSS and JavaScript.
- Have enough JavaScript knowledge to pass a recognised international JavaScript Quiz.
- Build an HTML Web Site showing off your portfolio of projects and host it online.
Certification
- Attendance : If you have attended 80% of the sessions and completed all the class work, you qualify for the Attendance Certificate.
- Competency : If you have also completed all the practical projects as described the Outcomes section, you qualify for the Competency Certificate.
Intended Audience
Developers who found that JavaScript alone is inadequate to develop a rich, fully-fledged front-end. Our Angular Training Course starts with the MVC pattern and the many benefits that can be gained from separating your logic and presentation code. We then start from the nuts-and-bolts and building up to the most advanced and sophisticated features Angular, going in-depth.
Course material:
Contents
DAY 1
Introduction
- What is Angular?
- Overview of Angular Apps
- Modules
- Components
- Services
- Directives
- Setting Up
- Installing Node
- Installing TypeScript
- Installing Typings
- Installing Angular CLI
- TypeScript Editor
- Chrome Browser
- Creating a New Project with Angular CLI
- Editing Our First Angular Component
Creating and Using Components
- Creating Our First Component
- Using Our Created Component
- Component Templates
- Displaying a line with *ngFor
- Services
- Dependency Injection
Bindings
- Property Binding
- CSS Class Binding
- Binding to User Input Events
- Example Application
DAY 2
Working with Components
- Input Properties
- Styles
- Example Application
Conditional Rendering, Pipes and Ng-Content
- ngIf
- ngSwitch
- Pipes
- Custom Pipes
- ng-content
- Multiple Insertion Points
Template Driven Forms
- Create the User Model Class
- Revising app.module.ts
- Creating an initial HTML Form Template
- Using *ngFor to Display Options
- Two-way data binding with ngModel
- Show and Hide Validation Error messages
- Showing Specific Validation Errors
- Submit the form with ngSubmit
- Getting Submitted Values
DAY 3
Model Driven Forms
- Building a Basic Login Form
- Creating Controls Explicitly
- Implementing Validation
- Submitting the Form
- app.component.ts
- Using Formbuilder
- Implementing Custom Validation
login.component.ts
login.component.html
Validating Upon Form Submit
login.component.html
Introduction To Observables
- Obervables
- Creating an Observable from DOM events
- Observable Operators
- filter operator
- debounceTime Operator
- distinctUntilChanged Operator
Getting Data From RESTful APIs with Observables
- GitHubRESTful API
- Getting Data
- Dependency Injection
- ngOnInit
- Showing a Loader Icon
- Implementing a GitHub Results Display page
DAY 4
Routing
- Enabling Routing
- Setting Up Our Routes
- Router Outlet and Links
- Router Outlet
- Router Links
- Adding a new Router Link
- Route Parameters
- Specifying Route Parameters
- Retrieving Route Parameters
- Imperative Navigation
- Route Guards
- RouteGuard CanActivate
- RouteGuard CanDeactivate
- app.routing.ts
- AppModule
Structuring Large Apps With Modules
- NgModule
- Restructuring
- Restructuring GitHubModule
- Restructuring LoginModule
- Restructuring AppModule
- Restructuring Routes
- app.routing.ts
- app.module.ts
DAY 5
C.R.U.D. with Firebase
- About Firebase
- Using Firebase
- Adding Firebase to our Angular App
- app.module.ts
- app.component.ts
- Working with a Firebase Database
- Displaying List of Users
- Adding a user
- AngularFirestore Add
- Retrieving a Single User and Deletion
- Deleting a User
- Populating the Form on Edit
- Updating a user
Own Project
Please note that dates may change
Avoid disappointment
Book Now!