Anfängerleitfaden zum Erstellen von Web-Apps mit AngularJS

anglejs homepage

Steigen Sie in das Web-App-Framework von Google ein

Wenn Sie ein professioneller JavaScript-Entwickler sind, haben Sie wahrscheinlich schon davon gehört Ember.js (ein Open-Source-JavaScript-Framework) und Backbone.js (eine JavaScript-Bibliothek mit einer RESTful JSON-Schnittstelle). Aber wenn Sie nicht vertraut sind AngularJS Sie werden jedoch einige der überzeugenden Funktionen vermissen, die Ihr HTML für Webanwendungen wirklich verbessern können.

Hier geben wir Ihnen einen Vorgeschmack auf AngularJS, ein superheldenhaftes JavaScript MVW-Framework, einschließlich seiner herausragenden Funktionen und des Einstiegsprozesses.



Hoffentlich hilft Ihnen dies nicht nur bei der Entwicklung gut strukturierter und wartbarer Rich-Webanwendungen, sondern gibt Ihnen auch einige gute Gründe, sich für AngularJS für Ihre bevorstehenden Projekte zu entscheiden. Lass uns anfangen!

Verwenden des Stiftwerkzeugs in Photoshop zum Ausschneiden von Bildern

01. Was ist AngularJS?

AngularJS wurde von Google entwickelt und ist ein Open-Source-Webanwendungsframework, das Webentwicklern sowohl die Front-End-Entwicklung als auch das Testen erleichtert. Das Hauptziel von AngularJS besteht darin, Webanwendungen mit MVC-Fähigkeit (Model-View-Controller) zu verlängern. Es handelt sich um ein clientseitiges JavaScript MVC / MVVM-Framework, das vollständig erweiterbar ist, ohne Bibliotheksabhängigkeiten ausgeführt wird und auch mit anderen Bibliotheken hervorragend funktioniert. Sie können auch jede Funktion ändern oder ersetzen, um sie an Ihre spezifischen Anforderungen anzupassen.

AngularJS wurde 2009 von Adam Abrons und Mi & scaron; ko Heverym entwickelt, die zu dieser Zeit Google-Ingenieure waren. Wie auf der offiziellen Website erwähnt, handelt es sich um ein 'strukturelles Framework für dynamische Webanwendungen', das sich am besten zum Erstellen einseitiger Webanwendungen eignet, für die nur clientseitig JavaScript, CSS und HTML erforderlich sind.

Sie können HTML als Vorlagensprache verwenden und die HTML-Syntax erweitern, um die Komponenten Ihrer Webanwendung übersichtlich und präzise auszudrücken. AngularJS hilft Ihnen dabei, Ihren JavaScript-Code besser zu strukturieren, und erleichtert das Testen. Der Browser lernt, wie die Abhängigkeitsinjektion für jede Servertechnologie verwendet wird.

Verwendung von AngularJS

Der Einstieg in AngularJS ist ganz einfach. Sie können eine einfache Angular-App in nur fünf Minuten erstellen, indem Sie Ihren HTML-Skripten einige Attribute hinzufügen. Diese sind:

1. Fügen Sie die Anweisung 'ng-app' in das Tag ein. Dadurch wird AngularJS auf der Seite ausgeführt und die Seite als Angular-Anwendung definiert.

2. Platzieren Sie das Angular-Tag am unteren Rand Ihrer Seite, wo das Tag endet.

3. Fügen Sie reguläres HTML hinzu. HTML-Attribute werden verwendet, um auf AngularJS-Direktiven zuzugreifen, während die Auswertung von Ausdrücken in doppelter Klammer erfolgt.

Wie erstelle ich einen Kalender in Indesign?

Today's tasks

  • {{task.name}}

Hier definiert die Direktive ng-controller einen Namespace, in dem Sie Ihren Angular JS platzieren können, um die Daten zu steuern und die Ausdrücke in Ihrem HTML auszuwerten. Während die Direktive ng-repeat ein Angular-Repeater-Objekt ist, das Angular auffordert, Listenelemente zu erstellen, solange Sie Aufgaben anzeigen müssen.

Während die meisten Frameworks heutzutage nur ein Bündel vorhandener Tools sind, ist AngularJS ein Framework der nächsten Generation mit einigen sehr überzeugenden Funktionen, die nicht nur für Entwickler hilfreich, sondern auch für Designer gleichermaßen nützlich sind. Im Folgenden finden Sie einige unglaubliche Funktionen von AngularJS, mit denen Entwickler ihre zukünftigen Webanwendungen großartig gestalten können ...

Richtlinien

Direktiven sind eine der mächtigsten und überzeugendsten Funktionen von AngularJS. Sie ermöglichen es Ihnen, Ihren HTML-Code zu erweitern, und werden von AngularJS verwendet, um seine Aktion in die Seite einzufügen. Mit ihnen können Sie benutzerdefinierte und wiederverwendbare HTML-Tags angeben, mit denen Sie DOM-Attribute bearbeiten und das Verhalten bestimmter Elemente moderieren können. Allen Direktiven ist ng- vorangestellt, als eigenständige Elemente konzipiert, die von Ihrer MVC-Anwendung getrennt sind, und in HTML-Attributen platziert.



Einige der bemerkenswerten AngularJS-Richtlinien sind:

  • ng-app: Diese Anweisung teilt Angular mit, wo sie aktiviert werden soll. Um eine Seite als Angular-Anwendung zu definieren, müssen Sie einen einfachen Code verwenden :.
  • ng-bind: Diese Anweisung weist Angular an, den Textinhalt eines HTML-Elements mit dem Wert des angegebenen Ausdrucks zu ändern und den Text zu aktualisieren, wenn sich der Wert dieses Ausdrucks ändert.
  • ng-model: Es ist ng-bind sehr ähnlich, bindet jedoch die Ansicht in das Modell ein, was andere Anweisungen wie select, textarea oder input erfordern.
  • ng-class: Ermöglicht das dynamische Laden von Klassenattributen.
  • ng-controller: Mit dieser Anweisung können Sie eine JavaScript-Controller-Klasse zum Auswerten von HTML-Ausdrücken angeben.
  • ng-repeat: Es durchläuft mühelos ein Element in einer Sammlung, auf das die angegebene Schleifenvariable festgelegt ist.
  • ng-hide und ng-show: Diese Anweisung verwendet den Wert eines Booleschen Ausdrucks und entscheidet, ob das Element angezeigt wird oder nicht.
  • ngIf: Es ist eine grundlegende if-Anweisungsanweisung, die es ermöglicht, einen Klon des kompilierten Elements erneut in das DOM einzufügen, wenn die Bedingungen erfüllt sind. Wenn die Bedingung falsch ist, wird das Element aus dem DOM entfernt.

Das Folgende ist ein Beispiel für eine Direktive, die ein Ereignis abhört und folglich seinen $ -Bereich aktualisiert.

myModule.directive('myComponent', function(mySharedService) { return { restrict: 'E', controller: function($scope, $attrs, mySharedService) { $scope.$on('handleBroadcast', function() { $scope.message = 'Directive: ' + mySharedService.message; }); }, replace: true, template: '' }; });

Diese benutzerdefinierte Anweisung kann wie folgt verwendet werden:

Zweiwege-Datenbindung

Die Datenbindung ist wahrscheinlich das dominanteste und bemerkenswerteste Merkmal von AngularJS. Es erspart Entwicklern das Schreiben einer beträchtlichen Menge an Code, indem das Server-Backend erheblich entlastet wird. In einer typischen Webanwendung sind 80% der Codebasis für das Bearbeiten, Durchlaufen und Abhören des DOM vorgesehen. Durch die Datenbindung wird dieser Code unsichtbar, sodass Sie sich auf andere wichtige Dinge Ihrer Anwendung konzentrieren können.

Traditionell verfügen die meisten Template-Systeme über eine Einweg-Datenbindung: Sie führen Modell- und Template-Komponenten zu einer Ansicht zusammen. Nach dem Zusammenführen werden Änderungen am Modell nicht automatisch in der Ansicht angezeigt. Um diese Änderungen widerzuspiegeln, muss der Entwickler die DOM-Elemente und -Attribute manuell bearbeiten. Dieser Vorgang wird komplizierter und umständlicher, wenn ein Benutzer Änderungen an der Ansicht vornimmt. Da der Entwickler dann die Interaktionen interpretieren, in das Modell einbinden und die Ansicht aktualisieren muss.

Einweg-Datenbindungsdiagramm

Bild mit freundlicher Genehmigung von http://docs.angularjs.org

Im Gegensatz dazu führt AngularJS die Datenbindung auf bessere und andere Weise durch, indem die Synchronisation der Daten zwischen dem Modell und dem DOM durchgeführt wird und umgekehrt.

Zweiwege-Datenbindungsdiagramm

Bild mit freundlicher Genehmigung von http://docs.angularjs.org

Es folgt ein einfaches Beispiel, in dem die Bindung eines Eingabewerts an a erläutert wird

Etikett.

wie man ein besserer Designer wird
Name:

Hello, {{yourName}}!

Abhängigkeitsspritze

AngularJS verfügt über ein integriertes Injektorsubsystem, mit dem Entwickler Anwendungen einfach entwickeln, verstehen und testen können. Die Abhängigkeitsinjektion in AngularJS ist dafür verantwortlich, Komponenten zu erstellen, zu behandeln, wie sie ihre Abhängigkeiten erfassen, und sie auf Anfrage anderen Komponenten zur Verfügung zu stellen.

Durch die Verwendung der Abhängigkeitsinjektion bringt AngularJS herkömmliche serverseitige Dienste in clientseitige Webanwendungen, was zu einer geringeren Belastung des Backends und einer wesentlich geringeren Webanwendung führt.

Wenn Sie Zugriff auf AngularJS-Kerndienste erhalten möchten, müssen Sie einen bestimmten Dienst als Parameter hinzufügen. AngularJS erkennt automatisch, dass Sie diesen Dienst nutzen möchten, und stellt Ihnen eine Instanz zur Verfügung.



function EditCtrl($scope, $location, $routeParams) { // Write something here... }

Darüber hinaus können Sie Ihre eigenen benutzerdefinierten Services definieren und diese für die Injektion zugänglich machen.

angular. module('MyServiceModule', []). factory('notify', ['$window', function (win) { return function (msg) { win.alert(msg); }; }]); function myController(scope, notifyService) { scope.callNotify = function (msg) { notifyService(msg); }; } myController.$inject = ['$scope', 'notify'];

Vorlagen

In AngularJS wird eine Vorlage mit HTML geschrieben, die Angular-spezifische Attribute und Elemente enthält. Durch die Kombination der Vorlage mit Informationen aus dem Controller und dem Modell rendert AngularJS die dynamische Ansicht in Browsern.

Unten finden Sie Winkelelemente und Attribute, die verwendet werden können:

  • Filter: Die Formatierung der Daten für die Anzeige erfolgt durch dieses Element.
  • Formularsteuerelemente: Wird zur Validierung von Benutzereingaben verwendet.
  • Markup: Um Ausdrücke an Elemente zu binden, verwenden Sie die doppelte geschweifte Klammer {{}}.
  • Direktive: Ein Element oder Attribut, das eine wiederverwendbare DOM-Komponente rendert oder ein vorhandenes DOM-Element verlängert.

Der folgende Code zeigt eine Vorlage mit Anweisungen und Markup:

schwarzer Freitag Apfel Laptop Angebote 2016
{{buttonText}}

In einer typischen Anwendung enthält die Vorlage CSS-, HTML- und Angular-Anweisungen in einer einzelnen HTML-Datei (normalerweise index.html).

Testen

Da JavaScript dynamisch ist und mit großer Ausdruckskraft interpretiert wird, nimmt der Compiler fast keine Hilfe in Anspruch. Daher weiß das AngularJS-Team genau, dass jeder JavaScript-Code eine Reihe strenger Tests durchlaufen muss. Deshalb haben sie AngularJS von Grund auf so konzipiert, dass es testbar ist, um das Testen Ihrer Webanwendungen so einfach wie möglich zu gestalten.

AngularJS nutzt die Abhängigkeitsinjektion voll aus, ist mit Mocks vorgebündelt und fördert die Trennung von Verhaltensansichten. Für End-to-End-Tests verfügt AngularJS über einen End-to-End-Testläufer namens Protractor, der das Innenleben von AngularJS versteht, um Testfehler zu vermeiden, und Benutzerinteraktionen mit Ihrer Anwendung simuliert.

Eine andere Art von Test im AngularJS ist der Unit-Test, mit dem Sie einzelne Codeeinheiten testen können. Darüber hinaus hat das Angular-Team eine Chrome-Erweiterung mit dem Namen erstellt AngularJS Batarang Dadurch können Entwickler Leistungsengpässe leicht erkennen und ihre Anwendungen im Browser debuggen.

Ajeet Yadav ist ein professioneller Webentwickler, der mit wordpressintegration.com , ein renommiertes Webentwicklungsunternehmen, das einen hochwertigen Konvertierungsservice für Photoshop-zu-WordPress-Themes / -Vorlagen anbietet. Folgen @Wordpress_INT auf Twitter.