Angular, the New Angular JS
0 likes208 views
The document provides an overview of Angular, highlighting its core concepts, differences from AngularJS, and major changes from versions 2 to 6. It covers essential topics such as lifecycle methods, TypeScript, RxJS, and Angular CLI, along with examples and demonstrations of Angular applications. Additionally, it outlines the future developments of Angular, specifically the introduction of the Ivy rendering engine.
Angular, the New Angular JS
- 1. Angular, the new AngularJS By Matthew Gardner
- 2. Matthew Gardner Frontend Developer ● Been with Kenzan for 4 years ● In free time I enjoy playing the guitar and listening to music ● Have been experimenting with Angular since RC stage ● Created a website for my mom in Angular v2 ● Have been developing an Angular app using spotify API
- 3. Kenzan ▪ Full Service Consulting Firm ▪ Architecture, front and back end development, business analysis and DevTest. ▪ Cloud Virtualization Experts And Enablers ▪ AWS, Netflix stack, Kubernetes, Istio, enterprise architecture and beyond. ▪ DevOps Leadership ▪ Platform builds, continuous delivery and scalable resourcing.
- 4. What we will cover today ▪ Differences between Angular and AngularJS ▪ What is Angular? ▪ Core concepts of Angular ▪ Major changes from Angular v2 - v6 ▪ Life cycle methods ▪ Brief overview of TypeScript ▪ Brief overview of RxJS ▪ Configuration to Angular ▪ Angular CLI ▪ What is next for Angular ▪ Demo of Angular spotify app and site for my mom
- 5. Examples of differences between Angular and AngularJS
- 6. AngularJS vs Angular two way data binding AngularJS Angular https://codepen.io/mgarnder/pen/jpZGmP - AngularJs https://codepen.io/mgarnder/pen/KBQXRM - Angular
- 7. AngularJS vs Angular Services AngularJS Angular https://codepen.io/mgarnder/pen/djdZvB - AngularJS https://github.com/mrgardner/Angular2ServiceExample - Angular
- 8. AngularJS vs Angular Components AngularJS Angular https://codepen.io/mgarnder/pen/oMEqGr - AngularJS https://codepen.io/mgarnder/pen/KBQoeQ - Angular
- 10. What is Angular? ▪ A completely rewritten framework based on some of the concepts in AngularJS ▪ Does not include concept of “scope” or “controllers” instead it uses a hierarchy of components ▪ Modularity ▪ Typescript ▪ Asynchronous template compilation
- 11. Main Features of Angular ▪ Cross Platform ▪ Speed and Performance ▪ Productivity ▪ Full Development story
- 12. Cross Platform ▪ Progressive Web Apps ▪ Allows developer to use modern web platforms to deliver an app-like experience ▪ Native ▪ Build native mobile apps with strategies from Cordova, Ionic, or NativeScript ▪ Desktop ▪ Create desktop app on Mac, Windows, and Linux
- 13. Speed and Performance ▪ Code Generation ▪ Angular turns the templates into highly optimized Javascript code ▪ Universal ▪ Serve the first view of your app on Node.JS, .NET, PHP, and other servers ▪ Code Splitting ▪ Angular apps load quicker with new Component Router which only loads code required to render
- 14. Productivity ▪ Templates ▪ Create UI views with ease ▪ Angular CLI ▪ Command line tool that allows you to create your app, create components, test, and serve your app ▪ IDEs ▪ Code completion, error messages, and other feedback from popular editors
- 15. Full Development Story ▪ Testing ▪ Has Karma built into framework for Unit tests and Protractor for End to End tests ▪ Animation ▪ Angular library that allows you to add simple or complex animation to your app ▪ Accessibility ▪ Create accessible apps with AIRA-enabled components, developer guides, and built-in a11y test infrastructure
- 16. Core Concepts of Angular
- 17. What is two way data binding ▪ When properties in the model gets updated it is also updated in the UI ▪ When the UI gets updated, the changes get propagated back to the model ▪ One of the biggest features in Angular and AngularJS
- 18. Example of two way data binding
- 19. Ng template ▪ Is an Angular template ▪ Is used in Angular under the hood when using ▪ *ngFor ▪ *ngIf ▪ *ngSwitch ▪ Can use ng container to attach a structural directive to a section of the page, without having to create an extra element just for that.
- 21. Guards ▪ Part of Angular Router package ▪ Navigation guard to protect routes ▪ Four types of guards ▪ CanActivate ▪ Whether of not the route can be activated ▪ CanActivateChild ▪ Whether of not the child route can be activated ▪ CanDeactivate ▪ Whether or not the route can be deactivated ▪ CanLoad ▪ Whether or not the route can be loaded
- 23. Event Emitters ▪ Can emit custom events synchronously or asynchronously ▪ When event is emitted it returns an Observable ▪ Get the value from the event emitter by subscribing to the instance
- 25. Major changes from Angular v2-v6
- 26. Major changes from v2-v6 ▪ Updates to work with new versions of TypeScript ▪ Creation of new view engine ▪ Improved file sizes and application speeds ▪ Moving from SystemJS to Webpack
- 27. Major changes in v6 ▪ Angular Elements Support ▪ Allows the developer to create and angular component as a web component that can be used in any application without the angular framework ▪ Service Worker Support ▪ Support was first introduced in v5 but in v6 it ships with more bug fixes and the configuration of navigation URLs within service workers ▪ <template> was replaced with <ng-template> ▪ I18n ▪ Runtime rendering so you do not have to build one application per locale ▪ Introduced third rendering engine Ivy ▪ Can test out the ivy engine with v6 ▪ Should have a more complete version in next major release ▪ ngModelChanges ▪ Values are now emitted after the value is updated from the form control
- 28. Major changes in v6 ▪ Bazel Compiler Support ▪ A tool that automates software builds and tests ▪ Similar to other tools such as Make, Ant, Maven, Gradle, and more ▪ RxJS 6.0 support ▪ Tree shaking ▪ New way to define an injectable service directly in the @Injectable decorator by adding providedIn: ‘root’ ▪ Webpack v4
- 30. Lifecycle methods ▪ ngOnChanges() ▪ Called when Angular set data-bound input properties ▪ ngOnInit() ▪ Called after Angular first displays data-bound properties ▪ ngDoCheck() ▪ Act and detect changes in Angular that won’t act upon on its own ▪ ngAfterContentInit() ▪ Called after components view is ready
- 31. Lifecycle methods Con’t ▪ ngAfterContentChecked() ▪ Called after Angular checks content projected onto view ▪ ngAfterViewInit() ▪ Called after component and child view are intialized ▪ ngAfterViewChecked() ▪ Called after component and child views are checked ▪ ngOnDestroy() ▪ Called just before Angular destroys the component or directive
- 33. What is TypeScript ▪ Developed by Microsoft ▪ A typed superset of Javascript that compiles into plain Javascript ▪ Allows developers to add types to variables ▪ Such as defining a variable to be of type string, array, object, boolean, number, etc
- 35. Overview of RxJS
- 36. Observables (RxJS) ▪ Reactive Extensions for JavaScript (RxJS) ▪ Allow you to work with asynchronous data streams ▪ Asynchronous - when you call a function and is notified with a callback when results are available ▪ Data - information that could be numbers, strings, or objects ▪ Streams - sequences of data that are made available over time ▪ You represent asynchronous data streams using observable sequences
- 39. Angular Configurations ▪ Angular.json is the configuration file ▪ Add third part styles, scripts, and assets ▪ Testing ▪ Linting
- 40. Angular CLI
- 41. Angular CLI ▪ A command line interface that scaffolds and builds Angular apps ▪ Can be used to create ▪ Apps ▪ Components ▪ Services ▪ Guards ▪ Pipes ▪ And more
- 42. How to use Angular CLI ▪ First you need to install Angular CLI with npm install -g @angular/cli ▪ Now to use Angular CLI ▪ ng new <app-name> ▪ ng g component <component-name> ▪ ng g service <service-name> ▪ ng g guard <guard-name> ▪ ng g pipe <pipe-name>
- 43. Example output for creating a new app
- 44. Example output for creating a pipe
- 45. What is next for Angular?
- 46. What is next for Angular ▪ The Angular team is currently working on the third render engine Ivy ▪ Ivy uses two major concepts: 1. Tree Shaking a. Removes unused code to result in smaller bundles and faster load times 2. Locality a. Compiles one file at a time b. It only looks at a component and its template not its dependencies
- 47. Demos
- 48. Demos ▪ Angular v2 App that I made for my mom when she was running for town council ▪ Angular v6 app that I have been working on that uses the Spotify API ▪ Created own shuffler ▪ Created filter to detect and remove duplicate tracks ▪ Able to play full-length spotify tracks in the browser with Spotify’s playback SDK
- 49. Topics We have covered ▪ Differences between Angular and AngularJS ▪ What is Angular? ▪ Core concepts of Angular ▪ Major changes from Angular v2 - v6 ▪ Life cycle methods ▪ Brief overview of TypeScript ▪ Brief overview of RxJS ▪ Configuration to Angular ▪ Angular CLI ▪ What is next for Angular ▪ Demo of Angular spotify app and site for my mom
- 50. Questions? 50
- 52. Resources ▪ https://angular.io/ ▪ https://www.typescriptlang.org/ ▪ http://es6-features.org/#Constants ▪ https://www.learnrxjs.io/ ▪ https://bazel.build/
- 53. Codepen links ▪ https://codepen.io/mgarnder/pen/jpZGmP ▪ AngularJS two way data binding example ▪ https://codepen.io/mgarnder/pen/KBQXRM ▪ Angular two way data binding example ▪ https://codepen.io/mgarnder/pen/djdZvB ▪ AngularJS service example ▪ https://github.com/mrgardner/Angular2ServiceExample ▪ Angular service example
- 54. Codepen links Con’t ▪ https://codepen.io/mgarnder/pen/oMEqGr ▪ AngularJS component example ▪ https://codepen.io/mgarnder/pen/KBQoeQ ▪ Angular component example ▪ https://github.com/mrgardner/CustomCounter ▪ Angular event emitter example ▪ https://github.com/mrgardner/AngularGuardExample ▪ Angular guard example