Intro to Angular (2+)

David Stanich
2018-05-10

Angular

• Created by Google
• Open source - GitHub
• Framework for creating scalable web applications
• Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges.
              - angular.io

AngularJS vs Angular

• AngularJS (1.x): Legacy framework
  • Last major release: v1.7
• Angular (2+): "New" framework
  • Releases all backward compatible
  • Latest major release: v6.0
• Separate and not compatible
• Some upgrade paths, but depends on app

TypeScript

• Angular applications are written in TypeScript
• TypeScript created by Microsoft (2012)
• Open source
• Superset of JavaScript
• Transpiles "new" JS into ES5 (old JS)
• Adds optional type definitions
  • Editor and build time ONLY
• NOT Angular specific, can be used for anything

angular-cli

• Quickly create new projects with...
  • Unit tests
  • End to end tests
  • Development live reload
  • Production build/minification
• Ability to generate components, services, etc
• Enforces/assists with Angular best practices

Application Structure

• Angular applications are made up from...
  • Components (ts, css, html)
  • Services (business logic)
  • Pipes (data transform)
  • Directives (element manipulation)
• Basic idea: data in to components, events out

Demos

• Run demos either by...
  • Cloning repo, running setup
  • Click StackBlitz links in README