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

• 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

• 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

• 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

• 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 ECMAScript in Chrome
• Deep dive into Chrome developer tools: Elements, Source, Network, Application
• Deploying quality code – Unit testing ECMAScript

• 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 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

• 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

• 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.

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

• 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 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.

• 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.

• 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.

• 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 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.

• 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.

• 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.