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
- Instantiating a winJS control
- Accessing the winControl
- New Directives
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> 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.someVariableTo 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.