Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md

README.md

A WIP Angular 2 cheatsheet for dart (alpha 36)

Bootstrap angular

import 'package:angular2/bootstrap.dart' show bootstrap;
main() => bootstrap(MyApp); //MyApp is a component

Bootstrap angular with default router

import 'package:angular2/angular2.dart' show bind;
import 'package:angular2/bootstrap.dart' show bootstrap;
import 'package:angular2/router.dart' show APP_BASE_HREF, HashLocationStrategy, LocationStrategy, ROUTER_BINDINGS;

main() {
  bootstrap(App, [
    ROUTER_BINDINGS,
    bind(APP_BASE_HREF).toValue('/'),
    // bind(LocationStrategy).toClass(HashLocationStrategy) // if you want to use #
  ]);
}

Components

@Component(selector: 'selector-name', viewBindings: const [injectables])
@View(templateUrl: "home.html", directives: const [directives])
class MyComponent {}

@View

template: replace the current element with the contents of the HTML string.

//<my-banner></my-banner>
@Component(selector: 'my-banner')
@View(template: '<div class="banner">...</div>')
class MyBanner {}

templateUrl: replace the current element with the contents loaded by the specified URL

//<my-banner></my-banner>
@Component(selector: 'my-banner')
@View(templateUrl: 'package:mypackage/my-banner.html')
class MyBanner {}
<!-- my-banner.html -->
<div class="banner">...</div>

directives: Specifies a list of directives that can be used within a template. Its optional

Add Angular core directives (NgFor, NgIf, NgNonBindable, NgSwitch, NgSwitchWhen, NgSwitchDefault)

@Component(selector: 'my-component')
@View(templateUrl: "my-component.html", directives: const [CORE_DIRECTIVES])
class MyComponent {}

Add directives/components to be used in the template

@Directive(selector: '[opacity]')
class Opacity {/* ... */}

@Component(selector: '[item]')
@View(templateUrl: "item.html")
class Item {/* ... */}

@Component(selector: 'my-component')
@View(templateUrl: "my-component.html", directives: const [Opacity, Item])
class MyComponent {}

@Component

selector: The CSS selector that triggers the instantiation of a directive.

  • element-name: select by element name.
  • .class: select by class name.
  • [attribute]: select by attribute name.
  • [attribute=value]: select by attribute name and value.
  • :not(sub_selector): select only if the element does not match the sub_selector.
  • selector1, selector2: select if either selector1 or selector2 matches.

Selector example

//<my-component></my-component>
@Component(selector: 'my-component')
@View(templateUrl: "my-component.html")
class MyComponent {}

//<div my-component></div>
@Directive(selector: '[my-component]')
@View(templateUrl: "my-component.html")
class MyComponent {}

Inject dependencies into a component

@Injectable() //Needed for Angular transformer
class MyService {}

@Component(selector: 'selector-name', appInjector: const [MyService])
class MyComponent {
    MyService service;
    MyComponent(this.service);
}

Accesing host DOM element in a component/decorator

import 'dart:html' as dom;
import 'package:angular2/angular2.dart' show Directive, ElementRef;

//<div selector-name></div>
@Directive(selector: '[selector-name]')
class MyComponent {
    dom.Element element;
    MyComponent(ElementRef ref) {
        element =  ref.nativeElement;
    }
}

properties: The properties property defines a set of directiveProperty to bindingProperty key-value pairs. Its optional

  • directiveProperty specifies the component property where the value is written.
  • bindingProperty specifies the DOM property where the value is read from.

Example of properties

//<my-component my-name="Hodor" my-desc="hooodor?"></my-component>
@Component(
    selector: 'my-component', 
    properties: const [
        'name: my-name',// -> set name(name)
        'desc: my-desc'
])
@View(templateUrl: "my-component.html")
class MyComponent {
    String _name;
    int desc;
    set name(name) => _name;
}
You can’t perform that action at this time.