Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Rise with Angular
19 August, 2017
Rise Mumbai
Hardik Pithva
Frontend Engineer
Day outline
● Angular
○ Architecture
○ Application Structure
○ Setup
● Typescript
○ Features
○ TS to JS
○ Demo
● Movie App...
What is Angular?
● Ground-up rewrite of AngularJS
● TypeScript-based open-source platform
● Component-based architecture
●...
It Is Just...
Features
● Component & Directives
● Templates
● Services
● Databinding
● Pipes
● Cross Platform
○ PWA
○ Native
○ Desktop
●...
● Hierarchy of components as
it’s component-based
● "[ ]" for property binding,
● "( )" for event binding
● TypeScript
● R...
Architecture
youtu.be/OrW5JBsSLwA
Modules
{}
{} {}
● Modular
● a.k.a. Angular modules /
NgModules.
Components
Templates
Property Binding
Bind to custom HTML attrs.
Event Binding
Delegate methods<>
<><><>
Directives
Component : a directive with a template
Structural : a directive that changes DOM layout by adding or removing ...
Data binding
<> {}
Metadata
<> {}
Services are :
injected to components
provided to components
or module
Services
{} {} {}
Dependency injection
{}
{}
<>{} {}
● Modules
● Components
● Templates
● Metadata
● Data binding
● Directives
● Services
● DI
What is TypeScript?
● Open source programming language by Microsoft
● Strict superset of JavaScript
● Compatibility with J...
TypeScript
ES5 ES2015 ES7 TypeScript
● Types
● Interfaces
● Annotations / Decorators
Typescript vs. ES2015
Features
● Basic Types
● Interfaces
● Classes
● Functions
● Generics
● Enums
● Symbols
● Iterators and Generators
● Triple...
Demo time…
“My favorite feature is that the type system
mimics the actual JS spec as well as the
common JS practices in the community...
Application structure
● app
○ core
○ components
○ shared
● [root-files]
<project root>
app
core
core.module.ts
exception.s...
Setup with SystemJS
Prerequisites
nodejs.org/en/download code.visualstudio.com/download
Configuration files
● package.json
○ identifies npm package dependencies for the project.
● tsconfig.json
○ defines how th...
Setup with CLI
goo.gl/8caJaL
Setup
Installation
Create app
Create app with default style file as .SCSS
Run app
Movie App
Resources
● movies.json
bit.ly/ng-movies
● styles
bit.ly/ng-movie-styles
Deploy
Setup
Compile the app
Install firebase tool
Initialize project (App root directory)
Deploy project
What’s new in v4.x.x?
youtu.be/fE7pxxxbFmI
v4.x.x
● Smaller & Faster
● Enhanced *ngIf and *ngFor
● TypeScript 2.1 and 2.2 compatibility
● Source Maps for Templates
●...
Enhanced *ngIf and *ngFor
● Use an if/else style syntax, and assign local variables such as when
unrolling an observable.
Thank You!
Hardik Pithva
@hardikpthv
Get the content
● onlineedu.in/rise-with-ng
● goo.gl/6YwTWx
● github.com/online-edu/movie-app
Looking for training / mentorship?
Contact me :
@hardikpthv
hardikpthv@gmail.com
Rise with angular
Rise with angular
Rise with angular
Rise with angular
Rise with angular
Upcoming SlideShare
Loading in …5
×

Rise with angular

103 views

Published on

Get started with Angular and deploy it to Firebase

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Rise with angular

  1. 1. Rise with Angular 19 August, 2017 Rise Mumbai Hardik Pithva Frontend Engineer
  2. 2. Day outline ● Angular ○ Architecture ○ Application Structure ○ Setup ● Typescript ○ Features ○ TS to JS ○ Demo ● Movie App ○ Display list of movies ○ Deploy app to firebase
  3. 3. What is Angular? ● Ground-up rewrite of AngularJS ● TypeScript-based open-source platform ● Component-based architecture ● Web, Mobile and Desktop ● Mobile native apps
  4. 4. It Is Just...
  5. 5. Features ● Component & Directives ● Templates ● Services ● Databinding ● Pipes ● Cross Platform ○ PWA ○ Native ○ Desktop ● Universal ● CLI ● Accessibility
  6. 6. ● 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
  7. 7. Architecture youtu.be/OrW5JBsSLwA
  8. 8. Modules {} {} {} ● Modular ● a.k.a. Angular modules / NgModules.
  9. 9. Components
  10. 10. Templates Property Binding Bind to custom HTML attrs. Event Binding Delegate methods<> <><><>
  11. 11. 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
  12. 12. Data binding <> {}
  13. 13. Metadata <> {}
  14. 14. Services are : injected to components provided to components or module Services {} {} {}
  15. 15. Dependency injection {}
  16. 16. {} <>{} {} ● Modules ● Components ● Templates ● Metadata ● Data binding ● Directives ● Services ● DI
  17. 17. What is TypeScript? ● Open source programming language by Microsoft ● Strict superset of JavaScript ● Compatibility with JavaScript ● Designed for development of large applications.
  18. 18. TypeScript ES5 ES2015 ES7 TypeScript
  19. 19. ● Types ● Interfaces ● Annotations / Decorators Typescript vs. ES2015
  20. 20. Features ● Basic Types ● Interfaces ● Classes ● Functions ● Generics ● Enums ● Symbols ● Iterators and Generators ● Triple-Slash Directives ● Decorators
  21. 21. Demo time…
  22. 22. “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
  23. 23. 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
  24. 24. Setup with SystemJS
  25. 25. Prerequisites nodejs.org/en/download code.visualstudio.com/download
  26. 26. 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
  27. 27. Setup with CLI goo.gl/8caJaL
  28. 28. Setup Installation Create app Create app with default style file as .SCSS Run app
  29. 29. Movie App
  30. 30. Resources ● movies.json bit.ly/ng-movies ● styles bit.ly/ng-movie-styles
  31. 31. Deploy
  32. 32. Setup Compile the app Install firebase tool Initialize project (App root directory) Deploy project
  33. 33. What’s new in v4.x.x? youtu.be/fE7pxxxbFmI
  34. 34. v4.x.x ● Smaller & Faster ● Enhanced *ngIf and *ngFor ● TypeScript 2.1 and 2.2 compatibility ● Source Maps for Templates ● Angular Universal ● Packaging Changes
  35. 35. Enhanced *ngIf and *ngFor ● Use an if/else style syntax, and assign local variables such as when unrolling an observable.
  36. 36. Thank You! Hardik Pithva @hardikpthv
  37. 37. Get the content ● onlineedu.in/rise-with-ng ● goo.gl/6YwTWx ● github.com/online-edu/movie-app
  38. 38. Looking for training / mentorship? Contact me : @hardikpthv hardikpthv@gmail.com

×