Tweet
Tweet

Slide 1

Slide 1 text

Rise with Angular 19 August, 2017 Rise Mumbai Hardik Pithva Frontend Engineer

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Day outline ● Angular ○ Architecture ○ Application Structure ○ Setup ● Typescript ○ Features ○ TS to JS ○ Demo ● Movie App ○ Display list of movies ○ Deploy app to firebase

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

What is Angular? ● Ground-up rewrite of AngularJS ● TypeScript-based open-source platform ● Component-based architecture ● Web, Mobile and Desktop ● Mobile native apps

Slide 6

Slide 6 text

It Is Just...

Slide 7

Slide 7 text

Features ● Component & Directives ● Templates ● Services ● Databinding ● Pipes ● Cross Platform ○ PWA ○ Native ○ Desktop ● Universal ● CLI ● Accessibility

Slide 8

Slide 8 text

● Hierarchy of components as it’s component-based ● "[ ]" for property binding, ● "( )" for event binding ● TypeScript ● Reactive programming support using RxJS Angular vs. AngularJS ● $scope, $rootScope or controllers ● ng-model, ng-bind, etc ● ng-click, ng-change, etc ● JavaScript or ES6 ● No support

Slide 9

Slide 9 text

Architecture youtu.be/OrW5JBsSLwA

Slide 10

Slide 10 text

Modules {} {} {} ● Modular ● a.k.a. Angular modules / NgModules.

Slide 11

Slide 11 text

Components

Slide 12

Slide 12 text

Templates Property Binding Bind to custom HTML attrs. Event Binding Delegate methods <> <> <> <>

Slide 13

Slide 13 text

Directives Component : a directive with a template Structural : a directive that changes DOM layout by adding or removing the elements Attribute : a directive that change the appearance/behavior of an element *ngIf ngModel

Slide 14

Slide 14 text

Data binding <> {}

Slide 15

Slide 15 text

Metadata <> {}

Slide 16

Slide 16 text

Services are : injected to components provided to components or module Services {} {} {}

Slide 17

Slide 17 text

Dependency injection {}

Slide 18

Slide 18 text

{} <> {} {} ● Modules ● Components ● Templates ● Metadata ● Data binding ● Directives ● Services ● DI

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

What is TypeScript? ● Open source programming language by Microsoft ● Strict superset of JavaScript ● Compatibility with JavaScript ● Designed for development of large applications.

Slide 21

Slide 21 text

TypeScript ES5 ES2015 ES7 TypeScript

Slide 22

Slide 22 text

● Types ● Interfaces ● Annotations / Decorators Typescript vs. ES2015

Slide 23

Slide 23 text

Features ● Basic Types ● Interfaces ● Classes ● Functions ● Generics ● Enums ● Symbols ● Iterators and Generators ● Triple-Slash Directives ● Decorators

Slide 24

Slide 24 text

Demo time…

Slide 25

Slide 25 text

“My favorite feature is that the type system mimics the actual JS spec as well as the common JS practices in the community very closely, and so it feels very natural to use.” Miško Hevery

Slide 26

Slide 26 text

Application structure ● app ○ core ○ components ○ shared ● [root-files] app core core.module.ts exception.service.ts|spec.ts movies movie movie.component.ts|html|css|spec.ts shared movie-button.ts|html|css|spec.ts movie.model.ts movie.service.ts|spec.ts movies.component.ts|html|css|spec.ts movies.module.ts movies-routing.module.ts shared shared.module.ts Init-caps.pipe.ts|spec.ts seasons season … shared ... app.component.ts|html|css|spec.ts app.module.ts app-routing.module.ts main.ts index.html

Slide 27

Slide 27 text

Setup with SystemJS

Slide 28

Slide 28 text

Prerequisites nodejs.org/en/download code.visualstudio.com/download

Slide 29

Slide 29 text

Configuration files ● package.json ○ identifies npm package dependencies for the project. ● tsconfig.json ○ defines how the TypeScript compiler generates JavaScript from the project's files. ● systemjs.config.js ○ provides information to a module loader about where to find application modules, and registers all the necessary packages. bit.ly/ng-config-systemjs

Slide 30

Slide 30 text

Setup with CLI goo.gl/8caJaL

Slide 31

Slide 31 text

Setup Installation Create app Create app with default style file as .SCSS Run app

Slide 32

Slide 32 text

Movie App

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

Resources ● movies.json bit.ly/ng-movies ● styles bit.ly/ng-movie-styles

Slide 36

Slide 36 text

Deploy

Slide 37

Slide 37 text

Setup Compile the app Install firebase tool Initialize project (App root directory) Deploy project

Slide 38

Slide 38 text

What’s new in v4.x.x? youtu.be/fE7pxxxbFmI

Slide 39

Slide 39 text

v4.x.x ● Smaller & Faster ● Enhanced *ngIf and *ngFor ● TypeScript 2.1 and 2.2 compatibility ● Source Maps for Templates ● Angular Universal ● Packaging Changes

Slide 40

Slide 40 text

Enhanced *ngIf and *ngFor ● Use an if/else style syntax, and assign local variables such as when unrolling an observable.

Slide 41

Slide 41 text

Thank You! Hardik Pithva @hardikpthv

Slide 42

Slide 42 text

Get the content ● onlineedu.in/rise-with-ng ● goo.gl/6YwTWx ● github.com/online-edu/movie-app

Slide 43

Slide 43 text

Looking for training / mentorship? Contact me : @hardikpthv [email protected]