elmariofredo/app\app.component.ts

## app\app.component.ts
import { Component } from 'ng-metadata/core';
import { BeerComponent } from './beer.component.ts';
import { FoamDirective } from './foam.directive.ts';
import { TasteDirective } from './taste.directive.ts';

@Component({
  selector: 'my-app',
  template: '<my-beer my-foam my-taste></my-beer>',
  directives: [ BeerComponent, TasteDirective, FoamDirective ]
})
export class AppComponent { }

## app\beer.component.ts
import { Component } from 'ng-metadata/core';

@Component({
  selector: 'my-beer',
  template: '<h1>My First Angular 1 App <small>with ng-metadata!</small></h1>'
})
export class BeerComponent implements OnInit {

  ngOnInit() {

    console.log( 'my-beer' )

  }

}

## app\foam.directive.ts
import { Directive, Inject } from 'ng-metadata/core';

@Directive( {
  selector: '[my-foam]',
  legacy: {
    priority: 599, // Run right after ngIf
                   // to allow use ngIf on decorated components
                   // but prevent other directives to be linked
    transclude: 'element',
    terminal: true // TODO: Doesn't seems to be necessary
                   // as rest of directives are executed either way on $transclude call
  }
})
export class FoamDirective implements OnInit {

  constructor(
    @Inject( '$transclude' ) private $transclude: ng.ITranscludeFunction,
    @Inject( '$element' ) private $element: ng.IAugmentedJQuery
  ) {}

  ngOnInit() {

    console.log('my-foam');

    this.$element.after( this.$transclude() );

  }

}

## app\index.ts
export { AppComponent } from './app.component';

## app\main.ts
import { bootstrap } from 'ng-metadata/platform-browser-dynamic';

import { AppComponent } from './index';

bootstrap( AppComponent );

## app\taste.directive.ts
import { Directive } from 'ng-metadata/core';

@Directive( {
  selector: '[my-taste]'
})
export class TasteDirective implements OnInit {


  ngOnInit() {

    console.log('my-taste');

  }

}

## index.html
<!DOCTYPE html>
<html>

  <head>
    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="https://npmcdn.com/core-js/client/shim.min.js"></script>
    <script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>
    <script src="https://npmcdn.com/systemjs@0.19.27/dist/system.src.js"></script>

    <script src="https://code.angularjs.org/1.5.7/angular.js"></script>

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>

    <link rel="stylesheet" href="style.css">
  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>

## script.js
console.log('Hello World!');

## styles.css
/* todo: add styles */

## systemjs.config.js
System.config({
    //use typescript for compilation
    transpiler: 'ts',
    typescriptOptions: {
      tsconfig: true
    },
    meta: {
      'typescript': {
        "exports": "ts"
      }
    },

    //map tells the System loader where to look for things
    map: {
        'app': './app',
        'ng-metadata': 'https://npmcdn.com/ng-metadata',
        'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6',
        'ts': 'https://npmcdn.com/plugin-typescript@4.0.10/lib/plugin.js',
        'typescript': 'https://npmcdn.com/typescript@1.9.0-dev.20160409/lib/typescript.js',
    },
    //packages defines our app package
    packages: {
        app: {
          main: './main.ts',
          defaultExtension: 'ts'
        },
        'ng-metadata': {
          defaultExtension: 'js'
        },
        'rxjs': {
          main: 'index.js',
          defaultExtension: 'js'
        }
    }
});

## tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}
	import { Component } from 'ng-metadata/core';
	import { BeerComponent } from './beer.component.ts';
	import { FoamDirective } from './foam.directive.ts';
	import { TasteDirective } from './taste.directive.ts';

	@Component({
	selector: 'my-app',
	template: '<my-beer my-foam my-taste></my-beer>',
	directives: [ BeerComponent, TasteDirective, FoamDirective ]
	})
	export class AppComponent { }
	import { Component } from 'ng-metadata/core';

	@Component({
	selector: 'my-beer',
	template: '<h1>My First Angular 1 App <small>with ng-metadata!</small></h1>'
	})
	export class BeerComponent implements OnInit {

	ngOnInit() {

	console.log( 'my-beer' )

	}

	}
	import { Directive, Inject } from 'ng-metadata/core';

	@Directive( {
	selector: '[my-foam]',
	legacy: {
	priority: 599, // Run right after ngIf
	// to allow use ngIf on decorated components
	// but prevent other directives to be linked
	transclude: 'element',
	terminal: true // TODO: Doesn't seems to be necessary
	// as rest of directives are executed either way on $transclude call
	}
	})
	export class FoamDirective implements OnInit {

	constructor(
	@Inject( '$transclude' ) private $transclude: ng.ITranscludeFunction,
	@Inject( '$element' ) private $element: ng.IAugmentedJQuery
	) {}

	ngOnInit() {

	console.log('my-foam');

	this.$element.after( this.$transclude() );

	}

	}
	import { bootstrap } from 'ng-metadata/platform-browser-dynamic';

	import { AppComponent } from './index';

	bootstrap( AppComponent );
	import { Directive } from 'ng-metadata/core';

	@Directive( {
	selector: '[my-taste]'
	})
	export class TasteDirective implements OnInit {


	ngOnInit() {

	console.log('my-taste');

	}

	}
	<!DOCTYPE html>
	<html>

	<head>
	<!-- 1. Load libraries -->
	<!-- Polyfill(s) for older browsers -->
	<script src="https://npmcdn.com/core-js/client/shim.min.js"></script>
	<script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>
	<script src="https://npmcdn.com/systemjs@0.19.27/dist/system.src.js"></script>

	<script src="https://code.angularjs.org/1.5.7/angular.js"></script>

	<!-- 2. Configure SystemJS -->
	<script src="systemjs.config.js"></script>
	<script>
	System.import('app').catch(function(err){ console.error(err); });
	</script>

	<link rel="stylesheet" href="style.css">
	</head>

	<!-- 3. Display the application -->
	<body>
	<my-app>Loading...</my-app>
	</body>

	</html>
	System.config({
	//use typescript for compilation
	transpiler: 'ts',
	typescriptOptions: {
	tsconfig: true
	},
	meta: {
	'typescript': {
	"exports": "ts"
	}
	},

	//map tells the System loader where to look for things
	map: {
	'app': './app',
	'ng-metadata': 'https://npmcdn.com/ng-metadata',
	'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6',
	'ts': 'https://npmcdn.com/plugin-typescript@4.0.10/lib/plugin.js',
	'typescript': 'https://npmcdn.com/typescript@1.9.0-dev.20160409/lib/typescript.js',
	},
	//packages defines our app package
	packages: {
	app: {
	main: './main.ts',
	defaultExtension: 'ts'
	},
	'ng-metadata': {
	defaultExtension: 'js'
	},
	'rxjs': {
	main: 'index.js',
	defaultExtension: 'js'
	}
	}
	});
	{
	"compilerOptions": {
	"target": "es5",
	"module": "commonjs",
	"moduleResolution": "node",
	"sourceMap": true,
	"emitDecoratorMetadata": true,
	"experimentalDecorators": true,
	"removeComments": false,
	"noImplicitAny": true,
	"suppressImplicitAnyIndexErrors": true
	}
	}