Using AngularJS - tooltwist/documentation GitHub Wiki

(Work In Progress) The following steps were used to create pages using AngularJS for the TrackMotion project.

Step 1 - Create the Page Template

in Eclipse, copy the mustachePage and mustachePageTemplate widgets from ttWbd extension project widget's directory and rename them angularPage and angularPageWidget.
In angularPage_template/0.1/conf.xml update the label and description. Also change linkedWidget from toolbox.mustachePage to point to your new angularPage widget (e.g. guroopro_widgets.angularPage).
In the ToolTwist Designer, select misc->Reload cache to reload the cache, then File->New... and check that your new page is in the list (probably down the bottom). Check the option is there, but don't create a new page just yet.
in angularPage/0.1/template.mustache, add or remove JSP code according to your project.

modify the html tag:
```
  <html ng-app="trackmotionApp">
```

add below the body:

  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular-route.min.js"></script>

The following is a typical template:

      [[^PAGE:DESIGNER_MODE]]  
      [[PAGE:importCode]]  
      <%  
          //String jspName = "angularPage";  
          //JspHelper jh = JspHelper.getJspHelper(pageContext, jspName);  
      [[&PAGE:preFetchCode]]  
      %>  
            
      <html ng-app>  
        <head>  
          <meta charset="utf-8">  
          <title>[[PAGE:pageTitle]]</title>  
          <meta name="description" content="[[PAGE:descriptionMetatag]]">  
          <meta name="keywords" content="[[PAGE:keywordMetatag]]">  
          <meta name="generator" content="ToolTwist" />  
      [[#PAGE:canonicalUrl]]  
      	<link rel="canonical" href="[[PAGE:canonicalUrl]]">  
      [[/PAGE:canonicalUrl]]              
      [[&PAGE:headerCode]]  
        </head>  
        
        <body>  
      [[&PAGE:topCode]]  
      [[/PAGE:DESIGNER_MODE]]  
  
          <h1>Angular Test</h1>  
          Name:<input ng-model="name" type="text" placeholder="Enter a name"/>  
          <br/><br/>  
          Hello {{name}}  
    
      [[&PAGE:GENERATED_HTML_FOR_CHILD]]  
      
      [[^PAGE:DESIGNER_MODE]]  
        </body>  
      [[&PAGE:bottomCode]]            	  
        <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.min.js"></script>  
        <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular-route.min.js"></script>  
      </html>  
      [[/PAGE:DESIGNER_MODE]]

There are several things to note about this template:

The header and footer parts of the page are excluded in Designer mode by using the PAGE:DESIGNER_MODE tag. This prevents Angular and other code from interfering with the operation of the Designer. On the Test tab and in production code the header and footer are included.
The JspHelper variable set in the header needs to uncommented if you wish to use production helpers and some of the standard widgets.
The middle 'Angular Test' section will be used just until we confirm the page working.

Step 2 - Create a Page

Create a new page using File->New..., using your new angularPage page.
Create a navpoint (e.g. AngularTest) lined to the new page.
On the test tab, a text field should be displayed. As you enter a name the "Hello" message should have the name appended.

Step 3 - Create a Test Widget

For this widget we'll use the Angular code from the test page.

Create a new Mustache widget using File->New...->Mustache Widget. Call it angularTest.

Click on the template.mustache tab and enter the following:

 {{=<< >>=}}
     <h1>Angular Test</h1>
     Name:<input ng-model="name" type="text" placeholder="Enter a name"/>
     <br/><br/>
     Hello {{name}}
 <<={{ }}=>>

The first and last lines are required to change the default delimiters, as {{ and }} are used by Mustache server-side. We want our delimiters to pass through to the browser.

Place the widget on the test page created above one or more times. On the test tab, entering the name on any name field should update all the others and also all the Hello messages.

Step 4 - Create a Weather widget

This widget will display the forecast for San Francisco.

Create a new widget named sfWeather using File->New...->Mustache widget.

Enter the following for template.mustache:

 {{=<< >>=}}
 <div ng-app="myapp" ng-controller="WeatherCtrl" ng-cloak>
     <h2>Weather in San Francisco</h2>
     <weather-icon cloudiness="{{ weather.clouds }}"></weather-icon>
     <h3>Current: {{ weather.temp.current | temp:2 }}</h3>
     min: {{ weather.temp.min | temp }}, max: {{ weather.temp.max | temp }}
 </div>
 <<={{ }}=>>

Enter the following for jsHeader.js:

 var myapp = angular.module('myapp', []);
 
 myapp.factory('weatherService', function($http) {
     return { 
       getWeather: function() {
         var weather = { temp: {}, clouds: null };
         $http.jsonp('http://api.openweathermap.org/data/2.5/weather?q=san francisco,CA&units=metric&callback=JSON_CALLBACK').success(function(data) {
             if (data) {
                 if (data.main) {
                     weather.temp.current = data.main.temp;
                     weather.temp.min = data.main.temp_min;
                     weather.temp.max = data.main.temp_max;
                 }
                 weather.clouds = data.clouds ? data.clouds.all : undefined;
             }
         });
 
         return weather;
       }
     }; 
 });
 
 myapp.filter('temp', function($filter) {
     return function(input, precision) {
         if (!precision) {
             precision = 1;
         }
         var numberFilter = $filter('number');
         return numberFilter(input, precision) + '\u00B0C';
     };
 });
 
 myapp.controller('WeatherCtrl', function ($scope, weatherService) {
     $scope.weather = weatherService.getWeather();
 });
 
 myapp.directive('weatherIcon', function() {
     return {
         restrict: 'E', replace: true,
         scope: {
             cloudiness: '@'
         },
         controller: function($scope) {
             $scope.imgurl = function() {
                 var baseUrl = 'https://ssl.gstatic.com/onebox/weather/128/';
                 if ($scope.cloudiness < 20) {
                     return baseUrl + 'sunny.png';
                 } else if ($scope.cloudiness < 90) {
                    return baseUrl + 'partly_cloudy.png';
                 } else {
                     return baseUrl + 'cloudy.png';
                 }
             };
         },
         template: '<div style="float:left"><img ng-src="{{ imgurl() }}"></div>'
     };
 });

Place the widget on a page and it should display the latest forecast.

Step 5 - Move the widgets to an extension project

The widgets created above are all created in your web design project. To make them usable by other projects, or to define request handlers for the widgets you will want to move them to an extension project.

remove the widgets from any pages
Move the widget definitions

cd ~/Development/ToolTwist-8.3.1
mv webdesign/trackmotion/widgets/guroopro_zones/angularWeather guroopro_t/widgets/guroopro_widgets/angularWeather
Reload the widget definitions in the Designer using Misc->Reload cache.