ES6 tool chain original: Hui Zhi network
It's not easy to make the Angular2 app run, because it uses too many technologies that are not supported by the current mainstream browser. So, we need a tool chain:
ANGULAR2 is the future-oriented technology, requires the browser to support the es6+, we have to try now, we need to add some shims to erase the current browser and ES6 differences:
- SYSTEMJS-Universal Module Loader supports JS module loading in various formats such as AMD, CommonJS, ES6, etc.
- ES6-MODULE-LOADER-ES6 Module Loader, SYSTEMJS will automatically load this module
- Traceur-es6 transcoding to convert the ES6 code to the ES5 code supported by the current browser. SYSTEMJS will automatically load this module.
<!doctype html>"Utf-8"> <title>hello,angular2</title> <!--module Loader-<script type="Text/javascript"Src="Lib/[email protected]"></script> <!--Angular2 Module Library--<script type="Text/javascript"Src="Lib/angular2.dev.js"></script> <script>//Set module load rulesSystem.baseurl =Document.baseuri; System.config ({map:{traceur:"lib/traceur"}, Traceuroptions: {annotations:true} }); </script> "Img/jay.gif"> <preclass="Logger"></pre> <!--define a ES6 script element--<script type="Module">//define a class with ES6 syntaxExportclasslogger{Constructor () { This. El = Document.queryselector ("Pre.logger"); This. lines = []; } log (str) { This. Lines.push (str); This. el.textcontent = This. Lines.join ("\ n"); } } //instantiate, test it. var_ =NewLogger (); _.log ("Ah yo, good oh! "); _.log ("It's really written in ES6. "); </script></body>Angular 2 Getting Started two