kasperpeulen/README.md

## README.md

      
    Raw
  

              README.md
            
          
    #angular2:angular2 example
A basic example showing how to use the @Component annotation in angular2.
Main library: angular2:angular2

Main element: Component

Gist: https://gist.github.com/kasperpeulen/5a0e89c90c8a732aa744


## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <my-app></my-app>

    <script type="application/dart" src="main.dart"></script>
  </body>
</html>


## main.dart
import 'package:angular2/angular2.dart';
import 'package:angular2/src/reflection/reflection.dart' show reflector;
import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;


@Component(selector: 'child')
@View(template: '''
    <p> {{ message }} </p>
''')
class ChildComponent {
  String message = "I'm the child";
}

@Component(selector: 'my-app')
@View(template: '''
    <h1>{{ message }}</h1>
    <child></child>
''', directives: const [ChildComponent])
class MyApp {
  String message = "I'm the parent";
}


main() {
  reflector.reflectionCapabilities = new ReflectionCapabilities();
  bootstrap(MyApp);
}

## pubspec.yaml
name: angular2.angular2_Component
description: >
  A basic example showing how to use the @Component annotation in angular2.
homepage:
homepage: https://gist.github.com/kasperpeulen/5a0e89c90c8a732aa744
environment:
  sdk: '>=1.0.0 <2.0.0'
dependencies:
  angular2: 2.0.0-alpha.29
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	</head>
	<body>
	<my-app></my-app>

	<script type="application/dart" src="main.dart"></script>
	</body>
	</html>
	import 'package:angular2/angular2.dart';
	import 'package:angular2/src/reflection/reflection.dart' show reflector;
	import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;


	@Component(selector: 'child')
	@View(template: '''
	<p> {{ message }} </p>
	''')
	class ChildComponent {
	String message = "I'm the child";
	}

	@Component(selector: 'my-app')
	@View(template: '''
	<h1>{{ message }}</h1>
	<child></child>
	''', directives: const [ChildComponent])
	class MyApp {
	String message = "I'm the parent";
	}


	main() {
	reflector.reflectionCapabilities = new ReflectionCapabilities();
	bootstrap(MyApp);
	}
	name: angular2.angular2_Component
	description: >
	A basic example showing how to use the @Component annotation in angular2.
	homepage:
	homepage: https://gist.github.com/kasperpeulen/5a0e89c90c8a732aa744
	environment:
	sdk: '>=1.0.0 <2.0.0'
	dependencies:
	angular2: 2.0.0-alpha.29