Angular

Nota:

• Configuration for systemJS which handles module loading and compilation of TypeScript into JavaScript.

1. TypeScript

   Nota:

   • Files end in .ts Basically a ES6 version of JavaScript plus a few other TypeScript only features needed for angular. Angular is written in TypeScript
   1. Transpilation

      Nota:

      • Browsers do not support TS so this is needed.
   2. ES6
      1. Classes
      2. Template Strings

         Nota:

         • Multi-line strings that use back ticks (`....`)
   3. @Annotations

      Nota:

      • Links classes to HTML tags. Useful b/c it creates boilerplate for the class automatically. Can be configured by passing an object with various parameters. Components are imported from @Angular/core

Nota:

• Config for TypeScript transpiler. Target : Version of JS we want.

Nota:

• Building blocks of Angular Applications "Angular apps are architected as a tree of Components stemming from one root Component.   An angular application is a set of custom-made tags that interact with each other.---> These tags are referred to as components.A feature of Angular that allows us to create a new HTML language.      

1. app.component/root

Nota:

• The code is structured in Angular into packages  Every app requires at least one root module. referred to as AppModule. To define an AngularModule we first create a class then annotate it with a decorator called @NgModule. Params:  imports - the other modules that export material we need in this Angular Module. Almost every apps root should import [Browser Module] Declarations - list of components and declarations belonging to this module. bootstrap - identifies the root component angular should bootstrap when it starts the application.

1. Boostrapping

   Nota:

   • loads all the code from a module, was done automatically in AngularJS.
   1. Platform

      Nota:

      • Angular does not bootstrap automatically like it did in the first version due to the fact that it is Platform-specific in angular. Angular1 assumed that it would only ever be run in a browser, which is not true.  We must declare how we want to bootstrap, this way uses the browser. ----->platformBrowserDynamic
   2. BootStrapping a component declares it as the root component.
2. Import in Angular Vs Default JS module

   Nota:

   • JS modules refer to code which exists in a single file. NgModules combine code from different files together into a single file.

Nota:

• contains files for each destination enviorment, each export simple config variables to use in application. 

Nota:

• Karma test running library.

Nota:

• Main entry point for app.  compiles app with JIT compiler and bootstaps apps root module. to run in browser. AOT compiler is also avalaible