[GELÖST] MVVM Patter mit JQuery Mobile

[tsseh]

Muss ich dafür meine View dennoch in der app.js dem viewLoaderProvider bekannt machen? (edit: und wird auch ein spererater Controller geladen?)

beim viewLoaderProvider von mir ja, der nutzt aber den ui-router und nicht angular-route.

Um es noch mal deutlich zu machen, habe ich mir ein Beispiel überlegt und aufgezeichnet.
...

klingt nach nem standardfall

Mein Lösungsansatz hat sich übrigens erledigt, da wird der Controler der Detailseite nicht gestartet. Auch nicht wenn ich eine div mit ng-controller im HTML Dokument erstelle.

wenn du meinenviewLoaderProvider nutzt(der hat noch ein paar bugs, hier mal ein updateAnhang anzeigen test.zip mit ein paar controler und den templates, dazu mehr weiter unten) und meinem navigation-controller dann kannst du im nav-template über

<div class="list-group" ui-turn-off='uiSidebarLeft' ng-controller="NavigationController">
  <a href='#{{view.url}}' class="list-group-item" ng-hide="view.navigationText === undefined" ng-class="active(view.ID)" ng-repeat="view in views track by $index">{{view.navigationText | translate}}<i class="fa fa-chevron-right pull-right"></i></a>
</div>

verhindern, dass views angezeigt werden, die keinen navigationText-eintrag im registerView enthalten. sprich lässt du den weg, erscheint der view nicht im menü.
im zip sind 3 controler. der SelectController soll im menü angezeigt werden und einen weiteren view öffnen. einmal als subview (SelectSubController) und einmal als mainview (SelectMainController).
dafür bindest du den SelectController 2 mal ein, einmal mit dem subviewtemplate selectSub.html und einmal mit dem Mainviewtemplate selectMain.html

$viewLoaderProvider.registerView({
          ID: 'root.selectSub',
          moduleName: 'test.select',
          url: '/selectSub',
          templateUrl: 'templates/selectSub.html',
          controller: 'SelectController',
          requirejsName: 'selectView',
          requirejsConfig: { 
            paths: {
              'selectView': 'js/controllers/selectController'
            } 
          },
          stateConfig: {
            parent: 'root',
            reloadOnSearch: false
          },
          navigationText: 'nav.selectSub' // extra Propertys bleiben erhalten(siehe NavigationController)
        });
        $viewLoaderProvider.registerView({
          ID: 'root.selectMain',
          moduleName: 'test.select',
          url: '/selectMain',
          templateUrl: 'templates/selectMain.html',
          controller: 'SelectController',
          requirejsName: 'selectView',
          requirejsConfig: { 
            paths: {
              'selectView': 'js/controllers/selectController'
            } 
          },
          stateConfig: {
            parent: 'root',
            reloadOnSearch: false
          },
          navigationText: 'nav.selectMain' // extra Propertys bleiben erhalten(siehe NavigationController)
        });

zusätzlich musst du noch die beiden controler mit den templates registrieren, die nicht im menü erscheinen sollen und über links in den entsprechenden obigen views angewählt werden sollen

$viewLoaderProvider.registerView({
          ID: 'root.selectSub.id',
          moduleName: 'test.select.sub',
          url: '/:id',
          templateUrl: 'templates/selectSub.id.html',
          controller: 'SelectSubController',
          requirejsName: 'selectSubView',
          requirejsConfig: { 
            paths: {
              'selectSubView': 'js/controllers/selectSubController'
            } 
          },
          stateConfig: {
            [B]parent: 'root.selectSub',[/B]
            reloadOnSearch: false
          }
        });
        $viewLoaderProvider.registerView({
          ID: 'root.selectMain.id',
          moduleName: 'test.select.main',
          url: '/selectMain/:id',
          templateUrl: 'templates/selectMain.id.html',
          controller: 'SelectMainController',
          requirejsName: 'selectMainView',
          requirejsConfig: { 
            paths: {
              'selectMainView': 'js/controllers/selectMainController'
            } 
          },
          stateConfig: {
            [B]parent: 'root',[/B]
            params: {
              data: null
            },
            reloadOnSearch: false
          }
        });

der eine ist dabei ein subview, das hat den vorteil, dass der parent-controler erhalten bleibt, du also daten von diesem nutzen kannst. der "nachteil" ist dabei, dass auch der parent-view sichtbar ist, das kann gewollt sein aber auch nicht. im nicht gewollt fall, kann man das zwar über ng-if/ng-show/ng-hide/... anpassen, ist aber aufwendiger und unübersichtlicher als auf den parent zu verzichten und die daten im neuen view bei bedarf nochmal zu laden.
im 2. fall (main-view ohne parent) hab ich mal noch einen zusätzlichen parameter namens data mit eingebaut der nicht über die url verschlüsselt ist. darüber kann man auch daten übergeben, hat aber den nachteil, daß dieser nicht mehr verfügbar ist, wenn man die url selbst eingibt(einfach mal F5 drücken, dann ist nur noch die id da).

so, noch was vergessen? sag einfach bescheid.