Commit
- Loading branch information
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
{ | ||
"presets": ["es2015", "angular2"] | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
root = true | ||
|
||
[*] | ||
charset = utf-8 | ||
indent_style = space | ||
indent_size = 4 | ||
end_of_line = lf | ||
insert_final_newline = true | ||
trim_trailing_whitespace = true |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
# folders | ||
/node_modules/ | ||
/dist/ | ||
|
||
# os | ||
Thumbs.db | ||
ehthumbs.db | ||
Desktop.ini | ||
.DS_Store | ||
.AppleDouble | ||
.LSOverride | ||
._* |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
{ | ||
"esversion": 6, | ||
"jquery": true | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
'use strict'; | ||
|
||
let gulp = require('gulp'), | ||
runSequence = require('run-sequence'), | ||
babel = require('gulp-babel'), | ||
replace = require('gulp-ext-replace'), | ||
connect = require('gulp-connect'), | ||
sourcemaps = require('gulp-sourcemaps'); | ||
|
||
gulp.task('babel', () => { | ||
return gulp.src('./src/js/es6/*.js') | ||
.pipe(sourcemaps.init()) | ||
.pipe(babel()) | ||
.pipe(replace('.js', '.es6.js')) | ||
.pipe(sourcemaps.write('.')) | ||
.pipe(gulp.dest('./src/js/')); | ||
}); | ||
|
||
gulp.task('serve', () => { | ||
return connect.server({ | ||
port: 3000, | ||
root: '.', | ||
livereload: true | ||
}); | ||
}); | ||
|
||
gulp.task('default', (callback) => { | ||
runSequence('babel', 'serve', callback); | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
<!doctype html> | ||
|
||
<html> | ||
<head> | ||
<title>Angular 2 with Babel — QuickStart</title> | ||
<meta charset="utf-8" /> | ||
<script src="node_modules/core-js/client/shim.min.js"></script> | ||
<script src="node_modules/zone.js/dist/zone.js"></script> | ||
<script src="node_modules/reflect-metadata/Reflect.js"></script> | ||
<script src="node_modules/systemjs/dist/system.src.js"></script> | ||
<script src="/src/js/systemjs.config.js"></script> | ||
<script src="/src/js/systemjs.init.js"></script> | ||
</head> | ||
<body> | ||
<my-app>Loading...</my-app> | ||
</body> | ||
</html> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
{ | ||
"name": "budget", | ||
"title": "Budgeting with Angular 2 and ES6", | ||
"description": "Budgeting web app", | ||
"author": "Robin Löffel <hi@robinloeffel.ch> (https://robinloeffel.ch)", | ||
"licence": "ISC", | ||
"version": "0.0.1", | ||
"private": true, | ||
"repository": { | ||
"type": "git", | ||
"url": "git+https://github.com/rbnlffl/budget.git" | ||
}, | ||
"bugs": { | ||
"url": "https://github.com/rbnlffl/portfolio/issues" | ||
}, | ||
"keywords": [ | ||
"budget", | ||
"angular2", | ||
"es6", | ||
"babel" | ||
], | ||
"scripts": { | ||
"start": "gulp" | ||
}, | ||
"devDependencies": { | ||
"@angular/common": "2.0.0-rc.4", | ||
"@angular/compiler": "2.0.0-rc.4", | ||
"@angular/core": "2.0.0-rc.4", | ||
"@angular/forms": "0.2.0", | ||
"@angular/http": "2.0.0-rc.4", | ||
"@angular/platform-browser": "2.0.0-rc.4", | ||
"@angular/platform-browser-dynamic": "2.0.0-rc.4", | ||
"@angular/router": "3.0.0-beta.1", | ||
"@angular/router-deprecated": "2.0.0-rc.2", | ||
"@angular/upgrade": "2.0.0-rc.4", | ||
"babel-preset-angular2": "0.0.2", | ||
"babel-preset-es2015": "^6.9.0", | ||
"core-js": "^2.4.0", | ||
"gulp": "^3.9.1", | ||
"gulp-babel": "^6.1.2", | ||
"gulp-connect": "^4.1.0", | ||
"gulp-ext-replace": "^0.3.0", | ||
"gulp-sourcemaps": "^1.6.0", | ||
"reflect-metadata": "^0.1.3", | ||
"run-sequence": "^1.2.2", | ||
"rxjs": "5.0.0-beta.6", | ||
"systemjs": "0.19.27", | ||
"zone.js": "^0.6.12" | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
# Angular 2 ES6 QuickStart | ||
The super-simple [Angular 2](https://angular.io/) quickstarter with ES6/[Babel](https://babeljs.io/) instead of [TypeScript](https://www.typescriptlang.org/). Built with [gulp](http://gulpjs.com/). | ||
|
||
Based on the official [Angular 2 QuickStarter](https://angular.io/docs/ts/latest/quickstart.html). | ||
|
||
## Setup | ||
Run the following two commands inside the project folder after each other to get it up and running. | ||
|
||
npm i | ||
|
||
gulp | ||
|
||
This will install all packages, transpile ES6 to ES5 (with sourcemaps for debugging) and run a server at [localhost:3000](http://localhost:3000). | ||
|
||
## Guide | ||
### Configuring Babel for Angular 2 | ||
After we've set up, our gulpfile we need to install to presets for Babel so it knows what language the source code is written in and what framework we use. We do this by npm-installing `babel-preset-es2015` and `babel-preset-angular2`. | ||
|
||
When that's done all we need to do is including these two presets in .babelrc and we're done here. | ||
|
||
### Including Stuff Inside index.html | ||
Since Angular 2 is experimental, we need to include polyfills and fallbacks. These are [core-js](https://github.com/zloirock/core-js), [reflect-metadata](https://www.npmjs.com/package/reflect-metadata) and [zone.js](https://github.com/angular/zone.js/). Also, because the quickstarter isn't using anything like [rollup.js](http://rollupjs.org/) or [Browserify](http://browserify.org/), we need to include [systemjs](https://github.com/systemjs/systemjs) which allows us to `require` things inside the client-side JavaScript. | ||
|
||
### What's Inside package.json | ||
You've probably wondered where the fuck that Angular 2 magic comes from. Well, it all originates from npm packages. You see all those `@angular/` dependencies in package.json? That's it. They're prefixed with an @ simply because this tells npm to put them in the same folder. They then get imported in main.es6.js or wherever via `import` statements. | ||
|
||
## u dun here brah/gurl? | ||
Hopefully my little starter helped understand the setup process for Angular 2 projects. If you need further assistance, feel free to open an issue. Another seed project for Angular 2 with Babel can be found [here](https://github.com/shuhei/babel-angular2-app). |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
import {Component} from '@angular/core'; | ||
|
||
@Component({ | ||
selector: 'my-app', | ||
template: '<h1>My First Angular 2 App</h1>' | ||
}) | ||
|
||
export class AppComponent {} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
import {bootstrap} from '@angular/platform-browser-dynamic'; | ||
|
||
import {AppComponent} from './app.component'; | ||
|
||
bootstrap(AppComponent); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,68 @@ | ||
/* | ||
********************************* | ||
** ANGULAR 2 QUICKSTART CONFIG ** | ||
********************************* | ||
see https://angular.io/docs/ts/latest/quickstart.html#!#add-config-files | ||
*/ | ||
|
||
(global => { | ||
let map = { | ||
'app': 'src/js/', | ||
'@angular': 'node_modules/@angular', | ||
'rxjs': 'node_modules/rxjs' | ||
}; | ||
|
||
let packages = { | ||
'app': { | ||
main: 'main.js', | ||
defaultExtension: 'js' | ||
}, | ||
'rxjs': { | ||
defaultExtension: 'js' | ||
} | ||
}; | ||
|
||
let ngPackageNames = [ | ||
'common', | ||
'compiler', | ||
'core', | ||
'forms', | ||
'http', | ||
'platform-browser', | ||
'platform-browser-dynamic', | ||
'router', | ||
'router-deprecated', | ||
'upgrade', | ||
]; | ||
|
||
function packIndex(pkgName) { | ||
packages['@angular/' + pkgName] = { | ||
main: 'index.js', | ||
defaultExtension: 'js' | ||
}; | ||
} | ||
|
||
function packUmd(pkgName) { | ||
packages['@angular/' + pkgName] = { | ||
main: '/bundles/' + pkgName + '.umd.js', | ||
defaultExtension: 'js' | ||
}; | ||
} | ||
|
||
let setPackageConfig = System.packageWithIndex ? packIndex : packUmd; | ||
|
||
ngPackageNames.forEach(setPackageConfig); | ||
|
||
packages['@angular/router'] = { | ||
main: 'index.js', | ||
defaultExtension: 'js' | ||
}; | ||
|
||
let config = { | ||
map: map, | ||
packages: packages | ||
}; | ||
|
||
System.config(config); | ||
})(this); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
System.import('app').catch((err) => { | ||
console.error(err); | ||
}); |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.