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>

HTTP Get – Tutorial AngularJS Crashkurs

  • HTTP steht für Hypertext Transfer Protocol und wird als Übertragungsprotokoll verwendet
  • AngularJS unterstützt durch den $http Service den Zugriff auf externe Daten
  • Über Methoden wie get, put, delete, post etc. können Daten angesehen, erstellt, gelöscht, verbucht usw. werden
  • HTTP ermöglicht den Zugriff über Mock-Objekte wie beispielsweise im json-Format

Index.html

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

<body>
<div ng-app=„myApp“ ng-controller=myCtrl>
<table>
<tr ng-repeat=x in pages>
<td>{{x.page}}</td>
</tr>
</table>
</div>

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

app.controller(‚myCtrl‘, function($scope, $http, $log) {

$http({
method: ‚GET‘,
url: ‚data.json‘

}).then(function successCallback(response) {
$scope.pages = response.data.records;
$log.debug(response);

}, function errorCallback(response) {
alert(‚Error‘);
});
});
</script>

</body>

</html>

 

data.json

{
„records“:
[
{
„page“: „http://easeflow.net/“
},
{
„page“: „http://tiptopplaces.com/“
},
{
„page“: „http://easeflow.net/wordpress/“
}
]}