ECMAScript Programming & Angular 2-6 Development


Part 1: ECMAScript Programming

Duration: 2 Days


Objectives.

You will learn how to:

  • Transition from JavaScript to ECMAScript 6 (2015 and 2016)
  • Maximise reusability with modules, classes, and inheritance
  • Simplify asynchronous programming with Promises
  • Leverage ECMAScript server-side with Node.js (optional)
  • Build end-to-end enterprise applications using ECMAScript


Course Outline.

Introduction and Overview

  • Revisiting JavaScript history
  • Incorporating ECMAScript new versions and features
  • Mapping TC39 release stages
  • Moving ECMAScript to the server

Advanced JavaScript Techniques

  • Exploring JavaScript language features:
    • Programming with a weakly typed language
    • Exploiting JavaScript’s dynamic nature
    • Working with strings, numbers, dates, arrays
  • Developing Functional JavaScript Code:
    • Comparing function definitions vs. function expressions
    • Manipulating function callbacks
    • Passing functions as arguments
    • Immediately invoked function expressions
    • Understanding closures
  • Building JavaScript objects:
    • Coding object literals
    • Adding properties and methods to objects
    • Instantiating objects with constructor functions
    • Defining prototype methods
    • Serialising data with JSON
    • Requesting services with XMLHttpRequest

Transitioning to ECMAScript 2015

  • Writing ECMAScript that runs everywhere:
    • Transpiling ECMAScript with Traceur and Babel
    • Exploring transpiled code
    • Ensuring best practices with strict mode
  • Simplifying variables and strings:
    • Declaring block scope variables with let
    • Programming constants
    • Exploiting new string methods
    • Formatting output with template literals
  • Managing collections of data:
    • Taking advantage of new array methods
    • Enumerating collections with iterators
    • Manipulating data with sets and maps
    • Producing iterable data with generators and yield
  • Streamlining functional programming with ES6:
    • Making asynchronous programming easier with promises
    • Defining arrow functions
    • Passing arrow functions as callbacks

Exploiting ECMAScript 6 Object-Oriented Features

  • Classes and Inheritance:
    • Defining classes
    • Adding properties and methods to classes
    • Simulating private state with WeakMap
    • Creating unique property keys with symbols
    • Coding getters, setters and constructors
    • Extending classes with inheritance
  • Reusing JavaScript:
    • Defining modules
    • Exporting and importing classes and functions
    • Importing module functionality

Running ECMAScript Server-Side (optional)

  • Building applications for Node.js:
    • Installing Node.js
    • Setting up a Node.js development environment
    • Managing packages with npm
    • The build process with webpack
  • Web services:
    • Creating Node.js web applications with Express
    • Exposing RESTful services
    • Calling Node.js services

Debugging and Testing ECMAScript Applications

  • Debugging ECMAScript in Chrome
  • Deep dive into Chrome developer tools: Elements, Source, Network, Application
  • Deploying quality code - Unit testing ECMAScript


Part 2: Angular 2-6 Development

Duration: 3 Days


Objectives.

You will learn how to:

  • Create a complete modern Web application using Angular 6
  • Develop Angular 6 components using TypeScript, templates and decorator properties
  • Apply two-way data binding and capture virtual events
  • Extend Angular 6 Components, Structural directives and Attribute directives
  • Integrate with HTTP and REST API services, with promises, observables
  • Design unit tests and end-to-end tests for web applications with Jasmine and Protractor


Course Outline.

Introducing Angular 2-6

  • Benefits of Angular:
    • Why a component based / RESTful solution is the best way to build web applications. What's so great about Angular 2 3 4 5 6. Address issues with Angular 1.x continuing to be used.
  • Client-side and server-side rendering:
    • Introduce the concepts and importance of Isomorphic JavaScript.
  • Introduction to typed JavaScript:
    • Motivation for an improved JavaScript environment, brief discussion of TypeScript. Explanation as to why it is better to develop Angular 2 application in TypeScript. Also cover Object Literal Notation here (not specifically TypeScript but critical to Angular 2).
  • Angular 2 architectural overview:
    • Discuss the key components of an A2 application and show how they all fit together.
  • Configuring an Angular 2.0 App:
    • Describe the key steps in configuring the environment and explain the Bootstrap process.
  • Exercise:
    • Configure a Node JS environment to compile and run our application. Run the solution. Look at key features of the code

TypeScript enhancements to ES6 (ES7)

  • Typescript benefits:
    • Using TSC transpiler with Webpack to convert typescript to ES5
    • Adding type and interfaces to code for type checking and intellisense
    • Class declaration enhancements in typescript
    • Loading 3rd party definitely typed TSD files using the “typings” module
    • Creating and consume decorators
    • Taking advantage of async and await in JavaScript
    • Utilizing generic types in typescript
    • Using Typescript transpiler with command line and Visual Studio Code
  • Exercise:
    • Create a Typescript and Webpack project with NPM

Angular CLI

  • Kick-start your Web app with Angular CLI.  NodeJS,NPM and Webpack package dependencies.  Angular folder structure. Creating components in the CLI.
  • Exercise:
    • Download Angular CLI and create a skeleton Web project. Investigate Application module definition and structure

Component Basics

  • Defining and Exporting Classes:
    • Explore the creation of a Flight interface and a corresponding FlightComponent
  • Angular templates:
    • How component HTML is bound into components. Data-binding syntax. Multi-line templates. Built-in directives.
  • Defining Behaviours with Meta data:
    • Evolves from the template, discusses the selector and overviews some of the other things that can be described in the meta-data section.
  • Exercise:
    • Create a simple component to represent and display a passenger.

Working with repeating data

  • Introduce the NgFor and NgIf directives. Provide a table outlining the other directives
  • Exercise:
    • Evolve the previous exercise to display a list of passengers

Dependency Injection

  • Principles of dependency injection:
    • Explain the benefits and operation of DI.
  • Providers, Injectables and Constructors:
    • Discuss the 3 key elements in the implementation of Angular 2 DI.
  • Singletons and the Injection Hierarchy:
    • The component hierarchy and how dependencies my be provided at different levels in that hierarchy. Emphasise benefits of only injecting once in a “normal” application. Introduce the idea of a “service” component.
  • Life-Cycle:
    • Component life-cycle event handlers (may need to be moved to another chapter as not directly related to DI).
  • Exercise:
    • Create a PassengerService which provides a list of passengers.

Debugging and Testing

  • Introducing Jasmine - A simple test:
    • Demonstrate the basics of a Jasmine test. Then show examples of testing an Angular component.
    • Satisfying Angular Dependencies: Importing Angular components. Working with Mock Angular components. (I'm assuming that the development work on these components will yield some  documentation soon!).
  • Exercise:
    • Create a Jasmine unit test for the passenger component
  • E2E testing
    • E2E feature testing with Protractor and Selenium/WebDriver
  • Exercise:
    • E2E testing with Protractor
  • Debugging Techniques:
    • Overview of tips and tricks for working out why your Angular App sits their doing nothing!
  • Exercise:
    • Find bugs in provided code sample using Web Developer Tools and Batarangle.

Interacting with the User

  • Property and event bindings:
    • Review the property bindings we used in our earlier templates then examine invoking methods on the component by adding event bindings to templates.
  • Improving event handlers:
    • Pseudo key events and local template variables
  • Exercise:
    • Add a search capability (search code provided) to the passenger display component.E2E feature testing with Protractor and Selenium/WebDriver
    • Exercise E2E testing with Protractor. (This will help sell the course to project managers and Quality testing teams.

Data Binding

  • Two way bindings with ngModel
  • Validation and Feedback:
    • Using ngControl, ngForm and CSS to provide feedback on form validation
  • Exercise:
    • Create a form to  allow input of passengers. Bonus: adding ngControl and CSS.

The Component Router

  • The need for routing
  • Configuring a router:
    • Setting the base directive. Defining routes with @RouteConfig. Incorporating the router outlet into our template.
  • Passing data in route:
    • Use route and query parameters.
  • Exercise:
    • Wire up the routing for the app: Lists of flights, flight details, passengers and passenger details.

Communication with the Server

  • Overview of REST service:
    • Concepts of REST: use of Http methods.
  • Promises and Observables:
    • Using Promise and Observable to build robust asynchronous code
  • Fetching and parsing data:
    • The Http client object in use. Parsing JSON data. Error handling
  • Sending data to the server:
    • Explore Http.put and Http.post.
  • Exercise:
    • Update the PassengerService to fetch data from a REST service. Will require significant modification to existing code as we change to use Observable.

Extending Angular

  • Attribute Directives:
    • Examine attribute directives in more detail. Show how to create a custom attribute directive.
  • Structural Directives:
    • Examine structural directives in more detail. Show how to create a custom attribute directive.
  • Exercise:
    • Create an attribute directive. Bonus: create a structural directive.

My Course Notes

You will receive a full set of course notes and all supporting materials for your course. Hard Copy Delivered to your premises or Downloaded to a chosen device.
 

     OR  

To book this course please call +44 (0) 1444 410296 or email at Info@kplknowledge.co.uk

© Copyright 2019 KPL KnowledgeSolutionsWeb Design By Toolkit Websites