Front End Application

Development using Angular
 

Start your application development path with Angular
and power up your career today!


5 Days / 40 Hours / 17 Modules
+ 3 month coaching + 1 year eLearning access
Front End
Application Development
using Angular

Start your application
development path with
Angular and power up
your career today!

5 Days / 40 Hours / 17 Modules
+ 3 month coaching + 1 year eLearning access

Learn the fundamentals of Angular and kickstart your career in one of the hottest professions of the decade.

This course includes the fundamental Angular programming techniques such as lambdas, reading and manipulating csv files.
In this course, developers will learn to use Angular Directives and to create Angular Components and Services to develop applications based on the Model-View-Controller (MVC) architecture. Developers will also explore how to consume external APIs and data services and allow data editing by harnessing the power of web forms made with Angular.
By the end of this course, participants will set up working environment to have all the tools needed to start building Angular components with minimal effort. Participant will also have an understanding of TypeScript, a powerful typed superset of JavaScript that compiles to plain JavaScript.
Key Learning Outcomes

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

  • Turn your application into a SPA using routing
  • Bootstrap your Angular application
  • Create your own custom elements and handle events using directives
  • Use built-in services and create custom services
  • Create and use controllers
  • Participants will have an understanding of TypeScript, a powerful typed superset of JavaScript that compiles to plain JavaScript
  • In this course, developers will learn to use Angular Directives and to create Angular Components and Services to develop applications based on the Model-View-Controller (MVC) architecture.
  • Developers will also explore how to consume external APIs and data services and allow data editing by harnessing the power of web forms made with Angular.
Core Skills Areas Covered

Build Single Page Applications (SPA)

Use TypeScript to transfer to browser-supported JavaScript

Build Template and Module-driven forms

Utilize Pipes and built-in data formatting tools

Install necessary modules correctly using NPM

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 Front End Application Development using Angular program
    Day 1 - Introduction, Introduction to TypeScript, Introduction to Angular

    Introduction

    1. Overview of ES5
    2. Installing Node and NPM
    3. JavaScript Basic Syntax
    4. Detailing on ES5 problems
    5. JavaScript project creation using NPM
    6. Introduction to TypeScript
    7. TypeScript Environment Setup
    8. Basic Syntax
    9. Types, Variables and Operators
    10. Decision Making and Loops
    11. JavaScript Functions
    12. Lambda Expressions

    Introduction to TypeScript

    1. Classes and Objects
    2. Inheritance and Interface
    3. Generics
    4. Enums
    5. Number and Strings
    6. Arrays
    7. Tuples and Union
    8. Namespaces and Modules
    9. Decorators
    10. Ambients
    11. Mixins

    Introduction to Angular

    1. Angular CLI
    2. Why Angular
    3. Angular Features
    4. Installing and Using Angular CLI
    5. Creating the first Angular Project
    6. Architecture Overview of Angular
    7. New in Latest Version
    8. Summary
    Day 2 - Building with Components, Data and Event Binding , Introduction to Single Page Applications, Component Integration

    Building with Components

    1. Introducing the component
    2. Component Decorator Properties
    3. Template
    4. Inline Template
    5. Interpolation – Plain text
    6. Interpolation – Array
    7. Interpolation – Object
    8. Adding CSS
    9. Component Starter
    10. Integrating Bootstrap
    11. Summary

    Data and Event Binding

    1. Binding Syntax
    2. One-Way Binding
    3. Interpolation
    4. Property binding
    5. Interpolation vs Property Binding
    6. Class binding, Style binding
    7. Attribute binding
    8. Setting Element Properties
    9. Binding Events
    10. Template Reference Variables
    11. Two-Way Binding of Input Fields
    12. Summary

    Introduction to Single Page Applications

    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

    Component Integration

    1. Pass data from parent to child with input binding
    2. Intercept input property changes with a setter
    3. Intercept input property changes with ngOnChanges()
    4. Parent interacts with a child via local variable
    5. Parent calls an @ViewChild()
    6. Parent and children communicate via a service
    Day 3 - Spring REST Services, Spring Micro services

    Attribute Directive

    1. Introduction to Directives
    2. Directive Types
    3. Apply Styles using NgClass and NgStyle
    4. Applying Styles Directly
    5. Obsolete Directives and Property Binding
    6. Controlling Element Visibility
    7. Setting Image Source Dynamically
    8. Setting Hyperlink Source Dynamically
    9. Summary

    Structural Directives

    1. Adding and Removing Elements Dynamically
    2. Looping Using ngFor
    3. ngFor - Basic Syntax
    4. Creating Tables with ngFor
    5. ngFor Local Variables
    6. Swapping Elements with ngSwitch
    7. ngSwitch - Basic Syntax
    8. ngSwitch - Full Template Syntax
    9. Summary

    Template Driven Forms

    1. A Basic Angular Form
    2. Binding Input Fields
    3. Accessing the Form Object
    4. Binding the Form Submit Event
    5. The Submit Function
    6. Basic HTML5 Validation - "required" attribute
    7. Angular Validators
    8. Angular Validation State
    9. Displaying Form Validation State
    10. Displaying Field Validation State
    11. Disabling Submit when Form is Invalid
    12. Submitting the Form
    13. Binding to Object Variables
    14. Additional Input Types
    15. Checkboxes
    16. Select (drop down) Fields
    17. Rendering Options for Select (drop down)
    18. Date fields
    19. Radio Buttons
    20. 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. Introduction to FormBuilder
    15. Generating form controls with FormBuilder
    16. Injecting the FormBuilder service
    17. Generating form controls
    18. Simple form validation
    19. Dynamic controls using form arrays
    Day 4 - Pipes and Data Formatting, The Angular Component Router, Services and Dependency Injection, RxJS and Observables, HTTP Client

    Pipes and Data Formatting

    1. What are Pipes?
    2. Using a Built-in Pipe
    3. Chaining Pipes
    4. Some Pipe Examples
    5. Decimal Pipe, Currency Pipe
    6. Custom Pipes
    7. Using Custom Pipes
    8. A Filter Pipe
    9. A Sort Pipe
    10. Pipe Category: Pure and Impure
    11. Pure Pipe Example
    12. Impure Pipe Example
    13. 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. Basic Navigation
    7. Programmatic Navigation
    8. Passing Data During Navigation
    9. Creating Routes with Route Parameters
    10. Navigating with Route Parameters
    11. Using Route Parameter Values
    12. Retrieving the Route Parameter Synchronously
    13. Retrieving the Route Parameter Asynchronously
    14. Query Parameters
    15. Summary

    Services and Dependency Injection

    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 OnInit to Initialize Component Data
    8. Using a Shared Service Instance
    9. Dependency Injection and @Host
    10. Dependency Injection and @Optional
    11. Summary

    RxJS and Observables

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

    HTTP Client

    1. The Angular HTTP Client
    2. Importing Individual Providers into Services
    3. Service Using Http Client
    4. Service Imports
    5. What does an Observable Object do?
    6. Making a Basic HTTP GET Call
    7. Using the Service in a Component
    8. Importing Observable Methods
    9. Enhancing the Service with .map() and .catch()
    10. GET Request with Options
    11. POST Request
    12. Reading HTTP Response Headers
    13. Summary
    Day 5 - Modules, Internationalization (i18n), Angular Testing,

    Modules

    1. Understanding Core Module
    2. Feature Modules
    3. Shared Modules
    4. Lazy loading of modules
    5. Routes with Feature module
    6. Built-in Security contexts
    7. Using AOT Compilation
    8. Optimization and performance issues
    9. Auth Feature Module
    10. Cross module communication
    11. Protecting Lazy Loaded Routes

    Internationalization (i18n)

    1. Angular and i18n
    2. Setting up the locale of your app
    3. i18n pipes
    4. Template translations
    5. Mark text with the i18n attribute
    6. Help the translator with a description and meaning
    7. Translate text without creating an element

    Angular Testing

    1. Unit Testing Angular Artifacts
    2. Testing Tools
    3. Typical Testing Steps
    4. Test Results
    5. Jasmine Test Suites
    6. Jasmine Specs (Unit Tests)
    7. Expectations (Assertions)
    8. Matchers
    9. Examples of Using Matchers
    10. Using the not Property
    11. Setup and Teardown in Unit Test Suites
    12. Example of beforeEach and afterEach Functions
    13. Angular Test Module
    14. Example Angular Test Module
    15. Testing a Service
    16. Injecting a Service Instance
    17. Test a Synchronous Method
    18. Test an Asynchronous Method
    19. Using Mock HTTP Client
    20. Supplying Canned Response
    21. Testing a Component
    22. Component Test Module
    23. Creating a Component Instance
    24. The ComponentFixture Class
    25. Basic Component Tests
    26. The DebugElement Class
    27. Simulating User Interaction
    28. 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

    online-learning-2
    40 hours of Remote Online Learning
    learning-hours
    80 Additional Self Learning Hours
    hands-on
    12 Live Hands-on Projects
    certification
    Certified by International Body
    mentor
    Mentorship with Industry Experts
    industry
    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.
     
     



    READY TO KICKSTART YOUR CAREER?
    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