Web Application Development

with Angular

Start your web app development journey with Angular
and power up your career today!

5 Days / 40 Hours / 22 Modules
+ 3 month coaching + 1 year eLearning access
Web Application
with Angular

Start your web app
development journey
with Angular and power
up your career today!
5 Days / 40 Hours / 22 Modules
+ 3 month coaching + 1 year eLearning access

Learn the fundamentals of Angular and set your career path in one of the in-demand professions of the decade.

This course includes the fundamental angular programming techniques such as Components, Directives, Services, Forms, Http Access, Authentication and App Optimization
This course will also show you how to use the Angular CLI and feature a complete project, which allows you to practice the things learned throughout the course
By the end of this course, participants will be able to create angular projects from scratch all on their own
Key Learning Outcomes

Upon completion, participants should be able to demonstrate each of the following outcome:-

  • Develop modern, complex, responsive and scalable web applications with Angular
  • Fully understand the architecture behind an Angular application and how to use it
  • Use the gained knowledge of Angular fundamentals to quickly establish yourself as a frontend developer
  • Create single-page applications with one of the most modern JavaScript frameworks out there
  • Build real-world Angular applications on your own
  • Troubleshoot common Angular errors
  • Master the essential Angular concepts
  • Understand the file and folder structure of an Angular application
Subscribe to our newsletter – and be first to get all the updates on our upcoming programmes and industry insights.
We don’t share your information or spam you. Unsubscribe anytime.

    Course Modules Covered in the Angular program
    Day 1 - Introduction to "Modern (ES5)" JavaScript, Functional Programming, Object Oriented Programming - OOP, Built-in Objects, Error Handling, The JavaScript Repository

    Introduction to "Modern (ES5)" JavaScript

    1. Basic language features
    2. JavaScript types: Number, String, Boolean
    3. Variable declaration using let
    4. Operators – arithmetic, assignment, comparison
    5. Decision Making – if, else, switch case, double equal ==, triple equal ===
    6. Loops – for, while, do ... while
    7. Arrays, iterating arrays using for … in

    Functional Programming

    1. Functions
    2. Returning functions
    3. Parameterized functions
    4. Default function parameters
    5. REST parameters
    6. Anonymous functions and IIFE
    7. Function constructor
    8. Lambda functions
    9. Lambda statement
    10. Lambda expression
    11. Function hoisting
    12. Generated functions

    Object Oriented Programming - OOP

    1. Java Script Objects
    2. Object creation – Literal method, Using Object, Function constructor
    3. Properties, Methods
    4. Comparing Objects
    5. Object de-structuring
    6. JavaScript call, apply and bind
    7. Class
    8. Creating Objects
    9. Constructor
    10. Inheritance
    11. Method Overriding

    Built-in Objects

    1. String
    2. Date
    3. Math
    4. Collections – Map, Set
    5. Promise
    6. Importing a module
    7. Exporting a module

    Error Handling

    1. Syntax Errors
    2. Runtime Errors
    3. Logical Errors
    4. Throwing Exceptions
    5. Exception handling
    6. Custom Errors
    7. Node Projects

    The JavaScript Repository

    1. Node Package Manager (NPM)
    2. Creating a JavaScript project
    3. The package.json configuration file
    4. Installing Packages Global
    5. Installing Packages Locally
    6. Adding dependency in package.json
    7. Scripting through package.json
    8. Webpack Project
    Day 2 - Introduction to TYPESCRIPT, Introduction to Angular, Building with Components

    Introduction to TYPESCRIPT

    1. Overview
    2. Environment Setup
    3. Basic Syntax
    4. Types, Variables and Operators
    5. Decision Making and Loops
    6. Functions and Lambda Expressions
    7. Generics
    8. Enums
    9. Number and Strings
    10. Arrays
    11. Tuples
    12. Union
    13. Interface, Classes and Objects
    14. Namespaces
    15. Modules
    16. Ambients
    17. Decorators
    18. Mixins

    Introduction to Angular

    1. Why Angular 7
    2. Angular 7 Features
    3. Installing and Using Angular 7
    4. Creating the first Angular Project
    5. Architecture Overview
    6. What is new in Angular 7
    7. Summary

    Building with Components

    1. Introducing the component
    2. Component Decorator Properties
    3. Template
    4. Inline Template
    5. Interpolation – Plain text, Object and Array
    6. Adding CSS
    7. Component Starter
    8. Integrating Bootstrap
    9. Developing a Header Component
    10. Developing a Footer Component
    11. Developing a Product Component
    12. Summary
    Day 3 - Data and Event Binding, Attribute Directive, Structural Directives, Template Driven Forms, Reactive Forms

    Data and Event Binding

    1. Binding Syntax
    2. One-Way Output Binding
    3. Property binding
    4. Attribute binding
    5. Binding Events
    6. Binding Events Examples
    7. Setting Element Properties
    8. Setting Properties: Examples
    9. Two-Way Binding of Input Fields
    10. Input Binding Examples
    11. Summary

    Attribute Directive

    1. What are Directives
    2. Directive Types
    3. Apply Styles by Changing Classes
    4. Changing Classes – Example
    5. Applying Styles Directly
    6. Applying Styles Directly - Example
    7. Obsolete Directives and Property Binding
    8. Controlling Element Visibility
    9. Setting Image Source Dynamically
    10. Setting Hyperlink Source Dynamically
    11. Summary

    Structural Directives

    1. Adding and Removing Elements Dynamically
    2. Looping Using ngFor
    3. ngFor - Basic Syntax
    4. ngFor - Full Template Syntax
    5. Creating Tables with ngFor
    6. ngFor Local Variables
    7. ngFor Changes in the backing data source
    8. Swapping Elements with ngSwitch
    9. ngSwitch - Basic Syntax
    10. ngSwitch - Full Template Syntax
    11. Summary

    Template Driven Forms

    1. Note on Deprecated Forms APIs
    2. A Basic Angular Form
    3. Binding Input Fields
    4. Accessing the Form Object
    5. Binding the Form Submit Event
    6. The Submit Function
    7. Basic HTML5 Validation - "required" Attribute
    8. HTML5 vs. Angular Validation
    9. Angular Validators
    10. Angular Validation State
    11. Displaying Form Validation State
    12. Displaying Field Validation State
    13. Displaying Validation State Using Classes
    14. Disabling Submit when Form is Invalid
    15. Submitting the Form
    16. Binding to Object Variables
    17. Additional Input Types
    18. Checkboxes
    19. Select(drop down) Fields
    20. Rendering Options for Select (drop down)
    21. Date fields
    22. Radio Buttons
    23. Summary

    Reactive Forms

    1. Introduction
    2. Registering the reactive forms module
    3. Generating a new form control
    4. Registering the control
    5. Managing control values
    6. Grouping form controls
    7. Creating FormGroup
    8. Associating the FormGroup model and View
    9. Saving form data
    10. Displaying the component
    11. Creating nested form groups
    12. Grouping the nested form in the template
    13. Partial model updates
    14. Generating form controls with FormBuilder
    15. Injecting the FormBuilder service
    16. Generating form controls
    17. Simple form validation
    18. Dynamic controls using form arrays
    Day 4 - Services and Dependency Injection, RxJS and Observables, HTTP Client, Introduction to Single Page Applications

    Extract data from Website - Beautiful soup

    1. What is a Service?
    2. Creating a Basic Service
    3. What is Dependency Injection?
    4. What Dependency Injection Looks Like
    5. Injecting Services
    6. Using a Service in a Component: Dedicated Instance
    7. Using a Service in a Component: Dedicated Instance - Example Code
    8. Using onInit to Initialize Component Data
    9. Using a Shared Service Instance
    10. Dependency Injection and @Host
    11. Dependency Injection and @Optional
    12. Summary

    Selenium IDE

    1. What is an Observable?
    2. Observable Operators
    3. Creating Observables Using Static Operators
    4. What is an Observer?
    5. Observer Example
    6. Subject
    7. Subject Example
    8. EventEmitter or Observable

    Selenium Webdriver

    1. The Angular HTTP Client
    2. Using The HTTP Client - Overview
    3. Setting up HTTP_PROVIDERS in the Root Component
    4. Importing Individual Providers into Services
    5. Service Using Http Client
    6. Service Imports
    7. The Observable object type
    8. What does an Observable Object do?
    9. Making a Basic HTTP GET Call
    10. Using the Service in a Component
    11. The PeopleService Client Component
    12. Client Component Code Review
    13. Importing Observable Methods
    14. Enhancing the Service with .map() and .catch()
    15. Using .map()
    16. Using .catch()
    17. Using toPromise()
    18. GET Request
    19. GET Request with Options
    20. POST Request
    21. POST Request Example
    22. Reading HTTP Response Headers
    23. Summary

    Python for Data Analysis – NumPy

    1. What is a Single Page Application (SPA)
    2. SPA Workflow
    3. Traditional Web Application Capabilities
    4. Single Page Application Advantages
    5. SPA and Traditional Web Sites
    6. SPA Challenges
    7. Implementing SPA's Using Angular 4
    8. Simple SPA Using Visibility Control
    9. SPA Using Angular Components
    10. SPA with Angular Components - Switching
    11. SPA with Angular Components - The Displayed Component
    12. Implement SPA Using an Angular Component Router
    13. Summary
    Day 5 - Pipes and Data Formatting, The Angular Component Router, Angular Animations, Build and Dependency Management

    Pipes and Data Formatting

    1. What are Pipes?
    2. More on Pipes
    3. Using a Built-in Pipe
    4. Built-In Pipes
    5. Using Pipes in HTML
    6. Chaining Pipes
    7. Using Pipes in JavaScript
    8. Some Pipe Examples
    9. Decimal Pipe
    10. Currency Pipe
    11. Custom Pipes
    12. Using Custom Pipes
    13. A Filter Pipe
    14. A Sort Pipe
    15. Pipe Category: Pure and Impure
    16. Pure Pipe Example
    17. Impure Pipe Example
    18. Summary

    The Angular Component Router

    1. Routing and Navigation
    2. The Component Router
    3. Traditional Browser Navigation
    4. Component Router Terminology
    5. Setting up the Component Router
    6. Local URL Links
    7. Browser pushState and
    8. Routes
    9. The app.routes.ts File
    10. Bootstrapping Routing in Main.ts
    11. A Basic App With Routing
    12. App Routes
    13. App Component
    14. Programmatic Navigation
    15. Basic Navigation
    16. Passing Data During Navigation
    17. Creating Routes with Route Parameters
    18. Navigating with Route Parameters
    19. Using Route Parameter Values
    20. Retrieving the Route Parameter Synchronously and Asynchronously
    21. Query Parameters
    22. Query Parameters - queryParams
    23. Query Parameters - Navigation
    24. Retrieving Query Parameters Asynchronously
    25. Problems with Manual URL entry and Bookmarking
    26. Fixing Manual URL entry and Bookmarking
    27. Summary

    Angular Animations

    1. Introduction
    2. Animating a simple transition
    3. Animation state and styles
    4. Transitions and timing
    5. Triggering the animation
    6. Using wildcard state with multiple transition states
    7. Animating entering and leaving a view
    8. Multiple animation triggers
    9. Animation callbacks
    10. Complex animation sequences
    11. Parallel animation using group() function
    12. Sequential vs parallel animations
    13. Reusable animations
    14. Route transition animations

    Build and Dependency Management

    1. Introduction
    2. Bower Package Manager
    3. Managing Packages Using Bower
    4. Using Bower Packages
    5. Grunt Build Manager
    6. Installing Grunt Components
    7. Writing a Grunt Build Script
    8. Running Grunt
    9. Running JSHint Task
    10. Compiling Less Files
    11. Compressing CSS Files
    12. Gulp Build Manager
    13. Gulp vs. Grunt
    14. Installing Gulp Components
    15. Writing a Build Script
    16. Running Gulp
    17. Compiling Less Files
    18. Summary
    Our Training Methodology
    Your Instructor
    Thayanithy Jegan
    CTO & Co-Founder of Thulija Technologies,
    Certified Trainer and Consultant

    A seasoned technology professional with over 17 years of industry experience as a software developer, solutions architect and technology consultant for major organizations.
    Thayanithy Jegan has trained executives and developers in companies such as Maxis, IFCA, SWIFT, PSDC, DHL, Standard Chartered, Infineon Technologies, Siemens and Bank Negara to name a few to break into various technology stacks and as well as data science, big data, and artificial intelligence.
    He has led major projects with clients such as Suruhanjaya Syarikat Malaysia (SSM), MYCOID, Kementerian Kerja Raya, Ministry of Education (MOE), Universiti Malaya, Perfisio Solutions, Kementerian Perdagangan Antarabangsa dan Industri, amongst others. He has also served as a Consultant for MIMOS Berhad, a Research and Development organisation that functions as an advisor to the Malaysian Government on technologies, policies and strategies relating to IT.
    Program Key Highlights

    40 hours of Remote Online Learning
    80 Additional Self Learning Hours
    12 Live Hands-on Projects
    Certified by International Body
    Mentorship with Industry Experts
    Designed for Beginners & Professionals

    Get Professionally Certified

    Upon successfully completing this program, participants will be awarded the Professional Certification in Python Data Science by International Council for Technology Certifications (ICTC).
    This award is a validation to the efforts taken to master the domain expertise that will set you apart from your competition.
    Be a part of the global network of data science professionals and join the community across sectors.
    Get in Touch With Us Today!

    This training program is suitable for anyone who intends to enter into the field of Software Development. This program is being conducted in Malaysia and can be joined by anyone, anywhere in the world remotely.
    Program Fee

    RM 3,700.00

    One-time fee. One year access to course materials.

    Please fill in the form and a Program Advisor will reach out to you. You can also reach out to us at info@thulija.com or +60123661502
    Contact us on Whatsapp for more enquiries