Skip to content

Instantly share code, notes, and snippets.

@damondouglas
Last active April 27, 2017 06:45
Show Gist options
  • Save damondouglas/9177537 to your computer and use it in GitHub Desktop.
Save damondouglas/9177537 to your computer and use it in GitHub Desktop.
Angular Dart Check Lists

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

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}}">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment