index.html

﻿<!DOCTYPE html>
<html data- ng-app="app">
<head>
    <title>Ignite UI directives for AngularJS</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link type="text/css" rel="stylesheet" href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" />
	<link type="text/css" rel="stylesheet" href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/modules/infragistics.ui.shared.css" />
	<link type="text/css" rel="stylesheet" href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/modules/infragistics.ui.grid.css" />
	<link type="text/css" rel="stylesheet" href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/modules/infragistics.ui.editors.css" />
    <link type="text/css" rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" type="text/css" />
    <link rel="stylesheet" href="samples/sample.css" />
    <script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
    <style>
        .links a, .links button {
            font-size: 1.75em;
            color:#999;
            margin:.75em .75em 0 0;
        }

        .billboard {
            background: url(images/home-background.jpg) no-repeat center center;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            color:#fff;
            background-color: #aa8c68;
            border-bottom: 10px solid #d16717;
        }

        .billboard .row {
            margin: 1em;
        }

        .lead {
            margin-top:1em;
        }

        @media only screen and (min-width:641px){

            .lead {
                margin-top:0;
            }

            .billboard {
                min-height: 600px;
            }


            .billboard .lead {
                font-size: 1.2em;
                text-transform: uppercase;
            }

            .billboard .row {
                margin:0;
                margin-top: 4em;
            }

            .billboard h1 {
                font-size: 6em;
                margin-bottom:0;
            }

            .billboard h2 {
                font-size: 2.5em;
                margin-top: 0;
            }
        }
    </style>
</head>
<body data-ng-controller="indexController">
    <!--[if lt IE 8]>
        <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
    <div class="billboard">
        <div class="container">
            <div class="row">
                <div class="col-sm-12"><a href="http://igniteui.com" target="_blank"><img src="images/igniteui-logo.png" /></a></div>
            </div>
            <div class="row">
                <h1>Ignite UI</h1>
                <h2>AngularJS Directives</h2>
            </div>
        </div>
    </div>
    <div class="container">
        <h2>Try it out...</h2>
        <div class="row">
            <div class="col-sm-8">
                <ig-grid id="employees-grid"
                     data-source="employees"
                     primary-key="EmployeeID"
                     auto-generate-columns="false">
                    <columns>
                        <column key="EmployeeID" header-text="ID" data-type="number"></column>
                        <column key="LastName" header-text="Last Name"  data-type="string"></column>
                        <column key="FirstName" header-text="First Name" data-type="string"></column>
                        <column key="Title" header-text="Title" data-type="string"></column>
                    </columns>
                </ig-grid>
                <div class="hidden-xs hidden-sm">
                    <h4>Code</h4>
                    <pre>&lt;ig-grid id=&quot;employees-grid&quot;
     data-source=&quot;employees&quot;
     primary-key=&quot;employeeID&quot;
     auto-generate-columns=&quot;false&quot;&gt;
    &lt;columns&gt;
        &lt;column key=&quot;employeeID&quot; header-text=&quot;ID&quot; width=&quot;65px&quot; data-type=&quot;number&quot;&gt;&lt;/column&gt;
        &lt;column key=&quot;lastName&quot; header-text=&quot;Last Name&quot;  width=&quot;250px&quot;  data-type=&quot;string&quot;&gt;&lt;/column&gt;
        &lt;column key=&quot;firstName&quot; header-text=&quot;First Name&quot;  width=&quot;200px&quot; data-type=&quot;string&quot;&gt;&lt;/column&gt;
        &lt;column key=&quot;title&quot; header-text=&quot;Title&quot; data-type=&quot;string&quot;&gt;&lt;/column&gt;
    &lt;/columns&gt;
&lt;/ig-grid&gt;</pre>
                    <p>Ignite UI controls are instantiated using AngularJS directives. This example uses markup, but
                    you have the ability to use <a href="samples/igGrid-controller.html">controller options</a> as well.</p>
                </div>
            </div>
            <div class="col-sm-4">
                <p class="lead">The Ignite UI AngularJS directives offer full
                two-way databinding into the controls.</p>
                <input type="text" data-ng-model="firstEmployee.LastName" class="form-control" />
                <p class="text-muted push-down-xs">This text box is bound to the value of the last name column
                    of the first record in the grid. Edit the name in the box to see how the changes
                    are immediately reflected in the grid. This is but a taste as to what's possible
                    with the AngularJS directives. For full-fledged samples take a look at the
                    <a href="samples/igGrid.html">basic</a>, <a href="samples/igGrid-controller.html">controller options</a> and <a href="samples/grid/master-detail/index.html">master/detail</a> samples.</p>
            </div>
        </div>
        <hr />

        <h2>Samples</h2>
        <div class="links">
            <div class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    igGrid <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="samples/igGrid.html">Markup</a></li>
                    <li><a href="samples/igGrid-controller.html">Controller Options</a></li>
                    <li><a href="samples/grid/master-detail/index.html">Master/Detail</a></li>
                </ul>
            </div>
            <a class="btn btn-default" href="samples/igHierarchicalGrid.html">igHierarchicalGrid</a>
			<a class="btn btn-default" href="samples/igTreeGrid.html">igTreeGrid</a>
            <div class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    igPivotGrid <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="samples/igPivotGrid-FlatDataSource.html">igPivotGrid with Flat Data Source</a></li>
                    <li><a href="samples/igPivotGrid-XmlaDataSource.html">igPivotGrid with Xmla Data Source</a></li>
                </ul>
            </div>
            <a class="btn btn-default" href="samples/igCombo.html">igCombo</a>
            <a class="btn btn-default" href="samples/igDataChart.html">igDataChart</a>
            <a class="btn btn-default" href="samples/igDialog.html">igDialog</a>
            <a class="btn btn-default" href="samples/igEditors.html">igEditors</a>
            <a class="btn btn-default" href="samples/igHtmlEditor.html">igHtmlEditor</a>
            <a class="btn btn-default" href="samples/igLayoutManager.html">igLayoutManager</a>
            <a class="btn btn-default" href="samples/igTileManager.html">igTileManager</a>
            <a class="btn btn-default" href="samples/igMap.html">igMap</a>
            <a class="btn btn-default" href="samples/igTree.html">igTree</a>
            <a class="btn btn-default" href="samples/igUpload.html">igUpload</a>
            <a class="btn btn-default" href="samples/igVideoPlayer.html">igVideoPlayer</a>
        </div>

        <div class="push-down-md">
            <a href="https://github.com/IgniteUI/igniteui-angularjs" class="btn btn-default btn-primary btn-lg"><i class="fa fa-github"></i> View source on GitHub</a>
        </div>

    </div>
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <p><a href="https://github.com/IgniteUI/igniteui-angularjs/issues">Feedback &amp; Questions</a></p>
                    <p class="small">For more information or to download a trial of Ignite UI, please visit: <a href="http://igniteui.com">http://igniteui.com</a></p>
                </div>
            </div>
        </div>
    </footer>

    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>

	<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>

    <script src="src/igniteui-angularjs.js"></script>
    <script>var app = angular.module('app', ['ngRoute','igniteui-directives']);</script>
    <script src="samples/js/data/northwind-employees.js"></script>
    <script src="indexController.js"></script>
</body>
</html>