Ergebnis 1 bis 2 von 2
Like Tree2Likes
  • 2 Post By uthred

Thema: Einführung in AngularJS

  1. #1
    uthred ist offline Mitglied
    registriert
    23-10-2015
    Beiträge
    37

    Cool Einführung in AngularJS

    Guten Morgen,

    in diesen Beitrag möchte ich euch mal AngularJS vorstellen.
    AngularJS ist eine JavaScript Bibiliothek/Framework entwickelt von Google. Sie ermöglicht eine schöne Strukturierung von JavaScript und das Erstellen von eigenen HTML-Tags.
    Damit lassen sich dann einfach recht komplexe dynamische JavaScript Anwendungen entwickeln.

    AngularJS ermöglicht eine bidirektionale Datenanbindung, dazu später mehr.

    Die Vorteile von AngularJS sind neben den genannten Eigenschaften, die Reduzierung von Code durch Selektion und Manipulation der DOM, sowie der automisierung von Events, wie onClick, onLoad, etc.
    Die entwickelten Anwendungen sind einfach zu erweitern und durch Direktiven lassen sich Code-Fragmente einfach und sehr schnell wiederverwenden.

    Starten mit AngularJS
    Zunächst sollte man sich die AngularJS Bibliothek holen. https://angularjs.org/
    Für dieses Tutorial reicht mir fürs erste die angular.min.js-Datei

    Um AngularJS in die Webanwendung einzubinden muss man dieses Framework laden. ng-app instanziiert die Anwendung und generiert eine "root scope"
    Scopes sind eine Kommunikationslage zwischen View und Controll.
    Code:
    <html ng-app>
         <head>
              <script src="angular.min.js"></script>
         </head>
         <body>
              <label>Dynamisches Formular... Javascriptzeilen = 0</label>
              <input type="text" ng-model="dynamic"/>
              <p>Hallo dynamischer Inhalt {{dynamic}}</p>
         </body>
    </html>
    Eine kurze Erklärung zum obrigen: mit ng-model bindet man den Wert des Inputfelds an eine Variable die wir dynamic nennen. Diese wird im scope abgespeichert.
    Mit den doppelt geschweiften Klammern machen wir dem Framework klar, dass wir auf eben eine solche Variable zugreifenwollen und müssen diese nur noch benennen.
    Vorteil ist, wir brauchen keine gets oder ähnliche Methoden. Wie es in normalen JavaScript notwendig wäre.

    Controller
    Controller generieren einen neuen scope, welche als Child Element zum "root-scope" der App hinzugefügt wird.
    Controller sind normale funktionenmit dem extra, dass die scope-Variable (halb-)automatisch überreicht wird.
    Um gleich die schöne Variante zu nehmen generieren wir ein neues JavaScript-Dokument:
    Code:
    var x = (function() {
        "use strict";
        var app = angular.module('TutorialAnwendung', []);
        app.controller('TutorialController', ['$scope',
            function($scope){
    		$scope.dynamic='AngularJSTutorial';
    }]);
    });
    Um diesen Code einzubinden, müssen wir lediglich das Dokument im <head> laden die App benennen und den Controller instanziieren.
    Code:
    <html ng-app='TutorialAnwendung'>
         <head>
              <script src="angular.min.js"></script>
              <script src="app_controller.js"></script>
         </head>
         <body ng-controller='TutorialController'>
              <label>Dynamisches Formular... Javascriptzeilen = 8 (wegen Schönschrift/Formatierung)</label>
              <input type="text" ng-model="dynamic"/>
              <p>Hallo dynamischer Inhalt {{dynamic}}</p>
         </body>
    </html>
    Was sich jetzt dadurch ändert, ist das automatisch beim Laden der Seite das Formular vorausgefüllt wird mit 'AngularJSTutorial'.

    Dies ist jetzt ein einfaches Beispiel gewesen, es lassen sich jedoch auch viel komplexere Daten automatisch abbilden und einbinden.
    So kann man sich ein Array aus Objekten generieren und diese automatisch einbinden.
    Code:
    …
    $scope.list=[
    { name: 'TutorialController', url: 'TutorialController.org'},
    { name: 'TutorialAnwendung', url: 'TutorialAnwendung.org'},
    { name: 'TutorialTest', url: 'TutorialTest.org'}
    ];
    …
    Code:
    <html ng-app='TutorialAnwendung'>
         <head>
              <script src="angular.min.js"></script>
              <script src="app_controller.js"></script>
         </head>
         <body ng-controller='TutorialController'>
              <ul>
    	       <li ng-repeat="listelement in list">{{listelement.name}}  -  {{listelement.url}} </li>
              </ul>
         </body>
    </html>
    Das wars dann auch erstmal mit dem Tutorial, falls es euch gefallen hat --> „like“.
    Falls ihr mehr Informationen braucht unter dem Link wo ihr die Bibliothek findet ihr noch mehr Tutorials.

    Liebe Grüße,

    uthred
    mikdoe and xorg1990 like this.

  2. #2
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.725

    AW: Einführung in AngularJS

    Super! Vielen vielen Dank für diesen Beitrag!
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

Ähnliche Themen

  1. [FRAGE] AngularJS http-request
    Von bambamboole im Forum Ajax
    Antworten: 3
    Letzter Beitrag: 19-09-2014, 10:28
  2. Einführung OOP in Javascript (und Actionscript)
    Von Albu im Forum JavaScript-FAQ
    Antworten: 15
    Letzter Beitrag: 06-01-2004, 00:05
  3. DAU braucht Einführung ;o)
    Von Dyonisus im Forum Serverseitige Programmierung
    Antworten: 13
    Letzter Beitrag: 18-03-2002, 23:56
  4. Wichtige News zur Euro Einführung!!
    Von style-guide! im Forum Fun
    Antworten: 5
    Letzter Beitrag: 13-12-2001, 23:08
  5. Einführung
    Von SBKE im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 23-12-2000, 21:45

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •