Wie verwende ich AngularJS? Detaillierte Analyse von AngularJS-Framework-Beispielen (mit vollständigen Beispielen)-js-Tutorial-php.cn

Dieser Artikel stellt eine Zusammenfassung der Framework-Wissenspunkte von angularjs vor, mit vollständigen Beispielen und detaillierten Erläuterungen zu vollständigen Tags. Als nächstes lesen wir gemeinsam diesen Artikel

1. AngularJSWas ist das?

Es handelt sich um ein von Google entwickeltes Front-End-Framework mit einer MVC-Struktur. In der Angular-Anwendung ist die Ansichtsebene DOM und der Controller ist JavaScript Klassen- und Modelldaten werden in Objekteigenschaften gespeichert.

2. Datenbindung

ordnet einen bestimmten Teil der Schnittstelle Attributen von JavaScript zu, sodass diese automatisch ausgeführt werden können Synchronisation, diese Programmiermethode ist die Datenbindung. Es ist nicht erforderlich, einen Listener für das Feld zu registrieren, und die Objekteigenschaften und die Schnittstellenanzeige können synchron geändert werden.

3. Abhängigkeitsinjektion

Es ist nicht erforderlich, das Objekt neu zu erstellen, Sie müssen das Objekt $scope oder $loaction wird wie folgt in den Konstruktor eingefügt. Dies ist eine Abhängigkeitsinjektion.

function HelloController($scope, $location) {
$scope.greeting = { text: &#39;Hello&#39; };
// use $location for something good here...
}

Nach dem Login kopieren

Anweisungen

Die Kernschicht des Frameworks verfügt über eine leistungsstarke DOM -Konvertierungs-Engine, mit der Sie <🎜 erweitern können > HTML Syntax. Der ng-controller in HTML wird verwendet, um anzugeben, welcher Controller welche Ansicht bedienen soll, ng- model bindet ein Eingabefeld an das Modellteil. Wir nennen diese HTML Erweiterungsdirektiven. 5.

Erklären Sie jedes Tag anhand von Beispielen

<!DOCTYPE html>
<html  ng-app>
<head>
<base/>
<title>Your Shopping Cart</title>
<script src="../frm/angular/angular.js"></script>
</head>
<body ng-controller=&#39;CartController&#39;>
<h1>Your Order</h1>
<p ng-repeat=&#39;item in items&#39;>
<span>{{item.title}}</span>
<input ng-model=&#39;item.quantity&#39;/>
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
<button ng-click="remove($index)"> Remove </button>
</p>
<script>
function CartController($scope) {
////@formatter:off
$scope.items = [{
title : &#39;Paint pots&#39;,
quantity : 8,
price : 3.95
}, {
title : &#39;Polka dots&#39;,
quantity : 17,
price : 12.95
}, {
Title : &#39;Pebbles&#39;,
quantity : 5,
price : 6.95
}];
////@formatter:on
$scope.remove = function(index) {
$scope.items.splice(index, 1);
};
}
</script>
</body>
</html>

Nach dem Login kopieren

Folgen Sie dem obigen Code, Erklären Sie den Hauptinhalt:

)

ng-app

Eigenschaften teilen

Angular mit, welchen Teil der Seite es verwalten soll. Da wir es auf das html-Element setzen, weist es Angular an, die gesamte Seite zu verwalten. Wenn Sie Angular in eine vorhandene Anwendung integrieren, die andere Methoden zum Verwalten von Seiten verwendet, müssen Sie möglicherweise p<🎜 in der Anwendung platzieren >Nach oben. 2)

Angular < In 🎜> wird der von der

JavaScript-Klasse verwaltete Seitenbereich als Controller bezeichnet. Durch die Aufnahme eines Controllers in das body-Tag verwaltet der deklarierte CartController den bodyAlles zwischen Tags. 3)

ng-repeat stellt ElementeKopieren Sie jedes Element im Array einmal in das in diesem p DOM. In jeder Kopie von p ist ein Attribut namens item so eingestellt, dass es das aktuelle Element darstellt, damit wir es verwenden können. Wie Sie sehen können, enthält jedes p den Produktnamen, die Menge, den Stückpreis, den Gesamtpreis und eine Schaltfläche zum Entfernen.

4) {{item.title}}

Wie gezeigt 'Hello World' Beispiel: Bei der Datenbindung wird der Wert der Variablen über {{ }}< in einen bestimmten Teil der Seite eingefügt 🎜> Bleiben Sie synchron. Der vollständige Ausdruck {{item.title}} ruft das aktuelle Element in der Iteration ab und legt dann den Attributwert titile des aktuellen Elements fest Einfügen in DOM.

)

ng-model

Definition Es wurde eine Datenbindung zwischen dem Eingabefeld und item.quantity erstellt. span{{ im Tag }} stellt eine unidirektionale Verbindung her, geben Sie den Wert hier ein. Die Anwendung muss jedoch wissen, dass sich der Gesamtpreis ändern kann, wenn der Benutzer die Menge ändert, was wir wollen. Durch die Verwendung von ng-model halten wir Änderungen mit unserem Modell synchron. ng-model gibt an, dass der Wert von item.quantity immer dann in das Eingabefeld eingefügt wird, wenn der Benutzer einen neuen Wert eingibt , es wird automatisch item.quantity aktualisiert.

) {{item.price | payment}}

Wir möchten, dass der Stückpreis in USD formatiert wird. Angular verfügt über eine Funktion namens Filter, mit der wir Text konvertieren können. Es gibt einen Filter namens Währung , der diese Dollarformatierung für uns übernimmt.

)

Klicken Sie auf diese Schaltfläche, um die Funktion remove() aufzurufen. Gleichzeitig wird $index übergeben, der die Iterationsreihenfolge von ng-repeat enthält, um zu wissen, welches Element entfernt werden soll.

)function CartController($scope) {

CartController

Verwalten Sie die Logik dieses Warenkorbs. Dadurch teilen wir Angular mit, dass der Controller

ein Objekt namens $scope benötigt. $scope wird verwendet, um Daten an Elemente auf der Schnittstelle zu binden.

9）$scope.remove = function(index) {

$scope.items.splice(index, 1);

};

我们希望 remove()函数能够绑定到界面上，因此我们也把它增加到$scope中。对于这

个内存中的购物车版本，remove()函数只是从数组中删除了它们。因为通过ng-repeat创建

的这些

是数据捆绑的，当某项消失时，列表自动收缩。记住，无论何时用户点击移除

按钮中的一个，都将从界面上调用 remove()函数。（想看更多就到PHP中文网AngularJS开发手册中学习）

6. 调用 Angular

任何应用使用 Angular 必须做两件事：

1）加载 angular.js

2）使用 ng-app告知Angular管理哪一部分的DOM

7. 加载脚本

很简单：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>

Nach dem Login kopieren

推荐使用 Google 的CDN。Google的服务器是非常快的，脚本是跨应用缓存的。那就是说，如果你的用户有多个使用Angular的应用，它只下载一次。同样，如果用户访问过使用Google Angular的CDN链接，那么当他访问你的站点时没有必要再次下载。

8. 模块

<html ng-app=&#39;myApp&#39;>
<body ng-controller=&#39;TextController&#39;>
<p>{{someText.message}}</p>
<script  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script>
var myAppModule = angular.module(&#39;myApp&#39;, []);
myAppModule.controller(&#39;TextController&#39;,
function($scope) {
var someText = {};
someText.message = &#39;You have started your journey.&#39;;
$scope.someText = someText;
});
</script>
</body>
</html>

Nach dem Login kopieren

在这个模板中，我们告知 ng-app 元素我们的模块名，myApp。然后我们调用了Angular对象创建一个名为myApp的模块，传递了控制器函数给模块的控制器函数。

只要记住，远离全局命名空间是一件好事。模块化这是我们通用的机制。

9. 模板和数据绑定

Angular 应用中的模板只是那些我们从服务器加载的 HTML文档或者是定义在

Beliebte Tutorials

Mehr>

Verwandte Tutorials

Beliebte Empfehlungen

Aktuelle Kurse