jimthedev/init-angular2-ts-jspm

## init-angular2-ts-jspm
# DESCRIPTION
# Performs the commands needed to download and set up a new angular2 project using typescript and jspm
#
# Assumes you have these:
#    - git
#    - node / io.js
#    - npm
#    - npm install -g jspm@beta   **NOTE**: you must have the beta release of jspm installed
#
# USAGE
#   1. mkdir myAwesomeAngularProject && cd $_
#   2. Download init-angular2-ts-jspm into the new directory
#   3. Make the script executable: chmod +x init-angular2-ts-jspm
#   4. Run the script: ./init-angular2-ts-jspm
#   5. cd app && python -m SimpleHTTPServer
#
# AUTHOR
# Jim Cummins @jimthedev
# Based on @robwormald's cheat sheet: https://gist.github.com/robwormald/429e01c6d802767441ec

# Check for git
path_to_git=$(which git)
 if [ ! -x "$path_to_git" ] ; then
    echo Error: Git must be in your path. 1>&2
    exit 1
 fi

# Check for node
path_to_node=$(which node)
 if [ ! -x "$path_to_node" ] ; then
    echo Error: Node must be in your path. 1>&2
    exit 1
 fi

# Check for npm
path_to_npm=$(which npm)
 if [ ! -x "$path_to_npm" ] ; then
    echo Error: npm must be in your path. 1>&2
    exit 1
 fi

# Check for jspm@beta
match() {
    TRUE=1
    FALSE=0
    match_return=0
    echo $1 | grep $2 >/dev/null
    [ $? -eq 0 ] && match_return=$TRUE || match_return=$FALSE
}
match "$(jspm -v)" beta
if [ ! $match_return -eq 1 ] ; then
    echo Error: Installed jspm must be beta version, try npm install -g jspm@beta
    exit 1
 fi

# Create the directory to hold our application files
mkdir ./app

# Create and pre-populate package.json with our application and vendor paths
cat >package.json <<EOL
{
  "jspm": {
    "directories": {
      "baseURL": "app",
      "packages": "app/lib"
    }
  }
}
EOL

# Create and populate the SystemJS config file
cat >./app/config.js <<EOL
System.config({
  "baseURL": "/",
  "defaultJSExtensions": true,
  "transpiler": "typescript",
  "typescriptOptions": {
    "module": "commonjs",
    "emitDecoratorMetadata": true
  },
  "paths": {
    "github:*": "lib/github/*",
    "npm:*": "lib/npm/*",
    "app": "src"
  },
  "packages": {
    "app": {
      "main": "bootstrap",
      "defaultExtension": "ts",
      "meta": {
        "*.ts": {
          "loader": "ts"
        }
      },
      "typescriptOptions": {
        "typeCheck": true,
        "resolveAmbientRefs": true
      }
    }
  }
});
EOL

# Prompt the user to set up their jspm github config to prevent rate limiting
jspm registry config github

# Install typescript
jspm dl-loader typescript

# Install our dependencies
jspm install ts angular2 reflect-metadata zone.js es6-shim --save

# Initialize a typings file
tsd init

# Get and save the typings for our dependencies
tsd install angular2 rx rx-lite es6-promise --save --overwrite

# Create a directory to hold our source
mkdir ./app/src

# Create and populate a index html file
cat >./app/index.html <<EOL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular 2 App</title>
    <!-- systemJS loader and config -->
    <script src="lib/system.js"></script>
    <script src="config.js"></script>
</head>
<body>
<!-- our initial angular2 component -->
<test-app>
    Loading...
</test-app>

<!-- import and run our app -->
<script>
    System.import('app');
</script>
</body>
</html>
EOL

# Create and populate a bootstrap file
# This file tells angular which component to use as root
cat >./app/src/bootstrap.ts <<EOL
/// <reference path="../../typings/tsd.d.ts" />

// Import dependencies
import 'zone.js';
import 'reflect-metadata';
import 'es6-shim';

import {bootstrap} from 'angular2/angular2';
import {TestApp} from './components/main';

bootstrap(TestApp).then(
  function(success) {
      console.log(success);
  },
  function(error) {
      console.error(error);
  });
EOL

# Create a directory for components to live
mkdir ./app/src/components

# Create and populate a component
cat >./app/src/components/main.ts <<EOL
/// <reference path="../../../typings/tsd.d.ts" />

import {
    Component,
    View,
    bootstrap
} from 'angular2/angular2';

//create a simple angular component
@Component({
    selector: 'test-app'
})
@View({
    template: '<h4>Hello {{name}}</h4>'
})
export class TestApp {
    name: string;
    constructor(){
        this.name = 'Angular2';
        setTimeout(() => {
            this.name = 'Angular2!!!'
        },1500);
    }
}
EOL
	# DESCRIPTION
	# Performs the commands needed to download and set up a new angular2 project using typescript and jspm
	#
	# Assumes you have these:
	# - git
	# - node / io.js
	# - npm
	# - npm install -g jspm@beta NOTE: you must have the beta release of jspm installed
	#
	# USAGE
	# 1. mkdir myAwesomeAngularProject && cd $_
	# 2. Download init-angular2-ts-jspm into the new directory
	# 3. Make the script executable: chmod +x init-angular2-ts-jspm
	# 4. Run the script: ./init-angular2-ts-jspm
	# 5. cd app && python -m SimpleHTTPServer
	#
	# AUTHOR
	# Jim Cummins @jimthedev
	# Based on @robwormald's cheat sheet: https://gist.github.com/robwormald/429e01c6d802767441ec

	# Check for git
	path_to_git=$(which git)
	if [ ! -x "$path_to_git" ] ; then
	echo Error: Git must be in your path. 1>&2
	exit 1
	fi

	# Check for node
	path_to_node=$(which node)
	if [ ! -x "$path_to_node" ] ; then
	echo Error: Node must be in your path. 1>&2
	exit 1
	fi

	# Check for npm
	path_to_npm=$(which npm)
	if [ ! -x "$path_to_npm" ] ; then
	echo Error: npm must be in your path. 1>&2
	exit 1
	fi

	# Check for jspm@beta
	match() {
	TRUE=1
	FALSE=0
	match_return=0
	echo $1 \| grep $2 >/dev/null
	[ $? -eq 0 ] && match_return=$TRUE \|\| match_return=$FALSE
	}
	match "$(jspm -v)" beta
	if [ ! $match_return -eq 1 ] ; then
	echo Error: Installed jspm must be beta version, try npm install -g jspm@beta
	exit 1
	fi

	# Create the directory to hold our application files
	mkdir ./app

	# Create and pre-populate package.json with our application and vendor paths
	cat >package.json <<EOL
	{
	"jspm": {
	"directories": {
	"baseURL": "app",
	"packages": "app/lib"
	}
	}
	}
	EOL

	# Create and populate the SystemJS config file
	cat >./app/config.js <<EOL
	System.config({
	"baseURL": "/",
	"defaultJSExtensions": true,
	"transpiler": "typescript",
	"typescriptOptions": {
	"module": "commonjs",
	"emitDecoratorMetadata": true
	},
	"paths": {
	"github:": "lib/github/",
	"npm:": "lib/npm/",
	"app": "src"
	},
	"packages": {
	"app": {
	"main": "bootstrap",
	"defaultExtension": "ts",
	"meta": {
	"*.ts": {
	"loader": "ts"
	}
	},
	"typescriptOptions": {
	"typeCheck": true,
	"resolveAmbientRefs": true
	}
	}
	}
	});
	EOL

	# Prompt the user to set up their jspm github config to prevent rate limiting
	jspm registry config github

	# Install typescript
	jspm dl-loader typescript

	# Install our dependencies
	jspm install ts angular2 reflect-metadata zone.js es6-shim --save

	# Initialize a typings file
	tsd init

	# Get and save the typings for our dependencies
	tsd install angular2 rx rx-lite es6-promise --save --overwrite

	# Create a directory to hold our source
	mkdir ./app/src

	# Create and populate a index html file
	cat >./app/index.html <<EOL
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Angular 2 App</title>
	<!-- systemJS loader and config -->
	<script src="lib/system.js"></script>
	<script src="config.js"></script>
	</head>
	<body>
	<!-- our initial angular2 component -->
	<test-app>
	Loading...
	</test-app>

	<!-- import and run our app -->
	<script>
	System.import('app');
	</script>
	</body>
	</html>
	EOL

	# Create and populate a bootstrap file
	# This file tells angular which component to use as root
	cat >./app/src/bootstrap.ts <<EOL
	/// <reference path="../../typings/tsd.d.ts" />

	// Import dependencies
	import 'zone.js';
	import 'reflect-metadata';
	import 'es6-shim';

	import {bootstrap} from 'angular2/angular2';
	import {TestApp} from './components/main';

	bootstrap(TestApp).then(
	function(success) {
	console.log(success);
	},
	function(error) {
	console.error(error);
	});
	EOL

	# Create a directory for components to live
	mkdir ./app/src/components

	# Create and populate a component
	cat >./app/src/components/main.ts <<EOL
	/// <reference path="../../../typings/tsd.d.ts" />

	import {
	Component,
	View,
	bootstrap
	} from 'angular2/angular2';

	//create a simple angular component
	@Component({
	selector: 'test-app'
	})
	@View({
	template: '<h4>Hello {{name}}</h4>'
	})
	export class TestApp {
	name: string;
	constructor(){
	this.name = 'Angular2';
	setTimeout(() => {
	this.name = 'Angular2!!!'
	},1500);
	}
	}
	EOL