Rise with Angular

Find Google Slides @ https://bit.ly/rise-with-ng

Transcript

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