EdenMobile UI Routing and Controllers

EdenMobile is a single-page application (SPA), i.e. it only has a single page www/index.html which is loaded when the app starts, and has parts of its contents replaced as the user interacts with it.

Instead of "pages" to display different application views, EdenMobile implements application states. Each state has its own "view template" that defines the inner HTML of the front-page, and a controller that supplies data and processing methods for the UI widgets.

Routing

The routing of user actions to the different app states is provided by the ​AngularJS UI Router.

States have names to reference them, and state references can additionally contain parameters to pass to the state controller.

States can be entered either by using $state.go() (=similar to Sahana Eden's redirect(), just without leaving the page):

$state.go('data.update', {resourceName: resourceName, recordID: recordID}, {location: 'replace', reload: true});

...or by HTML links using fragment identifiers to encode the state reference:

<a href="#/data/update/{{resourceName}}/{{recordID}}">Edit Record</a>

Either variant would be resolved against this entry in www/config/routing.py:

.state('data.update', {
    url: '/{resourceName}/{recordID:int}',
    views: {
        'data': {
            templateUrl: 'views/data/update.html',
            controller: "EMDataUpdate"
        }
    }
})

...and let the UI router:

• replace the contents of the <ion-nav-view> directive on the www/index.html front-page with www/views/data/update.html (executing any directives)
• invoke the EMDataUpdate controller (defined in wwww/controllers/update.js)
• pass the resourceName and recordID parameters to the $stateParams, from where the controller can access them

View and Controller

The role of controllers and views is equivalent to controllers/views in the Sahana Eden web application.

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.

State controllers live in the www/controllers folder, and view templates in www/views.