Call +65 6100 0613

Instructor-Led Classroom Adult Training in Singapore - Learn New Skills to Enhance Your Employability from our SkillsFuture Courses

Full Angular JS 4 Course

This is a two day full course on Angular JS 4. Day 1 was basic Angular JS 4, and day 2 is advanced JS2. Angular JS 4 was designed by Google to address challenges programmers face building single-page applications.


The Topics include:

  • What is Angular JS?
  • Setting up an Angular template
  • Creating a component
  • Displaying data
  • Working with events
  • Using two-way data binding
  • Creating a subcomponent
  • Using the built-in HTTP module
  • Using the built-in router module
  • Revisiting Directives
  • RxJS and Observables
  • Component, Services and Routing
  • Angular, MongoDB and Express
  • Automating Angular Workflow
  • Automated Testing in Angular
  • Deploying Angular App to Heroku


Click here to submit SkillsFuture Credit for Individual

SSG WSG SkillsConnect WDA Absentee Payroll for Company

Course Code: CRS-N-0035406

Course Booking

$498.00

Course Date

Course Time

* Required Fields

Course Cancellation/Reschedule Policy

We reserve the right to cancel or re-schedule the course due to unforeseen circumstances. If the course is cancelled, we will refund 100% to participants.
Note the venue of the training is subject to changes due to class size and availability of the classroom.
Note the minimal class size to start a class is 3 Pax.

Course Details

Day 1

Module 1 - TypeScript Overview

  • ES6 & TypeScript
  • Static Typing
  • Constants 
  • Block Variables
  • Template Strings
  • Arrow Functions
  • Spread parameters
  • Rest parameters
  • Destructuring 
  • Classes
  • Inheritance 
  • Interfaces
  • Modules
  • Decorators

Module 2 - Architecture Overview

  • Setting up AngularJS 4
  • Angular Hello World App
  • Booststrapping angular to index.html
  • Architecture Overview
  • Core concepts

Module 3. Modules, Components and Templates

  • Introduction to Modules
  • Importing Modules
  • What are components in Angular
  • Component templates
  • Component metadata
  • Component decorator
  • Decorator configurations
  • Component Events
  • Template Variables

Module 4. Data Binding

  • What is Data Binding
  • Property Events
  • Passing data into a Component
  • Passing data from parent component
  • Event Bindings
  • Passing Data Outside the Component
  • Parent receiving data from child
  • Two way Data Binding
  • Hands on Data Binding - creating movie details screen

Module 5. Directives and Pipes

  • What are Directives in Angular
  • Structural directives
  • Attribute directives
  • Built In Pipes
  • Hands on directives and pipes - updating movie details view
  • Using ngIf and ngClass directive
  • Using inbuilt pipes

Day 2

Module 6. Services and Dependency Injection

  • What are services
  • Writing our custom service to load of movies
  • What is Dependency Injection 
  • How Angular does dependency injection
  • Using dependency injection to load services
  • Hands on Services - load movies and then create a Grid View layout to display movies
  • Using ngFor directive
  • Creating grid layout

Module 7. Angular Routing

  • Angular 2 routing 
  • Route configuration
  • Route params
  • Hands on Routing - navigating between grid view and details view
  • Exercise - add route to navigate from details view to edit view

Module 8. Angular Forms & Validations

  • User input
  • Form Validations
  • Form States
  • Hands on Form Validation - adding a edit details form to update movie details

Module 9. Angular, MongoDB and Express

  • Creating tables using MongoDB
  • Adding and retrieving data from MongoDB
  • Creating API’s in Express to fetch data
  • Creating Services in Angular to connect to Mongo
  • Using services to load data from Mongo

Module 10. Deploying Angular App to Heroku

  • Publishing your app to Github
  • Heroku Toolbelt overview
  • Logging to Heroku inside toolbelt
  • Updating package.json and testing the app locally
  • Deploying app to Heroku

Who Should Attend

  • Web Developers who want to develop power web apps using Angular JS 2
  • Front End Web Developers who want to migrate from Angular JS 1 to Angular JS 2

Prerequisite

Basic knowledge of HTML, CSS and Javascript is assumed. You might want to attend the following HTML, CSS and Javascript courses.

Trainers

Full Stack Angular JS TrainerBreeze has around 10+ years of experience in UI and Front End Development. He has worked on various projects involving Single Page Applications, E-Commerce, Responsive Web Design, Dashboard Development, Website Development and Mobile App Development using tools like Angular.JS, Backbone.JS, Ractive.JS, Twitter Boostrap, Zurb Foundation, Gulp, SASS, LESS, Underscore.JS, JQuery, Mocha, Cucumber etc.

His project experience has given him the opportunity to work on various domains involving finance, telco, education, retail, healthcare, auto-mobile and tourism.

MEAN Stack DeveloperRakesh has around 4+ years of experience in UI and Front End Development. He has worked on various domains including Banking & Finance, Health Care and Media & Entertainment for developing Web applications and Mobile applications using technologies like Bootstrap,Angularjs,HTML5,CSS,JQuery,Javascript, Nodejs,Express,Gulp, Git,SASS,LESS,Karma,ES6 and Babel.

Angular JS TrainerLeon YEOH KENG WEI graduated from Nanyang Technological University in Computer Engineering and has more than 2 years of experience in the banking industry. He is also a freelancer in app development, primarily skilled in Python/Django backend and Ionic hybrid mobile app front end with social media integration.

Customer Reviews (3)

Will RecommendReview by Ryan
1. Do you find the course meet your expectation?
2. Do you find the trainer knowledgeable in this subject?
3. How do you find the training environment
Also provide power point slides file. (Posted on 10/12/2017)
Will RecommendReview by Tan Mei Ling, Evon
1. Do you find the course meet your expectation?
2. Do you find the trainer knowledgeable in this subject?
3. How do you find the training environment
Rakesh is a good trainer.
However, I think 2 days course is not adequate for a beginner level trainee. It will be good if can make it to 3 days course because 2 days is quite rushing.
Overall, it was a good learning experience. Thank you. (Posted on 7/31/2017)
Will RecommendReview by Mary Theresa heng
1. Do you find the course meet your expectation?
2. Do you find the trainer knowledgeable in this subject?
3. How do you find the training environment
Trainer has to manage his/her time well and also come prepared with working applications and be prepared on what to teach. (Posted on 3/13/2017)

Write Your Own Review

You're reviewing: Full Angular JS 4 Course

How do you rate this product? *

  1 star 2 stars 3 stars 4 stars 5 stars
1. Do you find the course meet your expectation?
2. Do you find the trainer knowledgeable in this subject?
3. How do you find the training environment
  • Reload captcha

Tags

Use spaces to separate Subjects. Use single quotes (') for phrases.

You May Be Interested In These Courses