Creating the Index.html page

 Top  Previous  Next

The main purpose of the index page is:

 

1. Set the 'ng-view' into a <div> element, into which the rendered template of the current AngularJS route will be included.

2. Load the necessary resources into the application.

 

 

<!DOCTYPE html>

<html>

<head>

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

   <title>HostSurfer Example App</title>

  <script src="http://zanywhere.cybelesoft.com/js/terminal.min.js" type="text/javascript"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>

  <script src="hsangular.js"></script>

</head>

<body bgcolor="#FFFFFF">

  <div style="width:800px;height:650px">

    <div ng-view style="width:100%;height:100%"></div>

  </div>

      <div style="width:800px;height:320px;margin:auto">

              <iframe src="zanywhere.cybelesoft.com/hsdemo/" width="800px" height="400px"></iframe>

      </div>

</body>

</html>

 

Please note that, as soon as index.html is rendered, hostsurfer.js is loaded and thus the application instance of HostSurfer is created. All the required Javascript resources are also loaded. Referenced resources include hsangular.js previously created.

 

In order to facilitate the development process, the index page shows an 'iframe' containing the terminal emulator (available from the Cybele Software website) on the bottom part of the browser client area, while the application will be show at the upper part.

 

After the index.html page is ready, we can go on by creating a HostSurfer rule as explained in the next topic.