1. NG Introduction

NgModule - https://github.com/angular/angular/blob/1cf5f5fa38ea672a972313049c9de2db6024441d/modules/%40angular/core/src/metadata/ng_module.ts

ComponentDecorator - https://github.com/angular/angular/blob/745e10e6d2ea9097b7ec650ae54cea91e3d193f2/modules/%40angular/core/src/metadata/directives.ts#L488

InputDecorator - https://github.com/angular/angular/blob/745e10e6d2ea9097b7ec650ae54cea91e3d193f2/modules/%40angular/core/src/metadata/directives.ts#L766

OutputDecorator - https://github.com/angular/angular/blob/745e10e6d2ea9097b7ec650ae54cea91e3d193f2/modules/%40angular/core/src/metadata/directives.ts#L837

Build-in Directives - https://github.com/angular/angular/tree/8578682dcfccc2ccccb68df37c3ebc738f98bf0e/modules/%40angular/common/src/directives

Bindings - https://github.com/angular/angular/blob/fcb4e664933f0b44c897e61be734581dfb10f088/modules/%40angular/compiler/src/template_parser/template_ast.ts

Transcript

2. About me Ilia Idakiev https://github.com/iliaidakiev/ ilia.idakiev@gmail.com
3. I like playing vinyl ...
4. Course Schedule 1. Introduction: Concepts of Angular 2. Introduction to TypeScript, Component Basics and Build-in Directives. Inputs and Outputs. 2. Functional Programming & Reactive Programming: Reactive Extensions for JS. 3. Angular CLI. Custom Directives. Renderer: Templates, TemplateRef, ViewContainerRef (Dynamic Component Loader - entryComponents) 4. Dependency Injection. Providers and Injectors: Services. 5. Change Detection and Component / Directive Lifecycle. Advanced Components: OnPush, Observable.fromEvent, Content Projection, ViewChildren, ContentChildren 6. Predictable Reactive State Management - NGRX 7. Forms and validations Pt. 1 8. Forms and validations Pt. 2 - Multi-Providers, Custom Controls, Template driven custom validators 9. Routing and Navigation. Lazy Loading. 10.Protecting Routes. Pipes. Angular 4 and beyond.
5. Course Organization • Presentation: Lecture / Code Overview / Live Coding ~ 1h • Exercise: Solving tasks / Answering Questions ~ 2h • Tasks & Lectures: Uploaded on • Solutions: Fork course repo and commit them to gain points
6. Today's Schedule 1. JavaScript - Quick Overview 2. The Evolution of JavaScript and the Web. 3. Concepts of Angular 2. 4. Things we should know before we start. 5. Creating components and using build-in directives.
7. JavaScript 1. High-level language 2. Weakly-typed (dynamic) 3. Interpreted
8. Interpreter vs Compiler
9. Interpreter • Doesn't do any processing on the program before execution • Translates (interprets) program code line by line and executes it • The only result is the output data
10. Compiler • Translates the program written in a high-level language to the machine language of a computer • Data is passed to the executable
11. V8 JavaScript Engine Is an open source JavaScript engine developed by The Chromium Project for the Google Chrome web browser. V8 compiles JavaScript to native machine code before executing it. The compiled code is additionally optimized (and re-optimized) dynamically at runtime.
12. Transpiler
13. Transpiler (compiler) An example of a transpiler is tsc (typescript compiler). It transpiles (compiles) TypeScript code into JavaScript A famous traspiler is
14. Why do we want our JavaScript code to be asynchronous?
15. JavaScript runs in a single thread
16. JavaScript Event Loop
17. The Evolution of JS and the Web.
18. The Evolution of JS and the Web. 1. ECMAScript 6 (ES2015) 2. Web Components 3. Web Workers 4. TypeScript
19. ECMAScript ECMAScript (ES) is a trademarked scripting-language specification standardized by Ecma International. The ECMAScript specification is a standardized specification of a scripting language developed by Brendan Eich of Netscape. Initially it was named Mocha, later LiveScript, and finally JavaScript.
20. ECMAScript 2015 (ES 6) ECMAScript 2015, was finalized in June 2015. It adds significant new syntax for writing complex applications.
21. Web Components Bring component-based software engineering to the World Wide Web • Allow us to write reusable widgets • The Component model allows encapsulation
22. Web Components • Custom Elements - APIs to define new HTML elements • Shadow DOM - Encapsulated DOM and styling, with composition • HTML Imports - Declarative methods of importing HTML documents into other documents • HTML Templates - The <template> tag, which allows documents to contain inert chunks of DOM
23. Web Workers A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page
24. TypeScript Developed by Microsoft, TypeScript is a strict superset of JavaScript, and adds optional static typing and class-based object- oriented programming to the language TypeScript is designed for development of large applications and (trans | com)piles to JavaScript. As TypeScript is a superset of JavaScript, any existing JavaScript programs are also valid TypeScript programs.
25. About Angular • It's Fast (5 times faster than Angular 1) • Uses Typescript • Supports server side pre-rendering (Angular Universal) • Most of our code and Angular can be configured to run in a Web Worker • Supports Lazy Loading • It has Native App Support (NativeScript)
26. Normal page request
27. Server side pre-rendering preboot.js - library to to help manage the transition of state (i.e. events, focus, data) from a server- generated web view to a client- generated web view
28. Angular Universal NodeJS Server ASP.NET Core Server
 Angular CLI support coming soon Current State: Merging Universal into Angular core
29. Angular CLI Command Line Interface for scaffolding Angular apps Beta
30. Concepts of Angular
31. Concepts • Directives (structural / attribute) - custom html tags / attributes that contain / add some logic. • Components (smart / dumb) - Directives with a View (template) • Component Tree - root component containing other components • Input and Output Properties - Sending data from parent to child component via Inputs and from child to parent via output. • Lifecycle - Special events that we can tap into. • Services - Communication and data manipulation channels
32. Components • Container (Smart) - Concerned with how things work.
 • Presentational (Dumb) - Concerned with how things look.
33. Angular Compilation Before rendering the app the HTML templates are converted to executable JavaScript by the Angular compiler.
 2. Instantiation 1. Parsing
34. Parser The parser starts reading each character from our templates. It instantiates the objects using special data structures. In their constructor the DOM element that they represent is created. They are all put into a Abstract Syntax Tree (AST).
35. Creating the DOM elements const el = document.createElement('...'); otherEl.appendChild(el)
36. Compilation • Just In Time (JIT) - Compiled at runtime in the browser when loading the application.
 
 *slower performance 
 *bigger application
 • Ahead Of Time (AOT) - Compiling at build time.
 
 *render the application immediately, without waiting to compile
37. JIT Compilation • Can't run minifier because of template bindings and interpolation
 • Eval is Evil
38. AOT Compilation • Can run minifier
 • Using script tag instead of eval
39. Things we should know before we start
40. NG Style Guide https://angular.io/styleguide
41. ES2015: arrow functions https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions
42. ES2015: let keyword https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/let
43. ES2015: for...of loop https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of
44. Module Loaders SystemJS - https://github.com/systemjs/systemjs Webpack - https://webpack.js.org
45. TypeScript Decorators Using Decorators we can annotate and modify classes and properties at design time.
 We can add both annotations and a meta-programming syntax for class declarations and members.
46. What is a decorator 1. A decorator is an expression 2. that evaluates to a function 3. that takes the target, name, and decorator descriptor as arguments 4. and optionally returns a decorator descriptor to install on the target object
47. TypeScript Decorators Decorators provide a way to Decorators are a stage 1 proposal for JavaScript and are available as an experimental feature of TypeScript (+ reflect-metadata library).
48. TypeScript Decorators Decorator can be attached to a class declaration, method, accessor, property, or parameter. Decorators use the form @expression, where expression must evaluate to a function that will be called at runtime with information about the decorated declaration.
49. TypeScript Decorators
50. TypeScript Documentation https://www.typescriptlang.org/docs/tutorial.html
51. TypeScript Playground https://www.typescriptlang.org/play/index.html
52. Angular Dependencies • core-js / es6-shim (https://unpkg.com/core-js@2.4.1/client/shim.min.js) • reflect-metadata (https://unpkg.com/reflect-metadata@0.1.3/Reflect.js) • zone.js (https://unpkg.com/zone.js/dist/zone.js) • RxJS (https://unpkg.com/rxjs) • systemjs / webpack (https://unpkg.com/systemjs@0.19.31/dist/system.js)
53. Angular App Main Structure • main.js - Bootstraps the app for the current platform • app.module.ts - Bootstraps the main component and its dependencies • app.component.ts - Main component. • app.component.html - Main component template.
54. Let's review the quick start app:
 
 https://github.com/angular/quickstart
55. NgModuleDecorator Overview https://github.com/angular/angular/blob/ 1cf5f5fa38ea672a972313049c9de2db6024441d/modules/%40angular/core/src/ metadata/ng_module.ts
56. Structuring Our App When components, directives, pipes, services belong together we should extract them to a separate module - Feature Module
57. Feature Modules
58. Core Feature Module Consider collecting numerous, auxiliary, single-use classes inside a core module to simplify the apparent structure of a feature module. 
 Only the root AppModule should import the CoreModule.
59. Core Feature Module
60. Shared Feature Module Declare components, directives, and pipes in a shared module when those items will be re-used and referenced by the components declared in other feature modules.
61. Shared Feature Module
62. ComponentDecorator Overview https://github.com/angular/angular/blob/ 745e10e6d2ea9097b7ec650ae54cea91e3d193f2/modules/%40angular/core/src/ metadata/directives.ts#L488
63. InputDecorator Overview https://github.com/angular/angular/blob/ 745e10e6d2ea9097b7ec650ae54cea91e3d193f2/modules/%40angular/core/src/ metadata/directives.ts#L766
64. OutputDecorator Overview https://github.com/angular/angular/blob/ 745e10e6d2ea9097b7ec650ae54cea91e3d193f2/modules/%40angular/core/src/ metadata/directives.ts#L837
65. Build-in Directives Overview https://github.com/angular/angular/tree/ 8578682dcfccc2ccccb68df37c3ebc738f98bf0e/modules/%40angular/common/src/ directives
66. Bindings Overview https://github.com/angular/angular/blob/ fcb4e664933f0b44c897e61be734581dfb10f088/modules/%40angular/compiler/src/ template_parser/template_ast.ts
67. Template reference variables • Using a hash (#) prefix we can defining a template variable. • We can use a template reference variable on the same element, on a sibling element, or on any child elements.
68. Questions ?