Angular is a complete framework that combines declarative templates, dependency injection, end to end tooling, and integrated best practices in order to solve development challenges. Angular was completely rewritten from its predecessor AngularJS and allows developers to build their applications on web or mobile. Matthew Gardner explains how to setup a simple Angular app, diving into some of the concepts behind the framework and describe some of the key differences between Angular and AngularJS. Additionally, Matthew will showcase an Angular app which uses the Spotify API.

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

9. What is 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.

20. Ng template Example

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

22. Guard Example
https://github.com/mrgardner/AngularGuardExample

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

24. Event Emitter Example
https://github.com/mrgardner/CustomCounter

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

29. Life cycle methods

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

32. Overview of TypeScript

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

34. TypeScript Examples
Good Bad

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

37. Observables Examples

38. Angular Configuration

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

51. Social Media
Kenzan Personal
Twitter
Website
Linkedin
Github
Email - matthew.gardner.mrg@gmail.com

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