<!-- browserSync -->
<!-- bower:css -->
<link rel="stylesheet" href="vendor/bootstrap-css/css/bootstrap.min.css" />
<!-- endbower -->
<!-- endcss -->
<!-- inject:css -->
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/../../../xos/core/static/xosNgLib.css">
<!-- endinject -->

<div ng-app="xos.sampleView" id="xosSampleView" class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <h1>Hi Matteo!</h1>
      <h3>Welcome to you development environment.</h3>
      <p>
        We provided this environment to help you creating a custom view.
      </p>
      <p>
        When the environment is running you will have an
        <code>auto-reload</code>
        feature enabled, so any time you update one of your files, the browser will be reloaded.
      </p>
      <p> <i>Note that is environment is already functional and that it is loading information from the XOS APIs and presenting them using the
          <code>xos-table</code>
          component.</i> 
      </p>
      <h3>Development notes:</h3>
      <p>
        This views are designed using
        <a href="https://angularjs.org/" target="_blank">Angular Js</a>
        version 1.4.7 and
        <a href="http://getbootstrap.com/" target="_blank">Bootstrap</a>
        3.3.6 is included.
      </p>
      <p>
        We just want to remind you that this development environment provide you three helper command:
        <ul>
          <li>
            <code>npm start</code>
            - will start your setup (you should already be familiar with it)
          </li>
          <li>
            <code>npm test</code>
            - will execute your unit tests defined with
            <a href="https://karma-runner.github.io/0.13/index.html" target="_blank">Karma</a>
            and
            <a href="jasmine.github.io" target="_blank">Jasmine</a>
            . You can check the
            <code>spec/</code>
            folder to see an example of your first test.
          </li>
          <li>
            <code>npm run build</code>
            - will build your dashboard and make it available to XOS
          </li>
        </ul>
      </p>
      <h3>Helpers:</h3>
      <p>
        We provide a set of helpers that you can leverage in your dashboard:
        <ul>
          <li>
            <code>xos.helpers</code>
            - A set of
            <a href="https://docs.angularjs.org/guide/services" target="_blank">Angular Services</a>
          </li>
          <li>
            <code>xos.uiComponents</code>
            - A set of
            <a href="https://docs.angularjs.org/guide/directive" target="_blank">Angular Directives</a>
          </li>
          <li>
            <code>xos.rest</code>
            - A set of
            <a href="https://docs.angularjs.org/api/ngResource/service/$resource" target="_blank">Angular $resources</a>
          </li>
        </ul>
        To know more about this helpers you can naviate to
        <code>/views/ngXosLib/</code>
        and generate the documentation with
        <code>npm run doc</code>
      </p>
      <h3>Example:</h3>
    </div>
  </div>
  <div ui-view></div>
</div>

<!-- bower:js -->
<script src="vendor/jquery/dist/jquery.js"></script>
<script src="vendor/angular/angular.js"></script>
<script src="vendor/angular-mocks/angular-mocks.js"></script>
<script src="vendor/angular-ui-router/release/angular-ui-router.js"></script>
<script src="vendor/angular-cookies/angular-cookies.js"></script>
<script src="vendor/angular-animate/angular-animate.js"></script>
<script src="vendor/angular-resource/angular-resource.js"></script>
<script src="vendor/lodash/lodash.js"></script>
<script src="vendor/bootstrap-css/js/bootstrap.min.js"></script>
<!-- endbower -->
<!-- endjs -->
<!-- inject:js -->
<script src="/../../../xos/core/xoslib/static/js/vendor/ngXosHelpers.js"></script>
<script src="/.tmp/main.js"></script>
<!-- endinject -->