Latest web development tutorials

AngularJS Einführung

AngularJS ist ein JavaScript - Framework. Es kann auf HTML-Seiten durch <script> Tag hinzugefügt werden.

AngularJS durch Richtlinie erweitert die HTML, und durch die Expression binden Daten in HTML.


AngularJS ist ein JavaScript-Framework

AngularJS ist ein JavaScript-Framework. Es ist eine Bibliothek, in JavaScript geschrieben.

AngularJS JavaScript-Datei ist eine Form der Freisetzung kann durch die Script-Tag der Seite hinzugefügt werden:

<Script src = "http://cdn.static.w3big.com/libs/angular.js/1.4.6/angular.min.js"> </ script>

Note Wir schlagen vor, Skript auf dem Boden des <body> Element.
Dadurch wird die Seite Ladegeschwindigkeit zu erhöhen, da HTML nicht unterliegt Skript laden zu laden.

Jede Angularjs Version herunterladen: https://github.com/angular/angular.js/releases


AngularJS erstreckt HTML

AngularJS von ng-Richtlinien erweitert HTML.

ng-App - Richtlinie definiert eine AngularJS Anwendung.

ng-Modellbefehls die Elementwerte (wie beispielsweise dem Wert des Eingabefeldes) an die Anwendung gebunden.

ng-bind Befehl Anwendungsdaten zu HTML - Ansicht zu binden.

AngularJS Beispiele

<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8 ">
<Script src = "http://cdn.static.w3big.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
</ Head>
<Body>

<Div ng-app = "" >
<P> Name: <input type = "text" ng-Modell = "name"> </ p>
<H1> Hallo {{name} } </ h1>
</ Div>

</ Body>
</ Html>

Versuchen »

Beispiele zu erklären:

Wenn die Seite geladen wird, AngularJS automatisch.

ng-App - Direktive teilt AngularJS, <div> Element ist AngularJS Anwendung des "Besitzers" .

ng-Modell Direktive bindet den Wert des Eingabefeldes für die Anwendung Variablennamen.

ng-bind Befehl an eine Anwendung Variablenname innerHTML- auf einen Absatz gebunden.

Note Wenn Sie die ng-App - Richtlinie zu entfernen, wird HTML - Code direkt auf den Ausdruck angezeigt werden, nicht auf die Darstellung der Ergebnisse zu bewerten.

Was ist AngularJS?

AngularJS macht die Entwicklung der modernen Single-Page-Applikation (SPAs: Einzelne Seite Applications) zu erleichtern.

  • AngularJS binden Anwendungsdaten auf HTML-Elemente.
  • AngularJS HTML-Elemente geklont und wiederholen werden können.
  • AngularJS verstecken kann und HTML-Elemente zeigen.
  • AngularJS kann Code in das HTML-Element hinzufügen "hinter sich."
  • AngularJS unterstützen Eingabevalidierung.

AngularJS Richtlinien

Wie Sie sehen können, ist AngularJS Anweisung ng HTML - Attribute vorangestellt.

ng-Befehl init AngularJS Anwendungsvariablen zu initialisieren.

AngularJS Beispiele

<div ng-app="" ng-init="firstName='John'">

<p>姓名为 <span ng-bind="firstName"></span></p>

</div>

Versuchen »

Note HTML5 ermöglicht es Ihnen , die (hausgemachte) Immobilie zu daten Anfang zu verlängern.
AngularJS Eigenschaft ng- Anfang an, aber Sie können Daten-ng- verwenden , um Web - Seiten für HTML5 gültig zu machen.

Bei Vorliegen einer gültigen HTML5:

AngularJS Beispiele

<div data-ng-app="" data-ng-init="firstName='John'">

<p>姓名为 <span data-ng-bind="firstName"></span></p>

</div>

Versuchen »


AngularJS Ausdruck

AngularJS Ausdrücke in geschweiften Klammern geschrieben: {{Ausdruck}}.

AngularJS Ausdruck zu binden , um die Daten zu HTML, die ng-bind Befehl , um den gleichen Zweck hat.

AngularJS Ausdruck in der Schreibposition "Ausgang" Daten.

AngularJS Ausdrücke wie JavaScript Ausdrücke: Sie können Text, Operatoren und Variablen enthalten.

Beispiele 5 + 5 {{}} oder {{firstname + "" + nachName}}

AngularJS Beispiele

<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Script src = "http://cdn.static.w3big.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
</ Head>
<Body>

<Div ng-app = "">
<P> Mein erster Ausdruck: {{5 + 5}} </ p>
</ Div>

</ Body>
</ Html>

Versuchen »

AngularJS Anwendungen

AngularJS Moduls (Module) definiert AngularJS Anwendungen.

AngularJS Controller (Controller) für AngularJS Anwendungen zu steuern.

ng-App - Richtlinie definiert die Anwendung, ng-Controller die Steuerung definiert.

AngularJS Beispiele

<Div ng-app = "myApp " ng-Controller = "myCtrl">

Name: <input type = "text" ng-Modell = "firstname"> <br>
Name: <input type = "text" ng-Modell = "nachName"> <br>
<br>
Name: {{firstname + "" + nachName}}

</ Div>

<Script>
var app = angular.module ( 'myApp' , []);
app.controller ( 'myCtrl', function ( $ scope) {
$ Scope.firstName = "John";
$ Scope.lastName = "Doe";
});
</ Script>

Versuchen »

AngularJS Anwendungsmodul Definition:

AngularJS Modul

var app = angular.module ( 'myApp', []);

AngularJS Controller-Anwendungen:

AngularJS Controller

app.controller ( 'myCtrl', function ($ scope) {
$ Scope.firstName = "John";
$ Scope.lastName = "Doe";
});

Im nächsten Tutorial werden Sie mehr Wissen und Anwendungsmodule lernen.