kasperpeulen/README.md

## README.md

      
    Raw
  

              README.md
            
          
    #angular2:angular2 example
Basic example illustrating *ng-for in angular2.
Main library: angular2:angular2

Main element: NgFor

Gist: https://gist.github.com/kasperpeulen/1779cb03472912a1359e


## 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;

@Injectable()
class FriendsService {
  List<String> names = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai'];
}

@Component(selector: 'my-app', hostInjector: const [FriendsService])
@View(template: '''
<ul>
   <li *ng-for="#name of friendNames">
      {{ name }}
   </li>
</ul>
''', directives: const [NgFor])
class MyApp {
  List<String> friendNames;

  MyApp(FriendsService friendsService)
      : friendNames = friendsService.names;
}

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

## pubspec.yaml
name: angular2.angular2_NgFor
description: >
  Basic example illustrating *ng-for in angular2.
homepage: https://gist.github.com/kasperpeulen/1779cb03472912a1359e
homepage: https://gist.github.com/kasperpeulen/1779cb03472912a1359e
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;

	@Injectable()
	class FriendsService {
	List<String> names = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai'];
	}

	@Component(selector: 'my-app', hostInjector: const [FriendsService])
	@View(template: '''
	<ul>
	<li *ng-for="#name of friendNames">
	{{ name }}
	</li>
	</ul>
	''', directives: const [NgFor])
	class MyApp {
	List<String> friendNames;

	MyApp(FriendsService friendsService)
	: friendNames = friendsService.names;
	}

	main() {
	reflector.reflectionCapabilities = new ReflectionCapabilities();
	bootstrap(MyApp);
	}
	name: angular2.angular2_NgFor
	description: >
	Basic example illustrating *ng-for in angular2.
	homepage: https://gist.github.com/kasperpeulen/1779cb03472912a1359e
	homepage: https://gist.github.com/kasperpeulen/1779cb03472912a1359e
	environment:
	sdk: '>=1.0.0 <2.0.0'
	dependencies:
	angular2: 2.0.0-alpha.29