Angular Dart Check List

The following shows what to watch out for when making Angular Dart applications. For more information about Angular Dart, see angulardart.org.

Overall

Table of Contents

HTML

Provide ng-app attribute in html element
```
<html ng-app>
</html>
```

Add shadow_dom.min.js and dart.js scripts into html

<script src="packages/shadow_dom/shadow_dom.min.js"></script>
<script src="packages/browser/dart.js"></script>

Dart

Import the angular dart library
```
import 'package:angular/angular.dart';
```
Provide the temporary fix using the Mirrors annotation
```
@MirrorsUsed(override:'*')
import 'dart:mirrors';
```
Call ngBootstrap method in main
```
void main {
    ngBootstrap();
}
```

Controller

Table of Contents

Dart

@NgController Annotation

Put the @NgController annotation before the class declaration
```
@NgController (
...
)
class MyControllerClass {
...
```
Define the selector and publishAs attributes to the @NgController annotation
```
@NgController (
    selector: '...',
    publishAs: '...'
)
```

Put the selector name in brackets

@NgController (
    selector: '[mycontroller]'
)

Provide name of publishAs to be referenced from html

@NgController (
    selector: '...',
    publishAs: 'ctrl'
)

Define Module

Define an extending Module class
```
class MyModule extends Module {
...
}
```

Provide your Controller class into the type method in its constructor

class MyModule extends Module {
    MyModule() {
        type(MyControllerClass);
    }
}

Call extending Module class's constructor in ngBootstrap method call
```
ngBootstrap(module: new MyModule());
```

Data Binding

Provide the @NgOneWay, @NgTwoWay, or @NgAttr annotation before the property

@NgOneWay
int value;  // Can be any type.

@NgTwoWay
int value;  // Can be any type.

@NgAttr
String value; // String only.

HTML

Provide controller selector in parent HTML element
```
<div mycontroller></div>
```

Reference property or method in {{}} as member of publishAs annotation of controller

<input ng-model="{{ctrl.property}}">
<button ng-click="{{ctrl.method()}}">Click Me</button>

Component

Table of Contents

Dart

@NgComponent Annotation

Put the @NgComponent annotation before the class declaration
```
@NgComponent (
...
)
class MyComponentClass {
...
```

Define the selector, templateUrl, cssUrl, and publishAs attributes to the @NgComponent annotation

@NgComponent (
    selector: 'mycomponentselector',
    templateUrl: 'path/to/component/html',
    cssUrl: 'path/to/component/css',
    publishAs: 'cmp'
)

Add reference to Component class in type call of extended Module class constructor

class MyModule extends Module {
    MyModule() {
        ...
        type(MyComponent);
        ...
    }
}

HTML

Declare component selector as element name in HTML

<html ng-app>
...
    <mycomponentselector ...></mycomponentselector>

Service

Table of Contents

Add @NgInjectableService() annotation before the class definition of the service
```
@NgInjectableService()
class MyService {
...
```

Call service methods from Controller

MyService ns;

void someMethod {
    ...
    ns.methodCall();
    ...
}

Add service class name to type call of extended Module class constructor

class MyModule extends Module {
    ...
    type(MyService);
    ...
}

Filter

Table of Contents

Dart

Provide @NgFilter annotation before class definition
```
@NgFilter(name: '...')
class MyFilter {
...
```
Provide selector name to @NgFilter annotation
```
@NgFilter(name: 'myfilter')
```

class MyModule extends Module {
    MyModule() {
        ...
        type(MyFilter);
        ...
    }
}

HTML

Provide filter selector name to value subjected to filtering
```
<input value="{{ctrl.value | myfilter}}">
```

damondouglas/Angular-Dart-Check-Lists.md

Angular Dart Check List

Table Of Contents

Overall

HTML

Dart

Controller

Dart

@NgController Annotation

Define Module

Data Binding

HTML

Component

Dart

@NgComponent Annotation

HTML

Service

Filter

Dart

HTML