Introduction to JavaScript, TypeScript and Angular

A 5-day crash course into front-end web development.

JavaScript

1. Include JavaScript in an HTML document

   Examples: alert-hi.html

2. Variables

   Examples: variable-scope.html

3. Operators

   Examples: operators.html

4. Conditional and Loop Statements

   Examples: if-statement.html, case-statement.html, loop-statements.html

5. Functions

   Examples: functions.html

6. Events

   Examples: events.html

7. Dialog Boxes

   Examples: dialog.boxes.html

8. User-Defined Objects

   Examples: object-1.html, object-2.html, object-with-method.html

9. Native Objects

   Examples: regex.html

10. Closures, Callbacks and Recursion

    Examples: closure-issue.html, closure-1.html, closure-2.html, recursion.html, for-for.html

11. Iteration structures

    Examples: iteration.html

12. Prototype

    Examples: prototype.html

13. Inheritance

    Examples: template-pattern.html

14. Document Object Model (DOM)

    Examples: dom-old-way.html, dom-inner-html.html

15. Error Handling

    Examples: throw.html, onerror.html

Demo Apps

• Phone book app with mocked data service phone-book
• Phone book app with example of async data service phone-book-data

TypeScript

1. Basic Types

   Examples: basic-types

2. Variable Declarations

   Examples: variable-declarations

3. Destructuring

   Examples: destructuring

4. Interfaces

   Examples: interfaces

5. Classes

   Examples: classes

6. Functions

   Examples: functions

7. Generics

   Examples: generics

8. Enums

   Examples: enums

9. Type Inference

   Examples: type-inference

10. Type Compatibility

    Examples: type-compatibility

11. Advanced Types

    Examples: advanced-types

12. Modules AND Namespaces

    Examples: modules, namespaces

13. Decorators

    Examples: decorators

14. Utility types Examples: utility-types

Demo Apps

• Phone book app based on namespaces in separated files phone-book
• Phone book app based on modules phone-book-modules

Angular

1. Attribute, class & style bindings

   Examples: user-inputs, emitter

2. Forms

   Examples: debounce, emitter, model vs template-driven

3. Pipes

   Examples: pipes, async-pipe

4. Custom Attribute Directive

   Examples: attribute-directive

5. HTTP Client

   Examples: observables-vs-promises, observables, subject

6. Resolving routes:

   Examples: resolver

7. Passing state through services:

   Examples: service-data

Demo Apps

• Phone book app phone-book
• HTTP base phone book app that retrieves contacts list from the server phone-book-http
• Router base phone book app phone-book-router
• Router base phone book app with child router outlet phone-book-router-children
• Router base phone book app that uses modulesphone-book-router-modules
• Router base phone book app that uses lazy-loaded modules phone-book-router-modules-lazy
• Router base phone book app that uses a named outlet phone-book-router-named-outlet

Testing with Angular

1. Dependency injection without mocking

   Examples: di-no-mock

2. Dependency injection with mocking

   Examples: di-with-mock

3. Different testing scenarios example

   Examples: test-pack

4. Protractor - End to end testing for Angular

   Examples: protractor

Useful links

Ttile	Link
Does it Mutate?	https://doesitmutate.xyz/
TypeScript Website	http://www.typescriptlang.org/
RxMarbles Interactive diagrams of Rx Observables	http://rxmarbles.com/
Angular Cheatsheet	https://angular.io/guide/cheatsheet
Angular API docs	https://angular.io/api
Global Events in Angular 2	http://stackoverflow.com/questions/34700438/global-events-in-angular-2
Angular CLI wiki	https://github.com/angular/angular-cli/wiki
Protractor	http://angular.github.io/protractor/

Author

Hristo Georgiev