Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
angular2 (dart) quickstart with semantic-ui
import 'package:angular2/core.dart';
import 'dart:js' as js;
@Component(
selector: 'my-app',
templateUrl: 'app_component.html')
class AppComponent {
@HostBinding('class') String css = 'ui main container';
void triggerFlip() {
js.context.callMethod(r'$', ['#messageContainer'])
.callMethod('transition', ['horizontal flip']);
}
}
<h1>Messge Flipper in Angular 2</h1>
<div class="ui message positive" id="messageContainer">
<div class="header">
Changes in Service
</div>
<p>We just updated our privacy policy here to better service our customers. We recommend reviewing the changes.</p>
</div>
<div class="ui button" (click)="triggerFlip()">Click here to flip the message</div>
<!DOCTYPE html>
<html>
<head>
<title>ng2_semantic_starter</title>
<script src="assets/js/jquery-3.1.0.min.js"></script>
<script src="assets/js/semantic.min.js"></script>
<link rel="stylesheet" href="assets/css/semantic.min.css">
<script defer src="main.dart" type="application/dart"></script>
<script defer src="packages/browser/dart.js"></script>
</head>
<body>
<my-app>
<div class="ui active inverted dimmer">
<div class="ui text large loader">Loading...</div>
</div>
</my-app>
</body>
</html>
import 'package:angular2/platform/browser.dart';
import 'package:ng2_semantic_starter/app_component.dart';
main() {
bootstrap(AppComponent);
}
name: ng2_semantic_starter
description: A Dart app that uses Angular 2
version: 0.0.1
environment:
sdk: '>=1.13.0 <2.0.0'
dependencies:
angular2: 2.0.0-beta.20
browser: ^0.10.0
dart_to_js_script_rewriter: ^1.0.1
transformers:
- angular2:
platform_directives:
- 'package:angular2/common.dart#COMMON_DIRECTIVES'
platform_pipes:
- 'package:angular2/common.dart#COMMON_PIPES'
entry_points: web/main.dart
- dart_to_js_script_rewriter
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment