Isolierter Scope – Tutorial AngularJS Crashkurs

  • Ein isolierter Scope existiert unabhängig vom Parent-Scope und erbt auch nicht von dessen Eigenschaften
  • By default erbt eine Direktive von ihrem Scope, da die Eigenschaft scope auf false gesetzt ist
  • Wird die Eigenschaft scope jedoch auf true gesetzt, erbt diese nicht mehr von ihrem Parent-Scope, kann aber wie auch bei scope=false trotzdem weiterhin auf den Parent-Scope zugreifen
  • Wird nun ein isolierter Scope in einer Direktive definiert, kommen die drei Optionen @,= und & zum Zuge
  • @
  • Bindet Text
  • Notation über {{ }} im HTML
  • =
  • Two-way-Bindung
  • Kann irgendeinen Typ enthalten
  • Notation über “ “ im HTML
  • &
  • On-way-Bindung
  • Kann irgendeinen Typ enthalten
  • Notation über “ “ im HTML
  • Wird vor allem für Funktionen mit Übergabe-Parameter verwendet die Werte von      der Direktive zum Kontroller liefert
  • Verweise
  • Siehe auch Video Scopes – 006
  • Siehe auch Video Direktiven – 015

Isolated-@

<!DOCTYPE html>
<html>
<script src=„lib/angular.js“></script>
<head lang=„en“>
<meta charset=„UTF-8“>
<title>Isolierter Scope – Text binding</title>
</head>
<body>

<div ng-app=„myApp“ ng-controller=myCtrl>
<div string value={{ctrlValue}}></div>
</div>

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

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

app.directive(’string‘, function() {
return {
scope: {
value: ‚@‘
},
template: ‚{{value}}</div>‘
};
});
</script>

</body>

</html>

Isolatet-=

<!DOCTYPE html>
<html>
<script src=„lib/angular.js“></script>
<head lang=„en“>
<meta charset=„UTF-8“>
<title>Isolierter Scope – Two way binding</title>
</head>
<body>

<div ng-app=„myApp“ ng-controller=myCtrl>
<div object value=„ctrlValue“></div>
</div>

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

app.controller(‚myCtrl‘, function($scope) {
$scope.ctrlValue = ‚http://easeflow.net/wordpress‘;
});

app.directive(‚object‘, function() {
return {
scope: {
value: ‚=‘
},
template: ‚<div>{{value}}</div>‘
};
});
</script>

</body>

</html>

Isolated-&

<!DOCTYPE html>
<html>
<script src=“lib/angular.js“></script>
<head lang=“en“>
<meta charset=“UTF-8″>
<title>Isolierter Scope – One way binding</title>
</head>
<body>

<div ng-app=“myApp“ ng-controller=“myCtrl“>
<div invoke param=“execute(message)“></div>
{{message}}
</div>

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

app.controller(„myCtrl“, function($scope) {
$scope.execute=function(message) {
$scope.message=message;
};
});

app.directive(„invoke“, function() {
return {
scope: {
param: „&“
},
template: ‚<input type=“text“ ng-model=“value“>‘  +
‚<button class=“button“ ng-click=“param({message:value})“>Submit</button>‘
};
});
</script>

</body>

$interval – $timeout – Tutorial AngularJS Crashkurs

  • $interval und $timeout ermöglicht in sich wiederholenden zeitlichen Abständen Aufgaben auszuführen
  • $interval ist der Wrapper für window.setInterval und ermöglicht das Aufrufen einer JavaScript-Funktion nach einen bestimmten Intervall und das immer wieder
  • $timeout ist der Wrapper für window.setTimeout und ermöglicht das Aufrufen einer JavaScript-Funktion nach einer bestimmten Verzögerung
  • In dem Zusammenhang muss auch noch $apply berücksichtigt werden, wenn ausserhalb des AngularJS-Framework $scope-Variablen gesetzt werden. Dann muss $apply aufgerufen werden

Timeout.html

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

<body>
<div ng-app=„myApp“ ng-controller=myCtrl>
{{timeoutValue}}
</div>

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

app.controller(‚myCtrl‘,function($scope, $timeout) {
$scope.timeoutValue=‚www.TipTopPlaces.com‘;

setTimeout(function () {
$scope.$apply(function() {
$scope.timeoutValue=‚wwww.EaseFlow.net‘;
});
}, 2000);

$scope.callTimeout = function() {
$scope.timeoutValue=‚wwww.EaseFlow.net/wordpress‘;
};

$timeout( function(){
$scope.callTimeout();
}, 4000);

});
</script>

</body>

</html>

Interval.html

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

<body>
<div ng-app=„myApp“ ng-controller=myCtrl>
{{intervalValue}}
</div>

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

app.controller(‚myCtrl‘,function($scope, $interval) {
$scope.intervalValue=‚www.TipTopPlaces.com‘;

setInterval(function () {
$scope.$apply(function() {
if ($scope .intervalValue==‚wwww.EaseFlow.net‘) {
$scope.intervalValue=‚www.TipTopPlaces.com‘;
} else {
$scope.intervalValue=‚wwww.EaseFlow.net‘;
}
});
}, 2000);
});
</script>

</body>

</html>

Direktiven – Tutorial AngularJS Crashkurs

  • Direktiven sind Markers für ein DOM-Element wie Attribute, Element-Name, Kommentar oder aber eine CSS-Klasse
  • Built-In Direktiven wären beispielsweise ngClass, ngModell usw.
  • Es können auch eigene Direktiven erstellt werden die aber nicht mit ng anfangen sollen, da dieses Kürzel AngularJS vorbehalten sein sollte
  • Direktiven sollten in der camelCased Notation geschrieben werden. Diese werden dann in AngularJS als Markers mit Bindestrich verstanden
  • Folgende Direktiven-Eigenschaften sind vorhanden:
    • restrict: Beschränkt das HTML auf Elemente, Attribute, Klassen oder aber Kommentare
    • replace: Wenn true dann ersetzt dieses aufgrund der template-Eigenschaft den Inhalt im HTML-Anzeigeteil
    • scope: Bezieht sich auf die Möglichkeit ein isolierter Scope anzuwenden
    • template: Enthält die Vorlage die dann im HTML-Anzeigeteil verwendet werden kann
    • templateUrl: Wie auch die template-Eigenschaft, bezieht sich aber auf ein separates HTML-File
    • controllerAs: Der bestehende Controller erhält ein alias der stattdessen verwendet werden kann
    • controller: Wenn notwendig kann eine Direktive einen eigenen Controller enthalten
    • link: Ermöglicht direkte Manipulationen über das Document-Object-Model via scope, element, attrs etc.

Element.html

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

<body>

<div ng-app=„myApp“>
<my-element></my-element>
</div>

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

app.directive(„myElement“, function() {
return {
restrict: „E“,
template: „<div>My first element</div>“,
};
});
</script>

</body>
</html>

 

Attribut.html

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

<body>

<div ng-app=„myApp“>
<div my-attribute></div>
</div>

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

app.directive(„myAttribute“, function() {
return {
restrict: „A“,
link: function() {
alert(‚My first attribute‘);
}
}
});
</script>

</body>
</html>

 

Class.html

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

<body>

<div ng-app=„myApp“>
<div class=„my-class“></div>
</div>

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

app.directive(„myClass“, function() {
return {
restrict: „C“,
link: function() {
alert(‚My first class‘);
}
}
});
</script>

</body>
</html>

Scopes – Tutorial AngularJS Crashkurs

  • Scope ist ein Built-In-Objekt das Daten und Methoden enthalten kann
  • Scope enthalten die Model-Daten die vom Controller und deren View verwendet werden sprich die zwei miteinander verbindet
  • Die Direktiven ng-model und ng-bind die Daten binden können spielen eine Hauptrolle für Scopes
  • Jeder erstellte Scope enthält seine eigenen Daten und können nicht in anderen Scopes verwendet werden. Ausnahme davon ist die Vererbung von Scopes
  • Der Unterschied zwischen der ng-model und ng-bind Direktive ist das ng-model zwei-weg data-binding ermöglicht, ng-bind aber nicht
  • Vererbung von Scopes findet dann statt, wenn controller ineinander verschachtelt werden
  • Von dem übergeordneten RootScope erben alle davon abgeleiteten Scopes
  • Werden daher Daten und Methoden im RootScope erstellt, sind diese von allen untergeordneten Scopes verwendbar

Simple.html

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

<div ng-app=„myApp“ ng-controller=myCtrl>
<ol>
<li ng-repeat=site in sites>
{{site}}
</li>
</ol>
</div>

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

myApp.controller(‚myCtrl‘, [‚$scope‘, function($scope){
$scope.sites= [‚http://tiptopplaces.com/‘, ‚http://easeflow.net/‘, ‚http://easeflow.net/wordpress/‘];
}]);
</script>

</body>
</html>

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

<div ng-app = „myApp“ ng-controller = myCtrl>
<p>{{site}} <br/> {{site2}} <br/> {{site3}} </p>

<div ng-controller = myCtrl2>
<p>{{site}} <br/> {{site2}} <br/> {{site3}} </p>
</div>
</div>

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

myApp.controller(„myCtrl“, function($scope) {
$scope.site = ‚http://tiptopplaces.com/‘;
$scope.site2 = ‚http://easeflow.net/‘;
$scope.site3 = ‚http://easeflow.net/wordpress/‘;
});

myApp.controller(„myCtrl2“, function($scope) {
$scope.site3 = ‚http://easeflow.net/impressum.html‘;
});

</script>

</body>
</html>

Vererbung.html

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

<div ng-app = „myApp“ ng-controller = myCtrl>
<p>{{site}} <br/> {{site2}} <br/> {{site3}} </p>

<div ng-controller = myCtrl2>
<p>{{site}} <br/> {{site2}} <br/> {{site3}} </p>
</div>
</div>

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

myApp.controller(„myCtrl“, function($scope) {
$scope.site = ‚http://tiptopplaces.com/‘;
$scope.site2 = ‚http://easeflow.net/‘;
$scope.site3 = ‚http://easeflow.net/wordpress/‘;
});

myApp.controller(„myCtrl2“, function($scope) {
$scope.site3 = ‚http://easeflow.net/impressum.html‘;
});

</script>

</body>
</html>

ParentScope.html

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

<body ng-app=„myApp“>

<div ng-controller=myCtrl>
Root: {{message}} <br/>
Controller: {{ctrl}} <br/>
<p>{{site}} <br/> {{site2}} <br/> {{site3}} </p>

<div ng-controller=myCtrl2>
Root: {{message}} <br/>
Controller: {{ctrl}} <br />
<p>{{site}} <br/> {{site2}} <br/> {{site3}} </p>
</div>
</div>

<div ng-controller=myCtrl2>
Root: {{message}} <br/>
Controller: {{ctrl}} <br />
<p>{{site}} <br/> {{site2}} <br/> {{site3}} </p>
</div>

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

myApp.controller(‚myCtrl‘, function ($scope, $rootScope) {
$rootScope.message = „Root Scope“;

$scope.ctrl = „myCtrl“;
$scope.site = ‚http://tiptopplaces.com/‘;
$scope.site2 = ‚http://easeflow.net/‘;
$scope.site3 = ‚http://easeflow.net/wordpress/‘;

});

myApp.controller(‚myCtrl2‘, function ($scope) {
$scope.ctrl = „myCtrl2“;
});

</script>
</body>
</html>

Controller – Tutorial AngularJS Crashkurs

  • Wie es der Name schon sagt, kontrollieren Controller die Daten einer Applikation
  • Controllers verwerten die Daten einer View und fügen Business-Logik je nach Bedarf hinzu
  • Controller initialisieren den Status eines $scope Objektes und fügen Eigenschaften und Methoden zum $scope Objekt hinzu
  • Das geniale an einem $scope-Objekt ist die Tatsache, dass es ja durch die Data-binding-Mechanismen an eine View gebunden ist und dadurch ein transparenter Code entsteht der nur im entsprechenden Controller angepasst werden muss

Simple.html

<!DOCTYPE html>
<html lang=„en“>
<script src=„lib/angular.js“></script>

<head>
<meta charset=„UTF-8“>
<title>Simple</title>
</head>
<body>

<div ng-app=„myApp“ ng-controller=myCtrl>
Homepage: <input type=„text“ ng-model=„homePage“><br>
Blogpage: <input type=„text“ ng-model=„blogPage“><br>
<br>
Homepage: {{homePage + “ Blogpage: “ + blogPage}}
</div>

<script>
var app=angular.module(‚myApp‘, []);
app.controller(‚myCtrl‘, function($scope) {
$scope.homePage= ‚http://easeflow.net/‘;
$scope.blogPage= ‚http://easeflow.net/wordpress/‘;
});
</script>

</body>

</html>

Functions.html

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

<body>

<div ng-app=„myApp“ ng-controller=myCtrl>
<button ng-click=homePage()“>Homepage</button>
<button ng-click=blogPage()“>Blogpage</button>
<p>The Name of the page is {{site}}</p>
</div>

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

myApp.controller(‚myCtrl‘, [‚$scope‘, function($scope) {
$scope.site = ‚http://tiptopplaces.com/‘;

$scope.homePage = function() {
$scope.site = ‚http://easeflow.net/‘;
};

$scope.blogPage = function() {
$scope.site = ‚http://easeflow.net/wordpress/‘;
};
}]);
</script>

</body>
</html>

Controllers.html

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

<body ng-app=„myApp“>
<div ng-controller=myCtrl1>
Controller: {{ctrl}} <br />
</div>

<div ng-controller=myCtrl2>
Controller: {{ctrl}}
</div>

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

ngApp.controller(‚myCtrl1‘, function ($scope) {
$scope.ctrl = ‚My Controller 1‘;
});

ngApp.controller(‚myCtrl2‘, function ($scope) {
$scope.ctrl = „My Controller 2“;
});
</script>
</body>
</html>

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.