• 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-6 application in TypeScript
• Angular architectural overview:
– Discuss the key components of an Angular application and show how they all fit together
• Configuring an Angular 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 dependency injection
• 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
• 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
• 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 to the passenger display component.

• 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