Angular 2 (and 4) Introduction

Topics 

  • What is and Why Angular (Angular 2 and Angular 4)? 
  • From this point on, whenever we say “Angular 2” or “Angular”, we also include “Angular 4” 
  • Angular CLI 
  • Angular 4 improvements over Angular 2

What is and Why Angular?

What is Angular? 

  • Angular is a development platform for building “mobile” and “desktop” applications 
    • Angular was designed for mobile from the ground up 
    • Angular, like React and other modern frameworks, can leverage performance gains by rendering HTML on the server or even in a web worker 
  • Angular is platform agnostic 
    • Not coupled with DOM or even HTML 
    • Can be used for non-browser platforms

Angular 1 vs Angular 2 

  • Angular 2 is rewritten from scratch 
    • Using different language (TypeScript over JavaScript) 
    • Introduced new building blocks (component oriented) 
    • Incompatible with Angular 1 
  • Why these drastic change (from Angular 1)? 
    • Web has evolved a lot (since Angular 1 was introduced in 2009) 
    • The applications are becoming more complex and demanding 
    • New technologies were introduced (WebWorkers, Reactive extensions (Rx), etc
    • ...

Why Angular 2? 

  • Angular is easier to program 
    • Familiar language features, Type-checking, IDE support, Easier to read and write code, etc 
  • Streamlined architecture over Angular 1 
    • Component oriented 
  • Higher performance 
  • Mobile-friendly

Angular CLI 

  • Command line tool for automating your development workflow 
  • It allows you to 
    • create a new Angular application (ng new hello-app) 
    • run a development server with LiveReload support to preview your application during development (ng serve) 
    • add features to your existing Angular application (ng generate ...) 
    • run your application’s unit tests (ng test) 
    • run your application’s end-to-end (E2E) tests (ng e2e) 
    • build your application for deployment to production (ng build) 
    • deploy your application to a server

Angular CLI installation 

  • Install Node.js (if it has not been installed already) 
    • Before you can use Angular CLI, you must have Node.js 4.0.0 and npm 3.0.0 or higher installed on your system (npm gets installed as part of Node installation) 
  • https://nodejs.org/en/ 
  • Verify the installation 
    • node -v 
    • npm -v 
  • Install Angular CLI 
    • npm install -g @angular/cli (Angular Cli beta 30+ ) 
    • npm install -g angular-cli (Angular Cli beta -30) 
    • ng version (to verify the installation)

Lab: Build Helloworld Angular App 

  • Create and run Helloworld Angular app 
    • ng new helloworld-app 
  • Open “helloworld-app” directory using editor of your choice 
  • Run the “helloworld-app” Angular application 
    • cd helloworld-app 
    • ng serve (application gets build and served, application gets rebuilt and deployed when changes are made) 
  • Open a browser and go to http://localhost:4200 
  • Observe “Welcome to app!” page in a browser 
  • You now have a simple yet fully functioning Angular application

Lab: Install Editor/IDE 

  • Visual Studio Code (Microsoft) - free 
    • https://code.visualstudio.com/download 
  • WebStorm (JetBrain) – probably the best at this point, commercial 
  • Atom 
  • Sublime Text

Lab: Install Extensions to VSC

Lab: Install Extensions to VSC

Angular 4

Angular 4 Improvements Over Angular 

  • Under the hood changes 
    • Size of the generated code reduced 
    • Faster compilation 
  • Feature changes 
    • Animations being pulled out of @angular/core 
    • *ngIf/else : Now you can use else clause as well

Download course content

Download PDF