Changes between Version 2 and Version 3 of DeveloperGuidelines/EdenMobile/Routing


Ignore:
Timestamp:
03/30/17 11:59:11 (8 years ago)
Author:
Dominic König
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • DeveloperGuidelines/EdenMobile/Routing

    v2 v3  
    4343The role of controllers and views is equivalent to controllers/views in the Sahana Eden web application.
    4444
    45 The view template is rendered once when the state is entered the first time (unless reloading is enforced in $state.go), and the state controller executed every time when the state is entered.
     45The view template is rendered, and the state controller executed when the state is first entered (unless reloading is enforced in $state.go, then both would be reloaded).
     46
     47Unlike Sahana Eden view templates, though, placeholders in EdenMobile views are updated whenever the corresponding {{{$scope}}} attribute changes, e.g. a template
     48
     49{{{#!xml
     50<!-- in the view: -->
     51<h1>{{title}}</h1>
     52}}}
     53
     54...would replace the ''title'' placeholder with the value of {{{$scope.title}}}, similar to Sahana Eden views. But when the controller later changes {{{$scope.title}}} (e.g. in response to an event):
     55
     56{{{
     57// in the controller:
     58$scope.title = 'Something Else';
     59}}}
     60
     61...then this will also update the view (instantly, more or less).
     62
     63Equally, view elements (e.g. inputs) can be bound to {{{$scope}}} attributes (using the {{{ng-model}}} directive), so that every change of the input value will be reflected instantly in the {{{$scope}}}, thereby making it available for the controller:
     64
     65{{{#!xml
     66<!-- in the view: -->
     67<input type="text" ng-model="firstName"/>
     68}}}
     69
     70...can be accessed as:
     71{{{#!js
     72// in the controller:
     73var firstName = $scope.firstName;
     74}}}
     75
     76Besides data, the {{{$scope}}} object can also hold functions:
     77
     78{{{#!js
     79// in the controller:
     80$scope.buttonClicked = function() {
     81  // Do something
     82};
     83}}}
     84
     85...which can then e.g. be used in the view as event handlers:
     86
     87{{{#!xml
     88<!-- in the view -->
     89<button type="button" ng-click="buttonClicked()"/>
     90}}}
    4691
    4792State controllers live in the www/controllers folder, and view templates in www/views.