JavaScript AngularJS - Aufteilung zwischen app.js / controller.js

_CH_K_1991_

Lieutenant
Registriert
Nov. 2008
Beiträge
770
Hallo zusammen

Ich habe erst vor einiger Zeit mit Gebrauch von AngularJs angefangen. Jedoch habe ich eine Frage die ich bisher nie vollkommen lösen konnte (oder vielleicht verstehe ich schlichtweg die Dokumentation falsch).
Was kommt in den Controller und was in die App.js File?

Denn ich habe nun das Problem, dass z.B. ein Routing benötige um z.B. GET Parameter aus der URL auszulesen etc. und dafür gibt es ja nun mal die $route und $RouteParams und diese sollte man nach Online Tutorials in die App.Js File verbannen, doch wie kombiniere ich jetzt Controller und App.js?

Vielen Dank für einige Ausführungen.

Als Bsp. Mal ein paar Controller um das Erklären zu vereinfachen ;) :

HTML:
[angular.module('secanistools', ['ngRoute'])
 .controller('loginCtrl', function($scope, $http){
  $scope.sitetitle = "Login";
 })
 .controller('guestCtrl', function($scope, $http, $sce){
  $scope.sitetitle = "Alle Teilnehmer";
  $http.get('/api/getdata.php?param=getGuests').then(function(response) {
      $scope.guests = response.data;
      $scope.trustAsHtml = $sce.trustAsHtml;
      $('#mydiv').hide();
     });
 })
 .controller('praxisCtrl', function($scope, $http){
  $scope.sitetitle = "Alle Praxen";
  $http.get('/api/getdata.php?param=getPraxen').then(function(response) {
      $scope.praxen = response.data;
      $('#mydiv').hide();
     });
 })
 .controller('billCtrl', function($scope, $http, $sce){
  $scope.sitetitle = "Alle Rechnungen";
  $http.get('/api/getdata.php?param=getBills').then(function(response) {
      $scope.bills = response.data;
      $scope.trustAsHtml = $sce.trustAsHtml;
      $('#mydiv').hide();
     })
 })
 
Ich würde alles erstmal in getrennte Files ablegen. Also eine app.js in der du Module lädst und eventuell konfigurierst. In der app.js kannst du ja eine variable definieren, welche auf dein App-Modul verweist. So ca:
HTML:
var testApp = angular.module('testApp', [
    'ngRoute',
    'xyz',
    '...']);

Dann würde ich in getrennten Files deine Controller definieren:

HTML:
testApp.controller('mainController', function($scope,){
.....
});
genauso kannst du auch ein gesondertes File für die Routes anlegen und der app hinzufügen.
Musst dann natürlich alles nacheinander in der index.html einbinden. Außerdem würde ich jetzt denke ich keine Geschäftslogik in der app.js ablegen. Das passiert alles in deinen Controllern und Services.

HTTP Anfragen würde ich beispielsweise in Services auslagern. Controller "konsumieren" dann quasi nur die Services und nutzen ihre Funktionalität.
Auch sollte man so wenig wie möglich von Controllern einzelne DOM-Manipulationen ausführen. Hier vielleicht in Direktiven einlesen.

So könnte ca deine routes.js aussehen, falls du ngRouts nutzt:
HTML:
apolloUI.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.
            when('/home', {
                templateUrl: 'partials/home.html',
                controller: 'mainController'
            }).
            otherwise({
                redirectTo: '/home'
            });
    }]);
Du fügst also quasi der deiner App die Konfiguration hinzu, dass sie auf bestimmte Urls entsprechende Controller und Views läd.
 
Zuletzt bearbeitet:
Danke für deine Antwort. Werde ich morgen Abend ausprobieren.
Bei mir ist jetzt halt das interessante, dass ich auf dem Server auf PHP setzte und so das "Routing" per PHP gelöst habe (Seitenaufruf per GET Parameter, so kann man sehr einfach per Whitelist die Aufrufe der Seiten steuern).
Wenn ich jetzt aber über AngularJS GET Parameter abrufen möchte, um z.B. User oder Produkt Id's mitzugeben bin ich ja wieder gezwungen das AngularJS Routing einzusetzen. Oder liege ich hier falsch?
$location.search() bekomme ich ja eigentlich auch die GET Parameter zurück, was aber eben im aktuellen Projekt ebenfalls nicht funktioniert hat (ich habe ob per route oder per location immer nur ein leeres Object zurückbekommen).

Gibt es hier einen Zusammenhang?

Danke und gut Nacht. :n8:
 
Hmmm vielleicht stehe ich gerade auf dem Schlauch, aber grundsätzlich ist es doch gerade eine der stärken von Web-Apps etc. das Routing Client-seitig vorzunehmen, damit du nicht jedes mal komplette Seiten nach- /neuladen musst. Dafür eignet sich Backend-seitig natürlich vor allem ein REST-Service, der deine App mit Daten in Form von JSON o.Ä. versorgt und nicht komplette HTML-Seiten versendet.
Vielleicht ist AngularJS in deinem Fall nicht die beste Wahl?
 
Danke nochmals für die Antworten.

Ich habe nun mein Konzept in mit zwei Javascript Files umgesetzt: eine app.js mit den Routen und eine controller.js mit der Logik und den $http Requests (welche ich sicherlich auch noch hätte auslagern können z.B. in eine services.js).

z.B. die Routen in der File app.js
Code:
angular.module('tnmDashboardApp', ['ngRoute', 'DashboardControllers']).config(function($routeProvider){
  $routeProvider.when('/guests', {templateUrl: '/app/dashboard/guest.php',controller: 'guestCtrl'});
  $routeProvider.when('/guests/edit/:userid', {templateUrl: '/app/dashboard/editGuest.php', controller: 'editGuestCtrl'});
  $routeProvider.when('/bill', {templateUrl: '/app/dashboard/bill.php', controller: 'billCtrl'});
  $routeProvider.when('/bill/edit/:billid', {templateUrl: '/app/dashboard/editBill.php', controller: 'editBillCtrl'});
  $routeProvider.when('/booked', {templateUrl: '/app/dashboard/booked.php', controller: 'bookedCtrl'});
  $routeProvider.when('/offer', {templateUrl: '/app/dashboard/offer.php', controller: 'offerCtrl'});
  $routeProvider.when('/praxis', {templateUrl: '/app/dashboard/praxis.php', controller: 'praxisCtrl'});
  $routeProvider.otherwise({redirectTo: 'error.php'});
});

oder z.B. ein Controller
Code:
angular.module('DashboardControllers', ['ngRoute'])
 .controller('guestCtrl', ['$scope', '$http', '$sce', function($scope, $http, $sce){
  $scope.sitetitle = "Alle Teilnehmer";
  $http.get('/api/getdata.php?param=getGuests').then(function(response) {
      $scope.guests = response.data;
      $scope.trustAsHtml = $sce.trustAsHtml;
      $('#mydiv').hide();
     });
 }]);

Trotzdem habe ich nun noch eine kleinere Frage bezüglich der Ausgabe von einem Json Objekt.

Ich habe einen einzelnen Eintrag in einem Json Objekt (kommt von der DB zurück) und ich möchte den nun in Forumlarfelder zurück geben. Ist das so, dass ich die einzelnen Daten der Attribute mit
Code:
billData[0].payed
ausgeben muss (eine ng-repeat Schlaufe kann ich leider dort nicht anwenden!)?

Denn wenn ich das Formular dann wieder speichern möchte (natürlich mit der gleichen $scope Variable) bekomme ich in der Konsole folgenden Fehler:
TypeError: Cannot read property '0' of undefined

Das Formular sieht so aus:
HTML:
<form data-ng-submit="saveData()">
   <div id="mydiv1"><img src="/img/loader.gif" class="ajax-loader"></div>
   <table class="table">
    <tr><td><b>Rechnungsnummer</b></td><td><input type="text" class="form-control" name="bnumber" data-ng-model="billData[0].bnumber" disabled></td></td></tr>
    <tr><td><b>Datum</b></td><td><input type="text" class="form-control" name="date" data-ng-model="billData[0].date" placeholder="Datum"></td></tr>
    <tr><td><b>Rechnung bezahlt</b></td><td><input type="checkbox" name="payed" data-ng-checked="billData[0].payed" data-ng-model="billData[0].payed"></td></tr>
    <tr><td><b>Total in CHF</b></td><td><input type="text" class="form-control" name="price" data-ng-model="billData[0].price" disabled></td></tr>
    <tr><td></td><td><button type="submit" class="btn btn-md btn-success pull-right">Speichern</button></td></tr>
   </table>
  </form>

Besten Dank für Hinweise :D
 

Ähnliche Themen

JavaScript AngularJS Raw HTML
Antworten
2
Aufrufe
1.112
Zurück
Oben