Creazione di uno schermo

La parte UI di una schermata viene implementata utilizzando un singolo file HTML (<screen_name>.tpl.html) o più file HTML. È possibile dividere la UI dello schermo in più sezioni e avere HTML parziali (<screen_partial>.tpl.html) per ogni sezione. Ciò semplifica la gestione di tutto il codice HTML necessario per l'interfaccia utente.

La configurazione dell'instradamento per la schermata è registrata nel file <screen_name>.config.js come mostrato nel seguente frammento di codice:

angular.module('store')
.config(['iscStateProvider', function (iscStateProvider) {
    iscStateProvider.state('<state_name/screen_name>', 
    {
       templateUrl: '<Path to the HTML file>',
       controller: '<Name of the controller>',
       addToHistory: false | true,
        // when this attribute is set to true, it adds the state to history. 
        //By default, this is set to true.
       resourceId: '<resource_permission_id>' 
        //If a user has permission to a resource, only then the screen can be accessed by the user.					
            }) 
 }
]);

La logica per il funzionamento dello schermo viene implementata utilizzando un controller. Invece di implementare la logica di comportamento come una normale funzione javascript, viene implementata come un oggetto prototipo, che aiuta in una migliore organizzazione del codice. La logica è suddivisa in più parti di codice javascript, come descritto nella tabella seguente:

Tabella 2. Componenti di un controllore

Componente	Descrizione
model	Un oggetto JSON che è costituito da modelli che possono essere utilizzati per memorizzare i dati di backend come l'output API. Ad esempio, "orderList":{} potrebbe essere utilizzato per memorizzare l'output dell'API getOrderList .
mashupRefs	Un array di oggetti mashupref.
ui	Oggetto JSON che contiene le proprietà dell'interfaccia utente. Viene aggiunto a $scope e viene indicato come $scope.ui
ui<method>	Metodi che possono essere richiamati da eventi HTML. ui<methods> sono gestori eventi. Qualsiasi metodo con prefisso come ui viene aggiunto a $scope e può essere indicato come $scope.ui<method_name>
Helper methods	I metodi senza ui come prefisso vengono considerati come metodi helper e non è possibile accedervi utilizzando l'oggetto $scope .
Private methods	I metodi con _ come prefisso vengono trattati come metodi privati e non è possibile accedervi utilizzando l'oggetto $scope .
initialize	Questo metodo è il punto di ingresso per la logica di esecuzione. Qualsiasi mashup o chiamata API che necessita della logica init deve essere codificata in questo metodo.

Poiché la logica di comportamento viene implementata come oggetto prototipo, questo oggetto viene definito come oggetto di controllo. Pertanto, è possibile utilizzare 'this' per accedere agli attributi dell'oggetto di controllo.

Durante la scrittura della logica del controller, assicurarsi di seguire questi passi:

1. Richiamare i mashup per recuperare e conservare i dati.
2. Definire i modelli per conservare i dati richiamati dai mashup.
3. Collegare i controlli UI ai modelli.

Utilizzare iscScreen.initializeScreen($scope,{<implementation logic>}); per inizializzare la logica di funzionamento dello schermo per l'oggetto $scope .

angular.module('store').controller(‘<name of the controller>’,
  [‘<dependency injection>’,
    function(‘<list of services in dependency injection above, 
    passed as paramerters to this function>’) {
  iscScreen.initializeScreen($scope,{ 
  /**
  *ModelList
  *Models that hold data
  **/
   model:{
       },
  /**
  *MashupRefs
  *Array containing the list of mashups referred in this controller
  */
  mashupRefs : [
                {
                  mashupRefId: mashupref1,
                  mashupId: mashupid1,
                  modelName : associated model                                
                }
            ],
  ui:{
  //list of UI attributes used in the business logic and UI painting
     },
            
  //Intiliazes the screen, by calling the required mashups
  
  initialize : function(){
                },
 
  //UI methods that can be accessed from html with ui as prefix           
    uimethod : function () {
          },
            
  //Helper methods
  helpMethod1:function(){
          },
 
  //Private methods start with _
  _privateMethod1:function(){
          }                               
    });        
    }
]);