<script src="base.js"></script>
<script src="ui.js"></script>
<script src="angular-winjs.js"></script>

angular.module('your-module', ['winjs', 'other-module-you-depend-on', 'etc']);

<!-- Shows up on the bottom of the screen, use right-click or touch edgy gesture to show -->
<win-app-bar>
    <win-app-bar-command icon="'home'" label="'Home'"></win-app-bar-command>
    <win-app-bar-separator></win-app-bar-separator>
    <win-app-bar-command icon="'save'" label="'Save'"></win-app-bar-command>
    <win-app-bar-content>
        <win-auto-suggest-box placeholder-text="'Search'"></win-auto-suggest-box>
    </win-app-bar-content>
    <win-app-bar-command type="'toggle'" icon="'world'" label="'Planet'"></win-app-bar-command>
</win-app-bar>

The current query text is: {{queryText}}.<br/>
<win-auto-suggest-box query-text="queryText"></win-auto-suggest-box>

angular.module("yourAngularApp", ["winjs"]).controller("yourController", function ($scope) {
    $scope.contentDialogHidden = true;
    $scope.showContentDialog = function () {
        $scope.contentDialogHidden = false;
    };
});
<win-content-dialog primary-command-text="'Primary Command'" secondary-command-text="'Secondary Command'" title="'Title'" hidden="contentDialogHidden">
    Add your content here
</win-content-dialog>
<button ng-click="showContentDialog()">Show Dialog</button>

<win-date-picker current="date" on-change="dateChanged()"></win-date-picker>

<win-flip-view item-data-source="ratings" on-page-selected="pageSelected()">
    <win-item-template>This flip view item's rating is: {{item.data.rating}}</win-item-template>
</win-flip-view>

<button id="flyoutAnchor">Show a flyout!</button>
<win-flyout anchor="'#flyoutAnchor'">This is the flyout content!!</win-flyout>

<win-hub>
    <win-hub-section header="'First section'" is-header-static="true">
      Hubs are useful for varied content
    </win-hub-section>
    <win-hub-section header="'The second section'">
      This hub is boring however, it just has things like data bindings: {{ratings.length}}
    </win-hub-section>
    <win-hub-section header="'The tail...'">
      Because it's only purpose is to show how to create a hub
    </win-hub-section>
</win-hub>

<win-item-container>
  An ItemContainer is a wrapper around content that adds pressed
  and cross-slide selection behaviors!
</win-item-container>

<div>Selected count: {{selection.length}}, indexes: {{selection.toString()}}</div>
<win-list-view item-data-source="ratings" selection="selection">
    <win-list-view-header>This is a ListView header</win-list-view-header>
    <win-item-template>This list view item's rating is: {{item.data.rating}}</win-item-template>
    <win-list-layout></win-list-layout>
    <win-list-view-footer>This is a ListView footer</win-list-view-footer>
</win-list-view>

<button id="menuAnchor">Show a menu!</button>
<win-menu anchor="'#menuAnchor'">
    <win-menu-command label="'command the first'"></win-menu-command>
    <win-menu-command label="'command the second'"></win-menu-command>
    <win-menu-command label="'this would be a great place for ng-repeater...'"></win-menu-command>
</win-menu>

<win-pivot>
    <win-pivot-left-header>Custom Left Header</win-pivot-left-header>
    <win-pivot-item header="'First'">
      Pivots are useful for varied content
    </win-pivot-item>
    <win-pivot-item header="'Second'">
      This Pivot  is boring however, it just has things like data bindings: {{ratings.length}}
    </win-pivot-item>
    <win-pivot-item header="'Tail...'">
      Because it's only purpose is to show how to create a Pivot
    </win-pivot-item>
    <win-pivot-right-header>Custom Right Header</win-pivot-right-header>
</win-pivot>

The current rating is: {{ratings[0].rating}}.<br/>
<win-rating max-rating="5" user-rating="ratings[0].rating"></win-rating>

<win-semantic-zoom>
    <win-list-view item-data-source="data" group-data-source="data.groups">
        <win-item-template>
            The data is: {{item.data}}
        </win-item-template>
        <win-group-header-template>
            The group is: {{item.key}}
        </win-group-header-template>
    </win-list-view>
    <win-list-view item-data-source="data.groups">
        <win-item-template>
            The group is: {{item.key}}
        </win-item-template>
    </win-list-view>
</win-semantic-zoom>

angular.module("yourAngularApp", ["winjs"]).controller("yourController", function ($scope) {
    $scope.splitViewElement = document.getElementById("splitView");
});
<win-split-view-pane-toggle split-view="splitViewElement"></win-split-view-pane-toggle>
<win-split-view id="splitView">
    <win-split-view-pane>
        SplitView Navigation Pane
        <win-split-view-command label="'Home'" icon="'home'" on-invoked="goToHome()"></win-split-view-command>
        <win-split-view-command label="'Settings'" icon="'settings'" on-invoked="goToSettings()"></win-split-view-command>
    </win-split-view-pane>
    <win-split-view-content>SplitView Content Area</win-split-view-content>
</win-split-view>

<win-tool-bar>
    <win-tool-bar-command label="'This is a ToolBar command'" icon="'add'"></win-tool-bar-command>
    <win-tool-bar-separator></win-tool-bar-separator>
    <win-tool-bar-content>
        <win-search-box placeholder-text="'Search'"></win-search-box>
    </win-tool-bar-content>
</win-tool-bar>

<win-time-picker current="time"></win-time-picker>

<win-toggle-switch checked="toggleDisabled" label-on="'Other Switch Disabled'" label-off="'Other Switch Enabled'"></win-toggle-switch>
The state is: {{toggleState}}<br/>
<win-toggle-switch checked="toggleState" disabled="toggleDisabled"></win-toggle-switch>

<win-tooltip>
    <win-tooltip-content>This can have arbitrary content, like images...</win-tooltip-content>
    This has a tooltip, hover and see...
</win-tooltip>

<!-- If you ever need access to the WinJS winControl, you can expose it to your Angular scope by using the win-control directive -->
<win-pivot win-control="pivotWinControl">
    <win-pivot-item header="'Sample'">
      This Pivot is showing how to access its winControl through Angular. 
      The winControl can now be accessed as a variable on the Angular scope, using the same name that was 
      specified in the directive. In this case, $scope.pivotWinControl
    </win-pivot-item>
</win-pivot>

npm install
npm test