1/3/2019

Angular Intro

Angular

Angular is a front end application framework that is designed to write testable single page applications (SPAs).

Angular Website An example

What is a SPA?

History

  • AngularJS
    • Debuted in 2010
    • Built and Maintained by Google
    • MVC Architecture
  • V2 released Sep 2016
  • V4 released March 2017
  • V5 released October 2017
  • AngularJS == 1.X
  • Angular == 2 and above
  • Leverages TypeScript

MVC Concept

Goals

  • Separation of Concerns
  • Reusable Code
  • Testability

Model

The Model plays the role of managing application data. A model could represent a user, product information, list of movies, etc.

View

The View is the visual representation of the model. The view should not contain any logic. It accepts user input and passes it to the controller.

Controller

The controller responds to the user's interaction with the View. It performs validation and other business logic. It is considered 'best practice' to keep controllers slim.

Problems with MVC

  • Dependant on developer discipline
  • Concepts are open to interpretation
  • Requires additional items for full functionality.

Angular's architecture has changed from MVController to something like MVComponent

App Overview

Tour of Heroes

ToH Source Code

Angular CLI

The Angular CLI makes it very easy to create a new application, create new components, and test locally.

Angular CLI Benefits

  • Generates Project Structure
  • Creates Most Files
  • Runs your development server
  • Follows best practices

Installing Angular CLI


    npm install -g @angular/cli

This installs all the dependencies needed to run the Angular CLI from the command line.

Creating a New Project


    ng new MY-PROJECT-NAME 
    cd MY-PROJECT-NAME
    ng serve

Flags

The new command has several useful flags available in it.

  • --dry-run
  • --prefix
  • --routing
  • --style

Files Created

  • e2e - End to End tests
  • .angular-cli.json - CLI settings
  • .gitignore
  • package.json
  • ReadME.MD

SRC Files and Folders

  • index.html
  • main.ts - Main bootstraper
  • styles.css - Global Styles
  • assets folder
  • environments

app folder

  • app.module.ts
  • app.component.ts
  • app.component.spec.ts
  • app.component.html
  • app.component.css

Creating a New Component


ng generate component  my-new-component-name
#which is equal to
ng g component  my-new-component-name

#You can also assign folder paths
ng g component shared/components/my-small-component

Items you can Generate

  • component
  • directive
  • pipe
  • service
  • class
  • guard
  • interface
  • enum
  • module
>