damondouglas/Angular-Dart-Check-Lists.md

## Angular-Dart-Check-Lists.md

      
    Raw
  

              Angular-Dart-Check-Lists.md
            
          
    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.
Table Of Contents


Overall

HTML
Dart


Controller

Dart
HTML


Component

Dart
HTML


Service
Filter

Dart
HTML


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')


 Register custom Filter class to extended Module class constructor
class MyModule extends Module {
    MyModule() {
        ...
        type(MyFilter);
        ...
    }
}


HTML


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