loader gif

Angular 2

zone
“Zone is a mechanism for intercepting and keeping track of asynchronous work” – //github.com/angular/zone.js

  • When Angular 1 knew about callbacks it could do wonderful things, like
    automatically update the page. When it didn’t know about callbacks it frustratingly
    didn’t update the page.
  • No matter how experienced you were with Angular 1 bugs with these kinds of issues
    cropped up time and time again.
  • Zones solves this problem, it keeps track of all pending asynchronous work and tells
    Angular when things happen. So in Angular 2 you don’t have to worry about
    whether Angular knows about your callback or not, zones tracks this for you and
    notifies Angular when something happens.

SystemJS

  • Instead of including all the files we need as script tags in our index.html, in Angular
    we break up all our code into files called modules . We then leave it to a module
    loader to load the modules when they are needed, in the order they are needed.
  • It will become part of the core JavaScript language but until then we use a module
    loader

systemjs.config.js
SystemJS needs help to figure out when and how to load up certain modules, e.g. if
we ask for a module called @angular what does that mean? What should it load up?
Which version? This configuration is stored in the systemjs.config.js file.

System.import
Now we’ve loaded up the SystemJS library and configured it by loading up the
systemjs.config.js file, we can use the System.import function to load up our
script.ts file, like so:


System.import('script.ts').catch(function(err) {
console.error(err);
});

Intro to TypeScript

  • TypeScript is the ES6 version of JavaScript plus a few other TypeScript only features
    which Angular 2 needs in order to work.

  • You can write Angular applications in either TypeScript , ES6 or even ES5 JavaScript .

 

Transpilation

  • Browsers don’t support TypeScript. Browsers barely support ES6 JavaScript. So how can we write our code in TypeScript?
  • We use something called a transpiler which converts from one language to another.
  • We can write in TypeScript and have a transpiler convert to ES6 or ES5.

tsconfig.json


{
"compilerOptions": {
"target": "es5", 1
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
}
}

 

Components

  • An Angular application is therefore just a set of custom tags that interact with each
    other, we call these tags Components .
  • Directives <1.5 & Components of 1.5
  • We use a new feature of TypeScript called annotations , and specifically an
    annotation called @Component to link Class with this custom tag
  • The @Component is an annotation, an annotation automatically adds some boilerplate
    code to the class, function or property its attached to.
  • You can write Angular without using annotations you would just have to write the boilerplate code
    yourself.
  • By setting the selector to joke we’ve told angular that whenever it finds a tag in the
    HTML like <joke></joke> to use an instance of the JokeComponent class to control it.

import { Component } from '@angular/core';

  • There is a new feature of ES6 JavaScript called template strings ` back-tick
  • In Angular 2 your code is structured into packages called Angular Modules, or
    NgModules for short. Every app requires at least one module, the root module, that
    we call AppModule by convention.

NgModule has a few params:

  • imports
    The other Angular Modules that export material we need in this Angular Module.
    Almost every application’s root module should import the BrowserModule.
  • declarations
    The list of components or directives belonging to this module.
  • bootstrap
    Identifies the root component that Angular should bootstrap when it starts the
    application.

BrowserModule is the Angular Module that contains all the needed Angular bits and pieces to run our application in the browser.

  • FormsModule , RouterModule and HttpModule .

 

Leave a Reply