Bootstrap

HTML

<html ng-app>
  <body>
    ...
    <script type="application/dart"
        src="main.dart"></script>
    <script type="text/javascript"
        src="packages/browser/dart.js"></script>
  </body>
</html>

main.dart script

import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';

main() {
  applicationFactory().run();
}

Root Context

Declaration:

@Injectable()
class RootContext {
  bool visible;
  String name;
}

Registration:

main() {
  applicationFactory()
    .rootContextType(RootContext)
    .run();
}

HTML

<span ng-if="visible">Hello {{name}}!</span>

Module

Declaration:

class MyAppModule extends Module {
  MyAppModule() {
    install(new AnotherModule());
    bind(TypeToBind);
    bindByKey(KeyToBind);
  }
}

Registration:

main() {
  applicationFactory()
    .addModule(new MyAppModule())
    .run();
}

Bindings

One-way binding:

<span>{{ expr }}</span>
<span ng-bind=" expr "></span>

Two-way binding:

<input type="text" ng-model=" expr ">

Expressions

Statements:

expr; expr; expr

Member access:

field
nested.otherNested.field
list[42]
map['key']

Function call:

toggle()
obj.distance(42, y)

List / Map literals:

[1, 2, 3]
{'question': '?', 'response': 42}

Assignment:

field = value
nested.field = value
list[42] = value
map['key'] = value

Ternary operator:

a ? b : c

Filters:

name | uppercase
items | limitTo:2
items | limitTo:2 | uppercase

Model directives

Checkbox

<input type="checkbox"
  ng-model="expr"
  [ng-true-value="t_expr"]
  [ng-false-value="f_expr"]>

Date / Time

<input
  type="date|datetime|datetime-local|month|time|week"
  [ng-bind-type="date"]
  ng-model="myModel">

Numbers

<input type="number|range" ng-model="myModel">

Radio

<input type="radio" name="foo" ng-model="category">

Select

<select ng-model="selectedValue">
  ...
</select>

Texts

<input
  type="text|url|password|email|search|tel"
  ng-model="myModel">

<textarea ng-model="myModel"></textarea>

Content editable

<span contenteditable ng-model="name">

Attribute directives

Source attributes

<img ng-src="{{username}}.png">.
  • ng-href
  • ng-src
  • ng-srcset

Boolean attributes

<button ng-disabled="{{false}}">
  • ng-checked
  • ng-disabled
  • ng-multiple
  • ng-open
  • ng-readonly
  • ng-required
  • ng-selected

Other attributes

<svg>
  <circle ng-attr-cx="{{cx}}"></circle>
</svg>

Event directives

Element events

  • ng-abort
  • ng-beforecopy
  • ng-beforecut
  • ng-beforepaste
  • ng-blur
  • ng-change
  • ng-copy
  • ng-cut
  • ng-error
  • ng-focus
  • ng-fullscreenchange
  • ng-fullscreenerror
  • ng-input
  • ng-invalid
  • ng-load
  • ng-paste
  • ng-reset
  • ng-scroll
  • ng-search
  • ng-select
  • ng-selectstart
  • ng-submit

Mouse events

  • ng-click
  • ng-doubleclick
  • ng-contextmenu
  • ng-drag
  • ng-dragstart
  • ng-dragend
  • ng-dragenter
  • ng-dragover
  • ng-dragleave
  • ng-drop
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-mouseup
  • ng-mousewheel
  • ng-mouseout

Keyboard events

  • ng-keydown
  • ng-keypress
  • ng-keyup

Touch events

  • ng-toucheancel
  • ng-touchend
  • ng-touchenter
  • ng-touchleave
  • ng-touchmove
  • ng-touchstart

Other events

  • ng-transitionend

Examples

<button ng-click=" lastEvent = 'Click' "
  ng-doubleclick=" lastEvent = 'DblClick' ">
    lastEvent: {{lastEvent}}
</button>

Template directives

ng-bind / ng-bind-html / ng-bind-template

<div ng-bind="expression"></div>

<div ng-bind-html="expression"></div>

<div ng-bind-template="{{salutation}} {{name}}!">

ng-show / ng-hide

<div ng-show="myValue"></div>
<div ng-hide="myValue"></div>

ng-if / ng-unless

<div ng-if="condition expression">
  Removed from the DOM if ng-if is falsy
</div>
<div ng-unless="...">
  Removed from the DOM if ng-unless is truthy
</div>

ng-switch

<div ng-switch="selection">
  <div ng-switch-when="settings">Settings Div</div>
  <div ng-switch-when="home">Home Span</div>
  <div ng-switch-default>default</div>
</div>

ng-repeat

<ul>
  <li ng-repeat="item in ['foo', 'bar', 'baz']">
    {{$index}} : {{item}}
  </li>
</ul>

ng-pluralize

<ng-pluralize count="personCount"
  when="{'0': 'Nobody is viewing.',
    'one': '1 person is viewing.',
    'other': '{} people are viewing.'}">
</ng-pluralize>

ng-include

<div ng-include="{{templateUrl}}"></div>

Style directives

ng-base-css

<div ng-base-css="my_application.css">

ng-class

<p ng-class="style">String Syntax</p>
<p ng-class="[style1, style2, style3]">Array Syntax</p>
<p ng-class="{
    'text-remove': deleted,
    'strong': bold,
    'alert': caution}">Map Syntax</p>

ng-style

<span ng-style="{color: 'red'}">Sample Text</span>

ng-class-odd / ng-class-even

<li ng-repeat="name in ['John', 'Mary', 'Cate', 'Suz']">
  <span ng-class-odd=" 'odd' " ng-class-even=" 'even' ">
    {{name}}
  </span>
</li>

ng-cloak

[ng-cloak], [data-ng-cloak], .ng-cloak {
  display: none !important;
}
<div ng-cloak>

Http Service

Methods

  • call(url, method, data, params, headers)
  • delete(url)
  • get(url)
  • head(url)
  • jsonp(url)
  • post(url, data)
  • put(url, data)

Example

http.get('recipes.json')
  .then((HttpResponse response) { 
    ...
  });

Routing

Insertion Point

<ng-view></ng-view>

Routes configuration

initRoutes(Router router, RouteViewFactory views) {
  views.configure({
    'recipes': ngRoute(
      path: '/recipes',
      view: 'recipes.html'),
    'viewRecipe': ngRoute(
      path: '/recipe/:recipeId/view',
      view: 'recipe.html'),
  });
}

Module registration

bind(RouteInitializerFn, toValue: initRoutes);
bind(NgRoutingUsePushState, toValue:
   new NgRoutingUsePushState.value(false));

Custom Components

Decorator

@Decorator(
  selector: '[tooltip]',
  map: const {
    'tooltip': '@text'
  })
class Tooltip {
  final Element element;
  String text;

  Tooltip(this.element) {
    ...
  }
}
<span tooltip="Hello World!">...</span>

Component

@Component(
  selector: 'rating',
  templateUrl: 'rating_component.html',
  cssUrl: 'rating_component.css',
  map: const {
    'rating': '<=>rating',
    'max-rating': '=>maxRating'
  })
class RatingComponent {
  int rating;
  int maxRating;
  ...
}
<rating rating="rating" max-rating="5"></rating>

Formatters / Filters

Built-in Formatters

  • arrayify
  • currency[:symbol[:leading]]
  • date[:format]
  • filter:expression[:comparator]
  • json
  • limitTo:number
  • lowercase
  • number[:fractionSize]
  • orderBy:predicate[:true]
  • stringify
  • uppercase

Usage

{{ item in items | limitTo:2 }}
<li ng-repeat="item in items | limitTo:2"></li>

Chaining

{{ item in items | limitTo:2 | uppercase }}

Custom formaters

@Formatter(name: 'camelCase')
class CamelCaseFormatter {
   call(String text) {
      ...
   }
}