[GELÖST] MVVM Patter mit JQuery Mobile

[tsseh]

also wollte ich mir das ganze wieder im Browser anzeigen lassen. => phonegap server => nix

phonegap run wenn das nicht geht sehen wir weiter

- - - Aktualisiert - - -

auf jeden fall solltest du die html-datei einfach lokal im browser öffnen können.
dann kannst du dir auch die phonegap-gui installieren und damit weitermachen

- - - Aktualisiert - - -

Leider ist dann kein Emulator gestartet

https://cordova.apache.org/docs/de/latest/guide/platforms/android/index.html

 

[Kaktus96]

Hallo,

erstmal danke an dir tsseh das du dich mit mir herumschlägst!! Große Klasse

ich glaube langsam, dass ich nicht ganz auf der Höhe bin. Ich werde zur Zeit wieder daran erinnert warum ich nicht in die Webentwicklung gegangen bin ^^. Die Einrichtung von Entwicklungsumgebungen wurden auch immer fein von Arbeitskollegen gemacht. Das rächt sich gerade.

Option eins und zwei von @tsseh: habe ich nun probiert und dokumentiert.

#1 Anlegen und starten des Projekts über die Win CLI

Thumbnail, da sehr groß

#2 Navigation im Browser


#3 Ergebnis


Bei #3 spielt es keine Rolle ob ich von Schritt #2 komme oder einfach die index.html aus dem Pfad wetter\www\ mit Firefox, Chrome oder IE öffne.

Das Ergebins weicht letzendlich immer noch vom Tutorial ab und ich habe überhaupt keinen schimmer wie ich das Problem lösen kann.
Aus dem Tutorial:

Insgesamt fehlt ja nicht nur CSS sondern auch Content (z.B. das welcome to weather/wetter App)

git, bower, gulp etc. wurden übrigens schon via npm install -g aktuallisiert.

LG
Kaktus

/edit: Ich habe vergessen zu erwähnen, das dass Ergebnis über die Phonegap GUI genau so aussieht.

 

[tsseh]

#3 das ist das reine html-template ohne von angular verarbeitet worden zu sein. da ist also was bei #1 schiefgelaufen(kann die bilder unter #1 nicht sehen)

ich lade dir heute abend mal ein angular testprojekt hoch was #1 entspricht.

- - - Aktualisiert - - -

ich hab mal 4 beispiele gemacht

Anhang anzeigen angular.test.zip
das 1. ist ein standard angular-projekt mit einem modul "MyApp" unter js/app.js
der MainController ist über die direktive ng-controller direkt im index.html festgelegt
das modul legt 2 routen fest die einmal das template templates/home.html laden wenn "/" im hash der url steht und bei "/test" wird das template templates/test.html geladen für welches der controller "TestController" als zuständig erklärt wird.
geladen werden die templates in den über die ng-view direktive festgelegten bereich im index.html.
der TestController ist damit nur für seinen view zuständig wenn dieser über die url gewählt wurde, der MainController für den gesammten body
alle scripte sind hier statisch im body eingetragen
Anhang anzeigen angular.test.require.zip
im 2. beispiel werden alle scripte über require.js geladen. require.js wird in js/main.js configuriert, so dass module und path zu diesen bekannt sind.
außerdem habe ich ng-route durch den ui-router ausgetauscht(der gefällt mir besser und er kann auch subviews handlen).
in js/main.js wird dann js/app.js geladen, welches das angular-modul "testApp" enthält.
das require-module "angular" wird auch geladen und initialisiert, wobei das angular-modul "testApp" an den body gebunden wird.
dann musste ich hier noch einen Hack einbauen (der eigentlich in die require.js config gehört) damit mobile-angular-ui funktioniert. mobile-angular-ui verwendet FastClick und hat das auch in seinem js-file enthalten. im gegensatz zu mobile-angular-ui unterstützt FastClick aber require.js(einen amd-loader) und exportiert sich selbst nur noch als amd-modul wenn es über require.js geladen wird und nicht mehr als globale variable. mobile-angular-ui erwartet FastClick aber als globale variable und nicht als dependency-modul. deswegen wird hier auch FastClick geladen und als globale variable eingetragen.
js/app.js hat selbst wieder die require-module "angular, "uiRouter" und "mobileUI" als abhängigkeit angegeben, weswegen diese auch geladen werden (angular ja schon im main.js und angular hat wieder jquery als abhängigkeit in der require config angegeben)
das require-modul js/app.js implementiert das angular-modul "testApp" und legt wieder diese 2 routen fest.
zusätzlich wird eine abstrakte route erstellt welche die navigation und eine platzhalter für den eigentlichen view der beiden echten routen(der hier subview ist) enthält. der controler für die abstrakte route ist gleich inline angegeben und ist parent der beiden anderen controler.
die beiden echten routen haben eine resolve-proprety, d.h. es wird der view erst erzeugt, wenn diese aufgelöst wurde. das nutze ich hier um die controler über require.js dynamisch zu laden wenn der view angelegt werden soll, weil die entsprechende route gesetzt wurde.
hier muss jetzt aber getrickst werden. normalerweise werden controler die über angular.module().controler(...) definiert werden beim laden des moduls an einem provider registriert über einen providerInjector. der providerInjector ist aber gekapselt, so daß dieser zur laufzeit nicht mehr zugreifbar ist. in angular.module().config() blöcken ist er es aber.
deswegen werden im 1. configblock alle möglichen provider besorgt und die entsprechenden module-funktionen controler(), service(), ... werden überschrieben so dass sie auf die besorgten provider zugreifen und an diesen die controler, services, filter ... registrieren.
Anhang anzeigen angular.test.loader.require.zip
das ganze hat jetzt einen nachteil, den beispiel 3 behebt.
controler, services ... lassen sich nur noch für das eine modul welches die controler(), service(), ... funktionen überschrieben hat registrieren. hat man jetzt einen controler ... welcher geladen werden soll aus einem anderen modul oder der controler welcher geladen werden soll hat etwas aus einem anderen modul als abhängigkeit geht das ganze nicht mehr.
das löst hier das angular-modul "viewLoader" unter js/loader.js. der viewLoaderProvider hat eine funktion registerView die eine route erzeugt, den controler lädt und das template festlegt.
ob da alles geht, oder sich irgendwas nicht registrieren lässt, weil ich vom falschen injektor oder provider ausgehe musst du mal sehen. filter z.b habe ich nicht getestet. alles hier im beispiel geht aber.
dann ist die navigation hier noch in einen eigenen controler ausgelagert.
Anhang anzeigen angular.test.loader.require.internationalization.001.zipAnhang anzeigen angular.test.loader.require.internationalization.002.zipAnhang anzeigen angular.test.loader.require.internationalization.003.zip das sind 3 teile einer zip und hießen eigentlich xxx.zip.001, xxx.zip.002 und xxx.zip.003 ich kann aber nur zip hochladen, einfach wieder umbenennen und mit 7zip entpacken.
hier ist auch ein ordner namens vendor enthalten, den musst du in die 3 anderen beispiele auch kopieren
beispiel 4 demonstriert nur mal die sprach/locale unterstützung

 

[Kaktus96]

Zur Information: Tsseh's Archive funktionieren einwandfrei und lassen sich ebenfalls gut in ein Phonegap Projekt integrieren.
Selbst kann ich allerdings immer noch kein Moible Angular UI Projekt erzeugen, aber das ist nun erstmal nicht so wild, da wir ja das von Tsseh haben
Zu einem späteren Zeitpunkt werde ich mir das wohl noch mal genauer angucken, jedoch wird jetzt erstmal ENTWICKELT )
Danke Tsseh!
/e Wer mir nun noch ne super IDE nennen kann, macht mich sehr glücklich
Ich schaue nebenbei selbst.

/e²
Hat jemand ein cooles Tool um das CSS einfach zu editieren? Am besten so wie der Themeroller von JQuery. Ich kennen nun shcon Stylizer aber das ist am Ende halt doch umständlicher. Wenn ich so ein Tool wie bei JQuery finde, bin ich happy ☺

 

[andreax]

Echt Jetzt du plagst dich lieber mit diesen Bibliotheks-Monstern rum nur um bischen model view Trennung für eine
Browser APP?
Bis du die Bibliotheken in griff bekommst vergeht ein halbes Jahr pro Biblio auch für einen IT Experten.
Ok sagen wir Zeit spielt keine Rolle. Doch du wirst von all den Biblios kaum 10% effektiv nutzen alles andere
ist Ballast. Die bringens nur wenn du alle Browser in deine App einbeziehst.
Bei allen Browsern die nicht älter sind als 5 Jahre kommst du mit html css javascript und eventuell php
super zurecht und hast fast automatisch MVVM wenn du die Dateien in .html php. js .css aufteilst
mit php gliederst du ein header ein content und footer Teil
mit css bedienst du zu 95% der View
css transition
css animation
css transform
css media Queries sind dabei deine Helfer.
und javascript kümmert sich um die clientseitige Logik.

Jquery und co kochen auch nur mit Wasser.

und glaub nicht das dich bootstrap davor bewahrt css zu lernen.
Gerade die Mediaqueries mußt du oft per Hand nachstellen.
und BS ist dabei wenig hilfreich weil es viele Css Klassen mit importend vorbelegt hat.
und du dann nur mit inline-styles reagieren kannst und dann ist dein MVVM für die Katz.
Auch JS wirst du brauchen denn das Eine oder Andere zwickt immer Irgendwo.

auch wenn das nicht die super Idee für dich ist,
ist es vielleicht eine Überlegung wert.

MFG

 

[tsseh]

Selbst kann ich allerdings immer noch kein Moible Angular UI Projekt erzeugen

eine index.html erzeugen und los gehts

Wer mir nun noch ne super IDE nennen kann, macht mich sehr glücklich

ein texteditor und ein browser

Hat jemand ein cooles Tool um das CSS einfach zu editieren?

da wirst du wohl die less-dateien von mobile angular ui anpassen müssen und dann mobile angular ui selbst builden

Ok sagen wir Zeit spielt keine Rolle.

gerade der zeitfaktor spielt eine rolle, frameworks werden ja zum zeitspaaren entwickelt

Doch du wirst von all den Biblios kaum 10% effektiv nutzen alles andere
ist Ballast. Die bringens nur wenn du alle Browser in deine App einbeziehst.

wieso das jetzt?

Bei allen Browsern die nicht älter sind als 5 Jahre kommst du mit html css javascript und eventuell php
super zurecht

klar kannst du das alles selber machen, aber wozu, wenn alles schon fertig vorhanden ist?

Jquery und co kochen auch nur mit Wasser.

gerade jquery (auch wenn es hier um angular geht) macht vieles dermaßen einfach, deswegen ist jquery ja quasi standard und sogut wie überall dabei

 

[andreax]

tut mir leid das ich das Thema js vs js.-Bibliotheken an falscher Stelle angeschnitten habe.

Es ist ja schon so das man Jquery vor Javascript lernt und da spreche ich aus eigener Erfahrung.
Weil ich meinte es wäre einfacher und bequemer.
Aber dem ist nicht mehr so.
Und mir kommt es so vor als würde uns das auch ein bisschen eingeredet.

und um hier die Unmenge an Frameworks und Biblios zu ergänzen.
wirklich einfach installiert und passend für multi-user-apps wäre doch node-js mit meteor.

 

[tsseh]

tut mir leid das ich das Thema js vs js.-Bibliotheken an falscher Stelle angeschnitten habe.

warum? es gibt keine falsche stelle

Es ist ja schon so das man Jquery vor Javascript lernt und da spreche ich aus eigener Erfahrung.

jquery in ja auch js. also muss man js können um jquery zu verwenden.

Weil ich meinte es wäre einfacher und bequemer.
Aber dem ist nicht mehr so.

es ist aber einfacher und bequemer, angefangen damit, dass alles relevante am jquery objekt gekapselt ist, weiter geht es über filterfunktionen und hört mit dommanipulationen noch lange nicht auf.

und um hier die Unmenge an Frameworks und Biblios zu ergänzen.
wirklich einfach installiert und passend für multi-user-apps wäre doch node-js mit meteor.

auch das kann man nutzen, ist aber eigentlich wieder was anderes

 

[andreax]

Klar muss man JS erst einmal kennen lernen.Aber können nicht.
ajax,events,animation und vor allem traversieren im DOM wird alles von JQ übernommen.
ich wuste bevor ich mich dazu entschlossen habe JS pur zu verwenden,
nicht so richtig wie document.getElementBy... zu verwenden war,

Es stimmt JQ var eine riesen Zeitersparnis aber hauptsächlich wegen der immensen Inkompatibilität der Browser,
by JS und CSS.
Auch der IE ist ab 9 od. 10 W3C konform.

wo bleibt dann die Zeiteinsparung?
beim Traversieren nicht mehr den zB. document.querySelector und querySelectorAll usw. halten hier schon locker mit.
Dazu spart man sich ein kopiertes DOM als Objekt.

Bei den Animationen kann mann nun leicht auf CSS Animationen ausweichen und mit JS steuern,bei gleicher Qualität und Performance.
und bei allem ist Ansicht und Logik getrennt.
der Zeitvorsprung ist nur noch minimal.

Was die Lesbarkeit und Übesichtlichkeit des Codes angeht bin ich froh wenn ich den durcheinander von JQ los bin.

 

[tsseh]

Klar muss man JS erst einmal kennen lernen.Aber können nicht.

wenn man kein js kann, kommt man mit jquery noch weniger zurecht als mit nativ browser apis.

ajax,events,animation und vor allem traversieren im DOM wird alles von JQ übernommen.

ja, und das sehr gut

ich wuste bevor ich mich dazu entschlossen habe JS pur zu verwenden,
nicht so richtig wie document.getElementBy... zu verwenden war

nochmal, jquery ist auch js pur, kapselt aber die browser apis. das ist in jeder programmiersprache usus. z.b die MFC von microsoft.
https://de.wikipedia.org/wiki/Microsoft_Foundation_Classes

Es stimmt JQ var eine riesen Zeitersparnis aber hauptsächlich wegen der immensen Inkompatibilität der Browser,
by JS und CSS.

ich denke mal kein mensch hat jquery wegen der "immensen Inkompatibilität der Browser" verwendet, die waren überhaupt nicht so groß wie das hier bei dir den anschein erweckt.

wo bleibt dann die Zeiteinsparung?
beim Traversieren nicht mehr den zB. document.querySelector und querySelectorAll usw. halten hier schon locker mit.

nein eben nicht. natürlich kannst du rein funktional

var elem = getElementById("elem");
var divs = elem.querySelectorAll("div");
for (index=0; index < divs.length; index++)
{
  divs[index].addEventListener("click", function(){});
}

schreiben. nur ist es objektiert einfach übersichtlicher und leichter verständlich

var $elem = $("#elem");
var $divs = $elem.find("div");
$divs.on("click", function(){});

Dazu spart man sich ein kopiertes DOM als Objekt.

???

Bei den Animationen kann mann nun leicht auf CSS Animationen ausweichen und mit JS steuern,bei gleicher Qualität und Performance.

animationen kannst du komplett rauslassen aus der betrachtung. wer baut denn animationen als solche in seine seite ein? wenn dann möchtete man ein bestimmtes controlelement welches vieleicht animiert ist oder auch nicht.
dann nimmt man das control was in der gerade verwendeten UI-bibliothek vorhanden ist und gut. das wird dann wieder mit großer wahrscheinlichkeit mit jquery realisiert und womöglich auch animiert sein, aber sonst hat man mit animationen doch nichts zu tun.

und bei allem ist Ansicht und Logik getrennt.

Ansicht und Logik zu trennen hat ja nichts mit css und js zu trennen gemeinsam. eine animation ist präsentation, egal ob mit js oder css realisiert. und nicht jede animation bekommst du über css gelöst, weil du immer einen state benötigst den du nicht immer hast.

der Zeitvorsprung ist nur noch minimal.

der zeitvorsprung ergibt sich dadurch, das man nicht das rad zum x. mal erfindet, sondern einfach ein fertiges acordion control nimmt anstelle eins zu bauen.

Was die Lesbarkeit und Übesichtlichkeit des Codes angeht bin ich froh wenn ich den durcheinander von JQ los bin.

sehe ich anders

 

[andreax]

ich denke mal kein mensch hat jquery wegen der "immensen Inkompatibilität der Browser" verwendet, die waren überhaupt nicht so groß wie das hier bei dir den anschein erweckt.

Ja für alle die Flash od Actionscript verwendet haben für alle Anderen wars das reine Chaos nur mal die ActivX elemente und conditional comments im IE.
und das Boxmodel für css das bis jetzt noch ertrickst werden muss. BRRRRRRR schüttl schüttl
da kann man gar nicht übertreiben.

nur ist es objektiert einfach übersichtlicher und leichter verständlich

Drotzdem ist es doppelt gemobbelt wenn das Dom von JQ in ein Objekt eingelesen wird.
Alle Tags alle Klassen und Id's sortiert in dieses Objekt. Auch wenn ich nur 1 oder 2 davon benötige ???
und funktionale Abfragen kann ich auch in ein Object einbinden.

der zeitvorsprung ergibt sich dadurch, das man nicht das rad zum x. mal erfindet, sondern einfach ein fertiges acordion control nimmt anstelle eins zu bauen.

Und dafür das ganze JQ + JQ-UI und wenn sein muss auch noch JQ-mobile.Stimmt ist das praktisch.
Aber es klopft ja schon JS6 an die Tür und mit besseren neuen Keywords wie class und let.
und da kann ja sein, wird es schon mal wo fertige Akkordion Klassen zu finden geben die man in das eigene Projekt
übernehmen kann "wiederverwertbarkeit" dafür hat man Object orientiertes programmieren entwickelt.
Wozu Schuhe kaufen wenn ich nur Schnürsenkel brauche?

 

[tsseh]

Drotzdem ist es doppelt gemobbelt wenn das Dom von JQ in ein Objekt eingelesen wird.
Alle Tags alle Klassen und Id's sortiert in dieses Objekt. Auch wenn ich nur 1 oder 2 davon benötige ???
und funktionale Abfragen kann ich auch in ein Object einbinden.

du hast eine falsche vorstellung davon wie jquery arbeitet. jquery ruft einfach nur getElementById auf, wenn du den #id selektor nutzt, getElementsByClassName wenn du den .class selector nutzt, sonst i.d.R querySelectorAll

Aber es klopft ja schon JS6 an die Tür und mit besseren neuen Keywords wie class und let.

und was haben sprachfeatures mit jquery zu tun?

"wiederverwertbarkeit" dafür hat man Object orientiertes programmieren entwickelt.

und jquery ist da der 1. schritt

Wozu Schuhe kaufen wenn ich nur Schnürsenkel brauche?

warum die schnürsenkel selber machen, wenn welche in der schublade liegen?

 

[andreax]

Ich bestreite nicht das JQuery,Prototype, react, angular ... das Programmieren mit Javascript vereinfachen oder bequemer gestalten
Für mich steht aber fest das Javascript lange nicht so unbequem ist das man immer auf die Helferlein angewiesen ist.
Leider steckt die Diskussion hier fest wahrscheinlich auch wegen meines mangelnden Fachwissen über Frameworks usw.
@tsseh Danke für deinen Input

MFG Andreas

 

[Kaktus96]

Hey,

erstmal danke für die Diskussion das finde ich immer gut. Nun habe ich das Beispiel von tessh um ein Impressum erweitert.
Dabei tritt ein merkwürdiges Phänomen auf. Undzwar kann keiner der beiden Buttons unter "Sprache wählen" mehr betätigt werden und auf der Seite "Nur ein Test" wird der Standard-Text nicht mehr angezeigt (Live Änderung über das Eingabefeld werden jedoch erkannt). Im Browser sind der Cache und die Cookies gelöscht. Über die PhoneGap Test App tritt der Fehler auch auf.

Durch meine Versionsverwalltung kann ich natürlich auch ganz genau aufzeigen was ich geändert habe

www/locales/de.json

{
  "appname": "Meine Test-App",
  "nav": {
    "home": "Zur Startseite",
    "test": "Nur ein Test",
    "locale": "Sprache wählen",
    "imprint": "Impressum"
  }
}

bei en.json dann:

,"imprint": "Imprint"

einen ImprintController analog zum homeController (www/js/controllers/)

(function () {
  'use strict';
  
  define([
    'angular',
    'translate',
    'translateLoaderPartial'
  ], function(angular)
  {
    angular.module('test.imprint', [
      'pascalprecht.translate'
    ]).controller('ImprintController', [
      '$scope', 
      '$translate', 
      '$translatePartialLoader',
      function ($scope, $translate, $translatePartialLoader)
      {
        $translatePartialLoader.addPart('imprint');
      }
    ]);
  });
}());

imprint.html dann ebenfalls analog zu home.html (/www/templates/)

<section class="section container-fluid">
	abc
  <h1 class="page-header"> {{ 'home.welcome' | translate }}"{{ 'appname' | translate }}"</h1>
  {{testVarRoot}}
</section>

Diese Dinge habe ich dann fix im app.js (www/js/) eingebuden und das wars auch schon.

 $viewLoaderProvider.registerView({
          ID: 'root.impress',
          moduleName: 'test.imprint',
          url: '/imprint',
          templateUrl: 'templates/imprint.html',
          controller: 'ImprintController',
          requirejsName: 'imprintView',
          requirejsConfig: { 
            paths: {
              'imprintView': 'js/controllers/imprintController'
            } 
          },
          stateConfig: {
            parent: 'root',
            reloadOnSearch: false
          },
          navigationText: 'nav.imprint' // extra Propertys bleiben erhalten(siehe NavigationController)
        });

(Den gesamten Code des Controllers gibts hier auf pastebin)

Hat wer ne Idee was mit den locals und js auf einmal nicht stimmt? Die Kommate in den Liste habe ich richtig gesetzt und Klammerfehler sind mir auch nicht aufgefallen.

LG

 

[tsseh]

fehlerkonsole?
hast du die sprachdateien fur das imprint modul?

 

[Kaktus96]

Nein die Sprachdateien hatte ich nicht. Das war das Problem danke

 

[Kaktus96]

Hallöle zusammen,

dank eurer Hilfe nimmt mein Projekt so langsam gestalt an. Immer mal wieder muss ich mir das Beispiel von teesh anschauen oder in Dokumentationen wühlen, aber ansonsten wäre es auch langweilig.
Jetzt habe ich jedoch ein Problem zudem ich ich nichts finden kann. (Es gibt da mit Sicherheit Foreneinträge zu, aber ich finde sie nicht)
Undzwar geht es um das Routing. In meinem Projekt nutze ich angular-route. Bisher musste ich nur in der Sidebar (siehe teesh Beispiel) neue Links hinzufügen, das hat gut funktioniert. Nun habe ich jedoch eine View in der eine Liste von Elementen steht. Jedes Element hat eine ID und ich möchte via ng-click (was anderes geht auch..) eine Detail-Ansicht eines jeden Elementes öffnen lassen.
Meine in ng-click hinterlegte Methode (Im Controller), erhält die Prameter und gibt diese bisher auch erfolgreich mit alert aus.

Jetzt weiß ich allerdings nicht, wie ich mein Detail-Template und Controler mit der Element-ID (als Parameter) starten/öffnen kann.

Ihr braucht mir keinen Text zu schreiben, bisherige Foren Links reichen mir auch! Konnte halt nichts finden, da mir Momentan auch irgendwie der Fachbegriff für ein solches Routing nicht einfällt. ^^

Schönen Sonntag euch.

/edit:
app.js

[B][...][/B]
function ($stateProvider, $urlRouterProvider, $viewLoaderProvider)
{
	[B][...][/B]
	$stateProvider.state("details", {
		url: "/details/:pNummer",
		templateUrl: 'templates/details.html',
		controller: function ($scope, $stateParams) {
			$scope.detail = {};
			$scope.detail.pNummer = $stateParams.pNummer;
		}
	});        
        $urlRouterProvider.otherwise('/');
}

Jetzt habe ich diesen Codeschnipsel zusammengefrickelt ("quelle": heise) leider wird dann der gesamte Content gesetzt (sidebar & alles andere verschwindet). Ich schätze das mein Ansatz falsch ist und ich mit viewLoaderProvider arbeiten muss. Leider habe ich (noch) keine Ahnung wie.

 

[Kaktus96]

Alles vom letzten Posting habe ich verworfen.

Ich bin jetzt so weit, dass ich auf eine tiefere Ebene gelange und es weiterhin eine Single Page App ist. Dafür habe ich in der app.js eine weitere View über den $viewLoaderProvider erstellt. In meinen NavigationController und der dazugehörigen View habe ich dann einen Filter eingebaut, so dass diese nicht in der Sidebar auftaucht. Der Filter arbeitet mit einer neuen Eigenschaft welche ich an jeder View gehangen habe.

Also so:
app.js Ausschnitt

$viewLoaderProvider.registerView({		
  ID: 'root.details',
  moduleName: 'test.details',
  url: '/details',
  templateUrl: 'templates/details.html',
  controller: 'detailsController',
  requirejsName: 'detailsView',
  requirejsConfig: { 
	paths: {
	  'detailsView': 'js/controllers/detailsController'
	} 
  },
  stateConfig: {
	parent: 'root',
	reloadOnSearch: false
  },		
  show: false,
  navigationText: 'nav.details' // extra Propertys bleiben erhalten(siehe NavigationController)
});

(also eine ganz normale Registrierung)

ng-repeat aus Nav.html

ng-repeat="view in views | filter:showInNav track by $index"

NavigationController.js

$scope.showInNav = function(a){
	return a.show === true;				
}

showInNav ist meine oben erwähnte, neu erstellte Eigenschaft.

Jetzt ist die View registriert und wird nicht in der Sidebar angezeigt. Top
Dann mache ich in meiner Liste von Einträgen jeweils ein

<a href='#details' [...]>[...]</a>

und fertig ist die Geschichte.

Jetzt fehlt mir noch die Möglichkeit Parameter wie zum Beispiel, die Eintrags-Id, zu übergeben. Dann muss ich noch irgendwie den Status der "obersten" View auf aktiv lassen, damit diese in der Sidebar auch weiterhin hervorgehoben wird. Also alles im allen ist das kacke und bestimmt wieder der falsche Ansatz.
Könnt ihr mir helfen? Links reichen auch!!

 

[tsseh]

Jetzt fehlt mir noch die Möglichkeit Parameter wie zum Beispiel, die Eintrags-Id, zu übergeben. Dann muss ich noch irgendwie den Status der "obersten" View auf aktiv lassen, damit diese in der Sidebar auch weiterhin hervorgehoben wird. Also alles im allen ist das kacke und bestimmt wieder der falsche Ansatz.
Könnt ihr mir helfen? Links reichen auch!!

beschreib nochmal, was du genau möchtest.
wo willst du "die Eintrags-Id" übergeben? was ist das?

- - - Aktualisiert - - -

suchst du das?
https://docs.angularjs.org/api/ngRoute/service/$route#example

 

[Kaktus96]

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

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

Jede Person ist ein Objekt im Array/Liste und hat eine Eigene Identifikationsnummer (ID). Über Ng-Repeat wird mir die erste Ansicht erzeugt.
Jetzt möchte ich auf eine Person klicken können und zu der Detailansicht dieser Person zu gelangen (anderes template & controller bitte..). Dabei übertrage ich die ID um auf der Detailseite weitere Informationen nachladen zu können.

Leider fällt mir der Bergriff für dieses "tiefer gehen im view 'baum'" nicht ein. Wir haben dafür kein Wort in der Firma genutzt ^^.
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.