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

Timestamp:

03/30/17 11:37:03 (8 years ago)

Author:

Dominic König

Comment:

--

DeveloperGuidelines/EdenMobile/Routing

@@ -1 +1 @@
 = EdenMobile UI Routing and Controllers =
 
- - ''tbw''
+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 [https://github.com/angular-ui/ui-router/wiki 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):
+{{{#!js
+$state.go('data.update', {resourceName: resourceName, recordID: recordID}, {location: 'replace', reload: true});
+}}}
+
+...or by HTML links using fragment identifiers to encode the state reference:
+{{{#!xml
+<a href="#/data/update/{{resourceName}}/{{recordID}}">Edit Record</a>
+}}}
+
+Either variant would be resolved against this entry in {{{www/config/routing.py}}}:
+{{{#!js
+.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.