Get started with Angular and deploy it to Firebase

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

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

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

6. It Is Just...

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

8. ● 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

9. Architecture
youtu.be/OrW5JBsSLwA

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

11. Components

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

13. 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
<movie> *ngIf ngModel

14. Data binding
<> {}

15. Metadata
<> {}

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

17. Dependency injection
{}

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

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

21. TypeScript
ES5 ES2015 ES7 TypeScript

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

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

24. Demo time…

25. “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

26. Application structure
● app
○ core
○ components
○ shared
● [root-files]
<project root>
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

27. Setup with SystemJS

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

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

30. Setup with CLI
goo.gl/8caJaL

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

32. Movie App

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

36. Deploy

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

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

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

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

41. Thank You!
Hardik Pithva
@hardikpthv

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

43. Looking for training / mentorship?
Contact me :
@hardikpthv
hardikpthv@gmail.com