Created
August 18, 2016 05:56
-
-
Save LordZardeck/7ecb4ace69ba0fa429c365992dd18d11 to your computer and use it in GitHub Desktop.
GistRun Angular w/ Babel Starter Kit
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* global System */ | |
| System.defaultJSExtensions = true; | |
| System.config({ | |
| transpiler: "babel", | |
| babelOptions: { | |
| stage: 0, | |
| optional: [ | |
| "runtime" | |
| ] | |
| } | |
| }); | |
| System.config({ | |
| meta: { | |
| } | |
| }); | |
| System.config({ | |
| paths: { | |
| "~/*": "*.js", | |
| "github:*": "https://github.jspm.io/*.js", | |
| "npm:*": "https://npm.jspm.io/*.js", | |
| "cdnjs:*": "https://cdnjs.cloudflare.com/ajax/libs/*.js" | |
| }, | |
| map: { | |
| "angular": "npm:angular@1.4.1", | |
| "babel": "npm:babel-core@5.5.8", | |
| "babel-runtime": "npm:babel-runtime@5.5.8", | |
| "core-js": "npm:core-js@0.9.17", | |
| "prefixfree": "cdnjs:prefixfree/1.0.7/prefixfree.min" | |
| } | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // | |
| export default class FooController { | |
| constructor(){ | |
| const system = { | |
| name: 'system', version: `0.${4 ** 2}.11` | |
| }; | |
| this.toys = [ | |
| {name: 'angular', version: angular.version.full}, | |
| {name: 'babel', version: '5.5.8'}, | |
| // Demo using experimental ES7 feature **es7.objectRestSpread** | |
| // see https://github.com/sebmarkbage/ecmascript-rest-spread | |
| // see https://babeljs.io/docs/usage/experimental/ | |
| {...system} | |
| ]; | |
| } | |
| } | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // | |
| import angular from 'angular'; | |
| import FooController from './foo.controller'; | |
| export default angular | |
| .module('foo', []) | |
| .controller('FooController', FooController) | |
| ; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="https://jspm.io/system@0.16.11.js"></script> | |
| <script src="https://npm.jspm.io/babel-core@5.5.8/browser-polyfill.js"></script> | |
| <script src="config.js"></script> | |
| <script> | |
| document.write('<base href="' + document.location + '" />'); | |
| </script> | |
| </head> | |
| <body> | |
| <div class="jumbotron"> | |
| <div class="container"> | |
| <h1>Base Angular and Babel through SystemJS</h1> | |
| </div> | |
| </div> | |
| <div class="container"> | |
| <section ng-controller="FooController as fooCtrl"> | |
| <ul> | |
| <li ng-repeat="toy in fooCtrl.toys track by $index"> | |
| {{:: toy.name }} {{:: toy.version}} | |
| </li> | |
| </ul> | |
| </section> | |
| </div> | |
| <script> | |
| (function() { | |
| System.import('~/foo/foo.module') | |
| .then(function(fooAppModule) { | |
| angular.bootstrap(document, [fooAppModule['default'].name]); | |
| }); | |
| }()); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment