close
AngularJS ist die Werkzeugkiste schlecht hin. Mit dem Open-Source-Framework von Google lassen sich ganz leicht Single Page Applications (SPA) erstellen. AngularJS fügt HTML ein neues Konstrukt hinzu. Die Implementierung der AnuglarJS Library in ein SharePoint 2013 App Projekt ist auch nicht kompliziert, da zunächst die Library selbst von dem AngularJS Server heruntergeladen werden sollte. Anschließend wird im Projekt auf diese JavaScript-Datei verweisen mittels folgendem Tag
<script type=“text/javascript“ src=“Pfad/angular.js“></script>
wobei “Pfad” durch den richtigen Dateipfad zu ersetzten ist. Alternativ kann auch die Url des CDN verwendet werden:
https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js

Da die Library nun eingebunden und einsatzbereit ist, kann die Zwei-Wege-Datenbindung von AngularJS verwendet werden. Änderungen in der Ansicht (View) wirken sich so automatisch im Datenmodell (Model) aus und werden in den entsprechenden Elementen der Ansicht (View) direkt angezeigt.

Hier ein kleines Beispiel:

<!DOCTYPE html >
<html ng-app>
<head>
<meta charset=“utf-8″>
<script src=“Lib/angular.js“></script>
</head>
<body>
<div>
<label>Name:</label>
<input type=“text“ ng-model=“yourName“>
<hr>
<h1>Hey {{yourName}}!</h1>
</div>
</body>
</html>

AngularJSBsp10

In dem oben angeführten Beispiel wird eine TextBox angezeigt, in der der User seinen Namen eingeben kann und diesen noch während der Eingabe anzeigt bekommt. Dies ist möglich durch das ng-model Attribut.

Im Hinblick auf ein SharePoint App Projekt wäre so denkbar, die Bindung zwischen einem Listelement bzw. eines Feldes in einem Listelement zu realisieren.

Beim IE 10 hatten wir ein Phänomen, dass die Ausführung der AngularJS Funktionalitäten verhinderte. In diesem Fall hilft der “edge” Mode des IE mittels folgendem Tags:
<meta http-equiv=“X-UA-Compatible“ content=“IE=edge,chrome=1″ />

Hier noch ein paar Links:

https://angularjs.org/

https://docs.angularjs.org/guide/introduction

Published: 24.09.2014 10:02

Source: New feed

Tags : Development

Leave a Response

Diese Seite ist durch reCAPTCHA und Google geschütztDatenschutz-Bestimmungen UndNutzungsbedingungen anwenden.