Include – Tutorial AngularJS Crashkurs

  • Der Injector wird verwendet um Objekte die als Provider, instanzierter Typ, aufgerufene Methoden oder geladene Module zu erhalten
  • Warum braucht es die Dependency Injection
    • Separiert den Prozess zwischen Erstellung und Konsumierung von Abhängigkeiten
    • Der Verwender eine Dependency Injection muss sich nur noch Gedanken darüber machen, wie er sie zu verwenden hat, nicht aber um deren Erstellung wie dies bei Objektorientierten Sprachen via Konstruktor der Fall ist
    • Unterstützt auch das Mock-Objekte die für das Testen verwendet werden

Injector-Invoke.html

<!DOCTYPE html>
<html>
<script src=„lib/angular.js“></script>
<head lang=„en“>
<meta charset=„UTF-8“>
<title>Injector – Invoke</title>
</head>

<body>
<div ng-app=„myApp“>
<div ng-controller=„myCtrl“>
<button ng-click=„setValue()“>Button</button>
{{value}}
</div>
</div>

<script>
var app = angular.module(‚myApp‘,[]);

app.factory(‚inject‘,function(){
return {
value: ‚http://tiptopplaces.com/‘
};
});

app.controller(‚myCtrl‘,function($scope,inject,$injector){
$scope.value=‚http://easeflow.net/‘;

$scope.setValue=function(inject){
$injector.invoke(function(inject) {
$scope.value=inject.value;
});
};
});
</script>

</body>

</html>

Injector.html

<!DOCTYPE html>
<html>
<script src=„lib/angular.js“></script>
<head lang=„en“>
<meta charset=„UTF-8“>
<title>Injector</title>
</head>

<body>
<div ng-app=„myApp“>
<div ng-controller=myCtrl>
<button ng-click=setValue()“>Button</button>
{{value()}}
</div>
</div>

<script>
var myApp = angular.module(‚myApp‘,[]);

myApp.service(‚inject‘,function() {
this.value=‚http://easeflow.net/‘;
});

myApp.controller(‚myCtrl‘,function($scope,$injector){
$scope.setValue=function(){
var inject=$injector.get(‚inject‘);
inject.value=‚http://tiptopplaces.com/‘;
};

$scope.value=function(){
var inject=$injector.get(‚inject‘);
return inject.value;
};
});
</script>

</body>

</html>

Dependendency Injection – Tutorial AngularJS Crashkurs

  • Dependency Injection ist ein Entwurfsmuster welches die Abhängigkeiten eines Objektes regelt
  • Erzeugte Abhängigkeiten werden nicht vom initialisierten Objekt selbst erzeugt sondern in einer zentralen Komponente verwaltet
  • Der grosse Vorteil der Dependency Injection ist das wegfallen von Aufgaben die das verwalten von Abhängigkeiten betrifft und somit ein bestimmtes Objekt entlastet es und mehr auf seine wesentlichen Aufgaben konzentrieren lässt
  • Durch das wegfallen der Verwaltung von Abhängigkeiten wird ein Objekt noch mehr freier von unnötigen Beziehungen zu anderen Objekten und kann daher flexibler eingesetzt werden
  • Dependency Injection wird u.a. in Services verwendet wie:
    • Constant
    • Value
    • Service
    • Factory
    • Provider
  • Verweis: Bitte zuvor noch den Crashkurs über Scopes anschauen da dies u.a. auch Dependency Injection behandelt

Value.html

<!DOCTYPE html>
<html>
<script src=„lib/angular.js“></script>
<head lang=„en“>
<meta charset=„UTF-8“>
<title>Value</title>
</head>

<body ng-app=„myApp“ ng-controller=myCtrl>

<script>
var app=angular.module(‚myApp‘, []);
app.value(’nbrValue‘, 123);

app.controller(‚myCtrl‘,function($scope, nbrValue) {
console.log(nbrValue);
});
</script>
</body>

</html>

 

Factory.html

<!DOCTYPE html>
<html>
<script src=„lib/angular.js“></script>
<head lang=„en“>
<meta charset=„UTF-8“>
<title>Factory</title>
</head>

<body ng-app=„myApp“ ng-controller=myCtrl>

<script>
var myApp=angular.module(‚myApp‘, []);

myApp.value(’stringValue‘, ‚Factory‘);

myApp.factory(‚myFactory‘, function(stringValue) {
return ‚Value:‘+ stringValue;
});

myApp.controller(‚myCtrl‘, function($scope, myFactory) {
console.log(myFactory);
});
</script>

</body>

</html

 

Service.html

<!DOCTYPE html>
<html>
<script src=„lib/angular.js“></script>
<head lang=„en“>
<meta charset=„UTF-8“>
<title>Service</title>
</head>

<body ng-app=„myApp“ ng-controller=myCtrl>

<script>
var myApp = angular.module(„myApp“, []);

myApp.service(„myService“, myService);

function myService() {
this.execute = function() {
console.log(„myService“);
}
}

myApp.controller(„myCtrl“, function($scope, myService) {
myService.execute();
});
</script>

</body>

</html>

Modules – Tutorial AngularJS Crashkurs

film Snowden 2016

  • Module ermöglichen den Sourcecode in sinnvolle Einheiten zu gliedern wie:
    • Config
    • Routes
    • Filter
    • Directive
    • Factory
    • Service
    • Provider
    • Controller
  • Im Umkehrschluss sollten sämtliche in AngularJS ausgeführten Codes immer in einen Modul ausgeführt werden um die Übersichtlichkeit zu erhöhen
  • Im einer Div-Sektion wird ein Modul wie folgt definiert:
    <div ng-app=“myApp“ ng-controller=“myCtrl“>
  • In einem Script wird ein Modul wie folgt definiert:
    var app= angular module(„myApp“);
    oder
    var app = angular.module(„myApp“, []):Zu beachten gilt, das innerhalb des Parameter mit den eckigen Klammern Abhängigkeiten sprich Dependeny Injections definiert werden können

Core Features – Tutorial AngularJS Crashkurs

  • Data Binding: Automatische Synchronisation von Daten zwischen Model und View. Wird also was im Model verändert, spiegelt sich das auch in der View wieder vica versa.
  • Scope: Bezieht sich auf einen bestimmten Bereich der nur unter diesen Scope sichtbar ist. Also alles was in diesen Bereich verwendet wird kann unter diesen Scope verwendet werden.
  • Modul: Das Modul ist ein Kontainer für Controllers, Services, Filter, Direktiven usw.
  • Controller: Kontroller enthalten vor allem Funktionen mit ausführbaren Code und steuern etwas wie der Name Controller es auch schon verraten lässt.
  • Services: Sind Singleton Objekte die bestimmte Funktionen ausführen können. Mit anderen Worten gibt es nur eine Instanz von einen bestimmten Service im ganzen Framework.
  • Filters: Selektiert eine bestimmte Menge von Objekten und gibt diese in Form einer Array zurück. Filter schränken also ein bestimmten Datenbestand aufgrund bestimmter Kriterien ein und zeigen nur noch diese an.
  • Directives: Sind Markes von DOM-Elementen wie Elemente, Attribute, Css usw. Das Schöne in AngularJS ist vor allem die Tatsache, dass sich damit das HTML erweitern lässt.
  • Templates: Vorlagen zeigen sich in Form von Direktiven, Markups, Filter und Form controls. So ist beispielsweise das Markup {{}} eine Form von Template die verwendet wird um Daten in einer View zu füllen.
  • Routing: Verzweigt beispielweise aufgrund einer bestimmter URL auf einen bestimmten Controller und deren HTML-Seite. Könnte auch mit einen Trigger verglichen werden der wenn er ausgelöst wird eine bestimmte Tätigkeiten ausführt.
  • Model View Whatever: Entspricht dem MVC geht aber über das hinaus. AngularJS lässt sich daher streng genommen nicht mehr auf das Pattern Model View Controller reduzieren.
  • Deep Linking: Analog dem Routing wird hier auf eine URL verzweigt aufgrund des Status der Applikation.
  • Dependency Injection: Vereinfacht gesagt lässt sich damit eine bestimmte Funktion mit weiteren Verhalten und Werten erweitern. Dies könnten sein: value, constant, factory, service und provider.