Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
initial commit
  • Loading branch information
Robin Löffel committed Jul 4, 2016
0 parents commit 472a46a
Show file tree
Hide file tree
Showing 20 changed files with 334 additions and 0 deletions.
3 changes: 3 additions & 0 deletions .babelrc
@@ -0,0 +1,3 @@
{
"presets": ["es2015", "angular2"]
}
9 changes: 9 additions & 0 deletions .editorconfig
@@ -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
12 changes: 12 additions & 0 deletions .gitignore
@@ -0,0 +1,12 @@
# folders
/node_modules/
/dist/

# os
Thumbs.db
ehthumbs.db
Desktop.ini
.DS_Store
.AppleDouble
.LSOverride
._*
4 changes: 4 additions & 0 deletions .jshintrc
@@ -0,0 +1,4 @@
{
"esversion": 6,
"jquery": true
}
29 changes: 29 additions & 0 deletions gulpfile.js
@@ -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);
});
17 changes: 17 additions & 0 deletions index.html
@@ -0,0 +1,17 @@
<!doctype html>

<html>
<head>
<title>Angular 2 with Babel &mdash; 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>
50 changes: 50 additions & 0 deletions package.json
@@ -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"
}
}
28 changes: 28 additions & 0 deletions readme.md
@@ -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).
20 changes: 20 additions & 0 deletions src/js/app.component.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions src/js/app.component.js.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 8 additions & 0 deletions src/js/es6/app.component.es6.js
@@ -0,0 +1,8 @@
import {Component} from '@angular/core';

@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})

export class AppComponent {}
5 changes: 5 additions & 0 deletions src/js/es6/main.es6.js
@@ -0,0 +1,5 @@
import {bootstrap} from '@angular/platform-browser-dynamic';

import {AppComponent} from './app.component';

bootstrap(AppComponent);
68 changes: 68 additions & 0 deletions src/js/es6/systemjs.config.es6.js
@@ -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);
3 changes: 3 additions & 0 deletions src/js/es6/systemjs.init.es6.js
@@ -0,0 +1,3 @@
System.import('app').catch((err) => {
console.error(err);
});
8 changes: 8 additions & 0 deletions src/js/main.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions src/js/main.js.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

60 changes: 60 additions & 0 deletions src/js/systemjs.config.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions src/js/systemjs.config.js.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 6 additions & 0 deletions src/js/systemjs.init.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions src/js/systemjs.init.js.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 472a46a

Please sign in to comment.