views/ngXosLib/generator-xos/app/templates/src/index.html

<!--
Copyright 2017-present Open Networking Foundation

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->


<!-- browserSync -->
<!-- bower:css -->
<!-- endbower -->
<!-- endcss -->
<!-- inject:css -->
<!-- endinject -->

<div ng-app="xos.<%= name %>" id="xos<%= fileName %>" class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <h1>Hi <%= user.firstname %>!</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 -->
<!-- endbower -->
<!-- endjs -->
<!-- inject:js -->
<!-- endinject -->