Was ist angular?
- open-source Javascript MVC framework
- Maintained by Google
- 100% Clientseitig
- Nicht gebunden an 3rdparty framework wie jQuery oder Underscore. (Keine Abhängigkeiten)
- Entstanden 2009
Thinking in AngularJS?
- Keine DOM Manipulationen
- Focus liegt auf dem View (declarative programming)
- Views bestehen aus directives (ng-app, ng-init...)
- Directives verarbeiten die ganzen Events im Hintergrund (i.G.z. jQuery wo DOM-Elemente über Selektoren an Events gebunden werden)
- dynamische Data-Bindings - $scope ist die Schnittstelle zwischen Controller und View
- jQuery sollte nicht zusammen mit AngularJS verwendet werden
- Da Logik von View getrennt ist, sind AngularJS Applikation einfach wartbar und testbar (z.B. Testing mit Jasmine Framework)
Directives
<!DOCTYPE html>
<html>
<body ng-controller="sayHello">
. . .
</body>
</html>Eine Markierung auf einem HTML-TAG, die Angular auffordert Javascript zu referenzieren oder auszufüren.
function sayHello(){
alert("Hello Simon");
}Controllers
In einem Controller wird mittels Variablen und Funktionen das Verhalten der Applikation gesteuert.
var myApp = angular.module('myApp',[]);
myApp.controller('DoubleController', ['$scope', function($scope) {
$scope.double = function(value) { return value * 2; };
}]);<div ng-controller="DoubleController">
Two times <input ng-model="num"> equals {{ double(num) }}
</div>Services
Angular services are substitutable objects that are wired together using dependency injection (DI). You can use services to organize and share code across your app.
// Simple GET request example :
$http.get('/someUrl').
success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});Buil-in Services (beginnen mit $).
Z.B. $http
jQuery.get() = $http.get()
jQuery.post() = $http.post()
Scopes
Der Scope ist das Verbindungs- stück zwischen View und Controller.
Module
Ein Module ist ein Container der die verschiedenen Teile (controllers, services, filters, directives, etc.) einer Applikation enthält.
Page-Refresh
SEO
Seit 2014
- Suchmachinen können JS ausführen und unterstützen PushState URLs (HTML5 Feature)
Google: http://googlewebmastercentral.blogspot.de/2014/05/understanding-web-pages-better.html
Bing: http://blogs.bing.com/webmaster/2013/03/21/search-engine-optimization-best-practices-for-ajax-urls/ - PushState verwenden (Pushstate ab IE10.)
- in AngularJS $locationProvider.html5Mode(true);
- Testing https://www.google.com/webmasters/tools/googlebot-fetch
- Demoseite: http://html5.gingerhost.com/london
Demos
.directive('myIMG', function() {
return {
restrict: 'E',
templateUrl: 'img.html',
template: "<img src='scope.path'>",
transclude: true,
scope: {
path: '='
},
link: function(scope, element, attr) {
}
};
});<myIMG path=''></myIMG>HTML
Directives
AngularJS
By Simon Schärer
