Frage zu EJS Template Engine

[tsseh]

Das lässt sich mit dem Package gulp-ng-annotate beheben.

angular selbst unterstützt abhängigkeiten, diese kann und sollte man meiner meinung nach explizit angeben.
z.b. eine controller deklaration

.controller('MyController', [
  '$scope',
  '$timeout',
  function (myScope, to)
  {

welche auf $scope und $timeout zugreift wird beim instanziieren mit diesen beiden parametern aufgerufen. dazu muss angular aber wissen, welche beiden parameter übergeben werden sollen. das passiert über die elemente im array vor der funktion, also die strings '$scope' und '$timeout'. damit weiß angular dann, dass es beim erzeugen des controllers die objekte $scope und $timeout übergeben muss.
jetzt bietet angular auch einen impliziten weg an, indem es die variablennamen der funktion nimmt um damit die objekte zu suchen.

.controller('MyController', function ($scope, $timeout)
  {

das würde ich so nicht machen. schon weil du dann deine funktionsparameter immer nach den angular-objekten benennen musst. das ist hier bei $scope und $timeout vielleicht noch nicht das problem, aber du bist damit festgelegt.

und diese festlegung wird durch minimisation tatsächlich kaputgemacht. deswegen erst recht, nutze den expliziten weg.

[alphakanal]

..und diese festlegung wird durch minimisation tatsächlich kaputgemacht. deswegen erst recht, nutze den expliziten weg.

Danke. In dem Übungsprojekt wurde die Methode mit gulp-ng-annotate verwendet um nicht sämtliche Controller wieder umzuschreiben.

Jedefalls habe ich jetzt soweit verstanden und versuche mich brav an deinen Rat zu halten. Habe in meinem Übungsprojekt folgenden Viewcontroller ( mainController ) danach angepasst :

(function() {

    var app = angular.module("mainController");

    var mainController = function($scope, $interval) {

       var decrement = function(){
           .....
        };

        var starteCountdown = function(){
            ....
        };

        $scope.username = "angular";
        $scope.countdown = 5;
        starteCountdown();
    };

    app.controller("mainController", ["$scope", "$interval", mainController ] );

}());

Jetzt versuche ich das Ganze in das Angular Seed Projekt zu portieren. Aber statt mit IFFEs wird im Seed bei den Viewcontrollern bzw generell mit 'use strict' gearbeitet - da sieht mein mainController wie folgt aus :

'use strict';
angular.module('ewApp.main', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/main', {
    templateUrl: 'views/main/main.html',
    controller: 'mainController'
  });
}])

// .controller("mainController", ["$scope", "$interval", mainController ] );
.controller('mainController', [function() {

}]);

Jetzt hänge ich seit ner Zeit an dem Problem dass ich nicht hingkriege wie ich hier die im Controller oben erstellten Funktionen ( starteCountdown, decrement ) sowie $scope + $interval einbaue bzw. weitergebe? Könntest Du mir hier evtl ein Beispiel bittsche geben? Wäre ein kleiner Schritt für Profis aber riesen Schritt für mich :-)

[tsseh]

ich verstehe dein problem nicht.
was hat das mit strict zu tun?
mainController ist einfach eine funktion.
den zusätzlichen scope (function() {...}()); außenrum würde ich beibehalten.
du doch einfach

(function() {
    'use strict';
    
    var app = angular.module('ewApp.main', ['ngRoute']);
    
    var mainController = function($scope, $interval)
    {
       ...
    };

    app.config(['$routeProvider', function($routeProvider)
    {
      $routeProvider.when('/main', {
        templateUrl: 'views/main/main.html',
        controller: 'mainController'
      });
    }]);
    app.controller("mainController", ["$scope", "$interval", mainController ] );
}());

oder

(function() {
    'use strict';
    
    angular.module('ewApp.main', ['ngRoute'])

    .config(['$routeProvider', function($routeProvider) {
      $routeProvider.when('/main', {
        templateUrl: 'views/main/main.html',
        controller: 'mainController'
      });
    }])
    .controller('mainController', ["$scope", "$interval", function()
    {
    }]);
}());

schreiben

[alphakanal]

ich verstehe dein problem nicht.
was hat das mit strict zu tun?

Dachte dass durch 'use strict' die Funktionen usw. im mainController nicht im GlobalScope erscheinen und somit der IFFE überflüssig ist.


Jedenfall wenn ich das so einbaue, da leuchtet aber JSHint im Editor wie ein Weihnachtsbaum

UPDATE:

YEAH!!!! Semikolons vergessen -- DANKE!!!!!!!!!!!!

[alphakanal]

So hoffe alle hatten ein entspanntes und ruhiges Weihnachtsfest

Trotz Feiertage juckts mich und arbeite weiter an meinem ersteb Angular Projekt -> Danke nochmal für die Empfehlung - ist echt top!!!!

Versuche jetzt meinen Code - der momentan überwiegend im MainController liegt - ein wenig zu überarbeiten und in separate Factories auszulagern.
Hilfe hierzu finde ich auch hier im StyleGuide von John Papa - wobei nicht alles verstanden wird ;-)

In meiner Factory verwiese ich auf das app.modul:

(function() {
  
'use strict';

var app = angular.module('ewApp', [
  'ngRoute',
  'ngAnimate',
  'ewApp.main', 
  'ewApp.drucken',
  'ewApp.login',
  'ewApp.hilfe',
  'ewApp.speichern'
]); 

app.factory('meinService', function(){
    var meineVariable = 'mein Wert';
    return {

        // meine rückgabe
        ausgabe : meineVariable

    };

});

Der rot markierte Code steht ja ebenfalls in meiner app.js:

'use strict';

angular.module('ewApp', [  // Mein Root Modul
  'ngRoute',
  'ngAnimate',
  'ewApp.main', // meine 5 Views / separate HTMLs -->
  'ewApp.drucken',
  'ewApp.login',
  'ewApp.hilfe',
  'ewApp.speichern'
])
.config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
  $locationProvider.hashPrefix('!');

  $routeProvider.otherwise({redirectTo: '/main'});
}]);

Angenommen ich füge in meine app.js neue Dependecies hinzu ( falls die Bezeichnung nicht stimmt: ich meine die Werte im Array: 'ngRoute', 'ngAnimate' etc. ), muss ich die dann doch auch in jeden meiner Factories hinzufügen, oder sehe ich das falsch? Zumindest musste ich das bisher, da sonst der Bildschirm leer blieb - jedoch ohne Fehlermeldungen in der Konsole.

Mache ich das komplizierter als es wirklich sein muss oder ist das einfach so?
Gibt's eine Methode um nachträglich zur app.js hinzugefügte Dependencies nicht auch noch zusätzlich manuell in jede Factory einzutragen zu müssen?

- - - Aktualisiert - - -

Problem Update:

Ich habe jetzt versucht eine zweite Factory einzubauen:

(function() {
  
'use strict';

var app = angular.module('ewApp', [
  'ngRoute',
  'ngAnimate',
  'ewApp.main', 
  'ewApp.drucken',
  'ewApp.login',
  'ewApp.hilfe',
  'ewApp.speichern'
]); 

app.factory('meinService2', function(){
    var meineVariable = 'mein Wert aus Service 2';
    return {

        // meine rückgabe
        ausgabe : meineVariable

    };

});

Sobald ich diese aber in meinen viewController mit einbinde:

(function () {
    'use strict';

    var app = angular.module('ewApp.main', ['ngRoute']);

    var mainController = function ($scope, meinService, meinService2) {
.....
};

    app.config(['$routeProvider', function ($routeProvider) {
        $routeProvider.when('/main', {
            templateUrl: 'views/main/main.html',
            controller: 'mainController'
        });
    }]);
    app.controller("mainController", ["$scope", "meinService", "meinService2" , mainController]);
} ());

Bekomme folgende Fehlermeldung:
Error: [$injector:unpr] Unknown provider: meinService2Provider <- meinService2 <- mainController


Verstehe ich jetzt nicht ganz wo hier der Fehler mit provider zustande kommt, mit der ersten Factory lief es ja ohne Fehlermeldung. Der Code und das Einbinden ist ja quasi identisch

Problem gelöst :
Hab jetzt in der Factory nur
var app = angular.module('ewApp');
Ohne routing gedöns

[tsseh]

mit

angular.module('ewApp', [
  'ngRoute',
  'ngAnimate',
  'ewApp.main', 
  'ewApp.drucken',
  'ewApp.login',
  'ewApp.hilfe',
  'ewApp.speichern'
])

definierst du ein modul. darauf kannst du später nochmal über

angular.module('ewApp')

zugreifen. wenn du aber wieder abhängigkeiten angibst (also wie ganz oben), will angular wieder ein modul anlegen, das modul 'ewApp' existiert aber schon.
ein weiteres modul kannst du aber problemlos anlegen

angular.module('ewApp.main', ['ngRoute']);

und dieses auch als abhängigkeit bei einem anderen modul eintragen

[alphakanal]

Super !
Bisher war s nur eine grobe Vorstellung dessen was da im Hintergrund schiefgelaufen ist - jetzt kann ichs auch genau zuordnen, danke!!

[alphakanal]

Kurze Frage ob Code Struktur meiner Directive so passt oder übertrieben kompliziert ist.

In meinem mainView habe ich folgende Direktive ( separate JS-Datei ) mit eigener Controller-Funktion um auf das $scope Objet der mainView zuzugreifen:

(function () {
  'use strict';

  var app = angular.module('ewApp'); // Root Module

  app.directive('ewLabel', [ewLabel]);

  function ewLabel() {

    interneFunktion("Hallo");

    return {
      restrict: 'E',
      templateUrl: 'assets/templates/directives/label.html',
      controller: directiveController
    };

  }

  function interneFunktion(params) {
    console.log(params + " + aus interner Funktion " );

  }
  function directiveController($scope) {
    console.log("Aus dem DirectiveController Scope: " + $scope.text1 );

  }


} ());

Funktioniert, wackelt und hat Luft. Vor allem ich kanns nachvollziehbar lesen - daher kein Freund anonymer Funktionen.

Jetzt würde es mich nur interessieren ob das eine "saubere" Lösung ist oder übertrieben kompliziert/verschachtelt ist?

[tsseh]

Jetzt würde es mich nur interessieren ob das eine "saubere" Lösung ist oder übertrieben kompliziert/verschachtelt ist?

etwas kompliziert/verschachteltes sehe ich nicht, aber wozu ist die interneFunktion da? den sinn des controllers sehe ich auch nicht. außerdem hast du beim controller dei abhängigkeiten nicht angegeben: controller: ['$scope', directiveController]

[alphakanal]

Danke schon mal für die Antwort!

etwas kompliziert/verschachteltes sehe ich nicht, aber wozu ist die interneFunktion da?

Keine Ahnung, die ist eigentlich nur da um zu sehen ob es funktioniert - falls ich sowas brauchen sollte. Wobei keine Ahnung nicht ganz stimmt -> da ich in diese Direktive ein Logik einbauen möchte welche momentan mehrere Funktionen aufruft.

den sinn des controllers sehe ich auch nicht

Dachte ich brauch einen Controller um auf den scope es mainViews zugreifen zu können - und vor allem dass ich im Controller dann mein Canvas Element erstelle mit dem der User interagiert.

außerdem hast du beim controller dei abhängigkeiten nicht angegeben: controller: ['$scope', directiveController]

Stimmt, danke wird ausgebessert - falls der Controller überhaupt noch bestand hat.

Kann ich dann quasi die Direktive so aussen lassen:

(function () {
  'use strict';

  var app = angular.module('ewApp'); // Root Module

  app.directive('ewLabel', ["$scope", ewLabel]);
 // app.directive('ewLabel', [ewLabel]);

  function ewLabel() {
//  function ewLabel($scope) {

    console.log("Aus der Direktive Scope: " + $scope.text1 );

    return {
      restrict: 'E',
      templateUrl: 'assets/templates/directives/label.html'
    };

  }


} ());

- - - Aktualisiert - - -

Wobei so haut es mir meine ganze Seite zusammen - da war doch ein paar Antworten weiter oben schon einmal von dir...eiei

- - - Aktualisiert - - -

Jetzt wird hoffentlich langsam ein runder Angular Schuh draus -> das Erstellen vom Canvas Element inkl. Interaktionen werden in einen Service gelegt.

Wobei mir momentan nicht so recht klar ist wo in Angular die Display-related-Logic aufhört und wo die Business-Logic anfängt.

[alphakanal]

Hab es nun mittlerweile soweit zum laufen gebracht. JUHUU!

Hier das Demo: My AngularJS App

Jetzt hab ich nur folgendes Problem:

Wenn ich meine Seite das erste mal aufrufe funktioniert alles wie gewollt -> Text eingeben -> diesen dann im Canvas anzeigen.
Wenn ich nun eine andere View aufrufe und zur Startseite zurück gehe, ist der Canvas-Inhalt verschwunden.
Wenn ich die Seite neu lade ist wieder da.


Das Canvas Element wird in labelService.js initiert und befüllt ...möchte hier jetzt nicht alles mit unnötig Code vollpumpen.

Wenn jemand eine Ahnung woran das liegen könnte oder mehr Code/Infos dazu braucht -> bitte sagen was nötig ist dann post ich den Code natürlich sofort :-)


Update: Gelöst :-)