Adapters: Angular

Intro

The angular-winjs adapter allows for the use of WinJS controls within Angular syntax. It also allows the use of Angular data-binding within WinJS controls. angular-winjs has custom Angular declarative mark-up that is translated into WinJS controls.

API Differences from WinJS

  1. Instantiating a winJS control
  2. In WinJS, an element is declared through using the declarative markup:

    <div data-win-control="WinJS.UI.FlipView"></div>

    In the angular-winjs adapter, you would declare an control in Angular declarative syntax, like this

    <win-flip-view></win-flip-view>
  3. Accessing the winControl
  4. Unlike WinJS, in the angular-winjs adapter, the winControl is not immediately accessible. To be able to access the winControl, you must declaratively pass the winControl into your angular scope like this:

    <win-flip-view win-control="someVariable"></win-flip-view>

    You can then access the winControl like this:

    $scope.someVariable
  5. New Directives
  6. To make some of the functionalities of WinJS controls more accessable, the angular-winjs adapter created some new directives that do not exist in WinJS

    For example, a angular-winjs splitView exposes the "pane" and "content" portions of the spliview as their own controls:

    <win-split-view>
        <win-split-view-pane>SplitView Navigation Pane</win-split-view-pane>
        <win-split-view-content>SplitView Content Area</win-split-view-content>
    </win-split-view>

    The win-split-view-pane and win-split-view-content directives do not exist in winJS and were created for the purpose of making the functionaloty of the splitview more accessable in the Angular syntax

    Other new directives include <win-list-view-header>, <win-list-layout>, <win-list-view-footer> and <win-tooltip-content>

Learn More

Further information at GitHub: angular-winjs project.