Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is mean by System.register in JS file?

What is mean by System.register in JS file, while using directives in angular 2.

like image 726
Kbvin Avatar asked Sep 09 '16 04:09

Kbvin


People also ask

What is System JS in angular?

systemjs.config.js. It contains the mapping information of files, which are used for developing Angular application. It tells the SystemJS module loader where to find modules referenced in Angular component imports statements. tsconfig.json.

What is System import?

A system import map is used by the system to find the partner relationship for a document (flat file definition), to determine which import map is used to translate the data. The system import map builds the key that the translator uses to find the partner relationship.

What is require () in JavaScript?

require() statement basically reads a JavaScript file, executes it, and then proceeds to return the export object. require() statement not only allows to add built-in core NodeJS modules but also community-based and local modules.

What are modules in JavaScript?

A module in JavaScript is just a file containing related code. In JavaScript, we use the import and export keywords to share and receive functionalities respectively across different modules. The export keyword is used to make a variable, function, class or object accessible to other modules.


1 Answers

I think this question is not specific to directives in angular2, it is general question about ES6, TypeScript and other modern compilers which use SystemJS. The short answer - it is wrapper created by System.js to isolate code and inject external dependencies.

This code:

  import { p as q } from './dep';

  var s = 'local';

  export function func() {
    return q;
  }

  export class C {
  }

Will generate:

System.register(['./dep'], function($__export, $__moduleContext) {
 var s, C, q;
 function func() {
   return q;
 }
 $__export('func', func);
 return {
   setters: [
   // every time a dependency updates an export, 
   // this function is called to update the local binding
   // the setter array matches up with the dependency array above
   function(m) {
     q = m.p;
   }
   ],
   execute: function() {
     // use the export function to update the exports of this module
     s = 'local';
     $__export('C', C = $traceurRuntime.createClass(...));
     var moduleName = $__moduleContext.id;
   }
 };
});

Here - System register you can find more detail inforamtion about thins question.

like image 146
Mikki Kobvel Avatar answered Oct 20 '22 02:10

Mikki Kobvel