Web-Frontend
js-Tutorial
Was sollten Sie wissen, wenn Sie AngularJS zum ersten Mal kennenlernen? Ein unverzichtbares Tutorial für den Einstieg in AngularJS im Jahr 2018 (mit Beispielen)
Was sollten Sie wissen, wenn Sie AngularJS zum ersten Mal kennenlernen? Ein unverzichtbares Tutorial für den Einstieg in AngularJS im Jahr 2018 (mit Beispielen)
Dieser Artikel führt in das Grundverständnis von AngularJS ein, damit Schüler, die AngularJS lernen möchten, einen besseren Einführungskurs erhalten. Werfen wir jetzt einen Blick auf diesen Artikel.
Einführung in AngularJS
AngularJs ist ein Front-End-Framework, eine in JavaScript geschriebene Bibliothek. Benutzer können dieses Framework verwenden, um eine bidirektionale Datenbindung im Front-End durchzuführen und so die MVC-Datenanzeige im Front-End zu realisieren.
Wenn Sie das AngularJs-Framework verwenden, müssen Sie nur die AngularJs-Datei in das Front-End-HTML einführen. Sehr einfach zu bedienen.
Grundoperationen von AngularJs
Bevor wir die grundlegenden Anweisungen erklären, stellen wir einige grundlegende Konzepte vor. Nachdem der Benutzer die AngularJs-Datei in die Seite eingefügt hat, kann er die WebApp und den Controller erstellen. In AngularJs wird jede Seite als unabhängige WebApp betrachtet. Jede WebApp kann mehrere unabhängige Verarbeitungsteile enthalten, die wir Controller nennen. Jeder Controller verfügt über seinen eigenen unabhängigen Verarbeitungskontext und seine eigene Logik. AngularJs begrenzt den Umfang dieser WebApp durch die Anweisung ng-app. Normalerweise kann diese ng-app direkt auf das HTML-Tag oder auf ein Element geschrieben werden. Beispiel:
html:<p ng-app="myApp">
<p ng-controller="myController">
<h3>{{data}}</h3>
</p></p>Initialisierung der Anwendung: Die ng-app-Direktive teilt AngularJS mit, dass das
-Element der „Eigentümer“ der AngularJS-Anwendung ist.
Daten binden: Die ng-model-Direktive bindet den Wert des Eingabefelds an den Namen der Anwendungsvariablen. ---An die Immobilie binden. Ebenfalls verfügbar: Geben Sie eine Typvalidierung für Anwendungsdaten an (Nummer, E-Mail, erforderlich). Geben Sie den Status (ungültig, verschmutzt, berührt, Fehler) für Anwendungsdaten an. Stellt CSS-Klassen für HTML-Elemente bereit. Binden Sie HTML-Elemente an HTML-Formulare.
Daten in HTML binden: Die ng-bind-Direktive bindet den Namen der Anwendungsvariablen an das innerHTML eines Absatzes. Entspricht dem Schreiben von {{Variablenname}} in HTML – An Text binden
Daten initialisieren: Die ng-init-Direktive initialisiert AngularJS-Anwendungsvariablen.
Daten klonen: Die ng-repeat-Direktive klont das HTML-Element einmal für jedes Element in der Sammlung (Array). zB:ng-repeat=“x in Arrays“
Benutzerdefinierte Direktive: Fügen Sie benutzerdefinierte Direktiven hinzu, indem Sie die Funktion .directive verwenden. Um eine benutzerdefinierte Direktive aufzurufen, muss der Name der benutzerdefinierten Direktive zum HTML-Element hinzugefügt werden. Verwenden Sie „camelCase“, um eine Direktive „runoobDirective“ zu benennen, aber Sie müssen sie durch „runoob-directive“ trennen, wenn Sie sie verwenden.
eg:<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return { //restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
restrict : "A",//限制使用--E 作为元素名使用。A 作为属性使用。C 作为类名使用。M 作为注释使用
template : "<h1>自定义指令!</h1>"
};
}); </script></body>Controller: Die ng-controller-Direktive definiert Anwendungscontroller.
Filter: Filter können zu Ausdrücken über ein Pipe-Zeichen (|) gefolgt von einem Filter hinzugefügt werden.
Dienst: In AngularJS können Sie Ihren eigenen Dienst erstellen oder integrierte Dienste verwenden. Ein Dienst ist eine Funktion oder ein Objekt, das in Ihrer AngularJS-Anwendung verwendet werden kann. AngularJS verfügt über mehr als 30 integrierte Dienste. Hier sind einige häufig verwendete integrierte Dienste. (Wenn Sie mehr erfahren möchten, besuchen Sie die chinesische PHP-Website AngularJS Development Manual, um mehr zu erfahren)
1，$location:类似 window.location 对象，但 window.location 对象在 AngularJS 应用中有一定的局限性。2，$http:AngularJS 应用中最常用的服务。 服务向服务器发送请求，应用响应服务器传送过来的数据。3,$timeout:AngularJS $timeout 服务对应了 JS window.setTimeout 函数。4,$interval:AngularJS $timeout 服务对应了 JS window.setInterval 函数。5,用户可以根据自己的需求来创建自定义服务。
http: Ein Kerndienst in AngularJS, der zum Lesen verwendet wird Daten von Remote-Servern. Beachten Sie, dass die Erfolgs- und Fehlermethoden von $http in Version 1.5 veraltet sind. Verwenden Sie die then-Methode anstelle von
格式：/ 简单的 GET 请求，可以改为 POST$http({
method: 'GET',
url: '/someUrl'}).then(function successCallback(response) {
// 请求成功执行代码
}, function errorCallback(response) {
// 请求失败执行代码});select box (select) : AngularJS kann mithilfe eines Arrays oder Objekts eine Dropdown-Liste mit Optionen erstellen.
1,使用ng-options来创建一个对象<p ng-app="myApp" ng-controller="myCtrl">
<select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names">
</select></p><script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Google", "Runoob", "Taobao"];
});</script>2,使用ng-repeat来创建对象，<select ng-model="selectedSite">
<option ng-repeat="x in names">{{x}}</option></select>3,区别：ng-options，选择的值是一个对象：也就是当select获取值selectedSite时候，得到的是一个对象。ng-repeat，选择的值是一个字符串:也就是当select获取值selectedSite时候，得到的是一个字符串Tabelle: Die ng-repeat-Direktive in AngularJs kann die Tabelle perfekt anzeigen. Sie können bei der Anzeige der Tabelle auch Filter verwenden.
<p ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in names | orderBy : 'Name'">
<td>{{ $index + 1 }}</td>//显示序号 <td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table></p><script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("/try/angularjs/data/Customers_JSON.php")
.then(function (result) {
$scope.names = result.data.records;
});
});</script>HTML DOM： AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。
1,ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
2,ng-show 指令隐藏或显示一个 HTML 元素。ng-show 指令根据 value 的值来显示（隐藏）HTML 元素。你可以使用表达式来计算布尔值（ true 或 false）:
3,ng-hide 指令用于隐藏或显示 HTML 元素。注意在页面中如果使用input type=hidden来做表单传值的时候，是不支持的。
4,ng-click 指令定义了 AngularJS 点击事件。
模块： 模块定义了一个应用程序。模块是应用程序中不同部分的容器。模块是应用控制器的容器。控制器通常属于一个模块。
注意： 对于 HTML 应用程序，通常建议把所有的脚本都放置在 元素的最底部。这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。在我们的多个 AngularJS 实例中，您将看到 AngularJS 库是在文档的 区域被加载。在我们的实例中，AngularJS 在 元素中被加载，因为对 angular.module 的调用只能在库加载完成后才能进行。另一个解决方案是在 元素中加载 AngularJS 库，但是必须放置在您的 AngularJS 脚本前面：
表单： AngularJS 表单是输入控件的集合。
1,Input 控件使用 ng-model 指令来实现数据绑定。
2,checkbox 的值为 true 或 false，可以使用 ng-model 指令绑定，它的值可以用于应用中。举个例子：
<body ng-app="myApp" ng-controller="person">
<form ng-submit="submit()" name="myForm">
<p>职业: <input type="checkbox" ng-model="user.jobs.engineer">工程师 <input type="checkbox" ng-model="user.jobs.designer">设计师 <input type="checkbox" ng-model="user.jobs.teacher">教师 </p>
<input type="submit" value="提交">
<input type="button" value="选中教师" ng-click="select_teacher()">
</form></body><script>
var app = angular.module("myApp", []);
app.controller("person", function($scope) {
$scope.user = {
jobs: {
engineer: true,
designer: false,
teacher: false
}
};
$scope.submit = function() {
alert(JSON.stringify($scope.user));
};
$scope.select_teacher = function() {
$scope.user.jobs.teacher = true;
}
});</script> 3,radio：我们可以使用 ng-model 来绑定单选按钮到你的应用中。单选框使用同一个 ng-model ，可以有不同的值，但只有被选中的单选按钮的值会被使用。
4,下拉菜单上面已经写过。在此不再复述。
输入验证： AngularJS 表单和控件可以提供验证功能，并对用户输入的非法数据进行警告。
<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>
<p>用户名:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">用户名是必须的。</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = 'John Doe';
});
</script>注意： 我们使用了 ng-show指令， color:red 在邮件的
invalid 都为 true 时才显示。
属性 描述$dirty 表单有填写记录$valid 字段内容合法的$invalid 字段内容是非法的$pristine 表单没有填写记录
API： AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合，如：比较对象,迭代对象,转换对象,全局 API 函数使用 angular 对象进行访问。
以下列出了一些通用的 API 函数：
angular.lowercase() 转换字符串为小写 angular.uppercase() 转换字符串为大写 angular.isString() 判断给定的对象是否为字符串，如果是返回 true。 angular.isNumber() 判断给定的对象是否为数字，如果是返回 true。
注意点：
1，HTML5 允许扩展的（自制的）属性，以 data- 开头。AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。
2，类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。
与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。AngularJS 表达式不支持条件判断，循环及异常。AngularJS 表达式支持过滤器。
好了，本篇文章到这就结束了（想看更多就到PHP中文网AngularJS使用手册中学习），有问题的可以在下方留言提问。
Das obige ist der detaillierte Inhalt vonWas sollten Sie wissen, wenn Sie AngularJS zum ersten Mal kennenlernen? Ein unverzichtbares Tutorial für den Einstieg in AngularJS im Jahr 2018 (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Die neuesten 5 AngularJS-Tutorials im Jahr 2022, vom Einstieg bis zur Beherrschung
Jun 15, 2017 pm 05:50 PM
Javascript ist eine sehr einzigartige Sprache, was die Organisation des Codes, das Programmierparadigma des Codes und die objektorientierte Theorie betrifft. Die Frage, ob Javascript eine objektorientierte Sprache ist, wird seit langem diskutiert Es gibt offensichtlich schon seit langem eine Antwort. Auch wenn Javascript seit zwanzig Jahren vorherrscht, schauen Sie sich einfach das „Black Horse Cloud Classroom JavaScript Advanced Framework“ an, wenn Sie beliebte Frameworks wie jQuery, Angularjs und sogar React verstehen möchten Design-Video-Tutorial“.
Verwenden Sie PHP und AngularJS, um eine reaktionsfähige Website zu erstellen und ein hochwertiges Benutzererlebnis zu bieten
Jun 27, 2023 pm 07:37 PM
Im heutigen Informationszeitalter sind Websites zu einem wichtigen Instrument für Menschen geworden, um Informationen zu erhalten und zu kommunizieren. Eine responsive Website kann sich an verschiedene Geräte anpassen und den Benutzern ein qualitativ hochwertiges Erlebnis bieten, was zu einem Hotspot in der modernen Website-Entwicklung geworden ist. In diesem Artikel erfahren Sie, wie Sie mit PHP und AngularJS eine responsive Website erstellen, um ein qualitativ hochwertiges Benutzererlebnis zu bieten. Einführung in PHP PHP ist eine serverseitige Open-Source-Programmiersprache, die sich ideal für die Webentwicklung eignet. PHP bietet viele Vorteile, z. B. einfache Erlernbarkeit, plattformübergreifende Funktionalität, umfangreiche Toolbibliothek und Entwicklungseffizienz
Erstellen Sie Webanwendungen mit PHP und AngularJS
May 27, 2023 pm 08:10 PM
Mit der kontinuierlichen Entwicklung des Internets sind Webanwendungen zu einem wichtigen Bestandteil des Informationsaufbaus in Unternehmen und zu einem notwendigen Mittel für Modernisierungsarbeiten geworden. Um die Entwicklung, Wartung und Erweiterung von Webanwendungen zu vereinfachen, müssen Entwickler ein technisches Framework und eine Programmiersprache wählen, die ihren Entwicklungsanforderungen entspricht. PHP und AngularJS sind zwei sehr beliebte Webentwicklungstechnologien. Sie sind serverseitige bzw. clientseitige Lösungen und können die Entwicklungseffizienz und das Benutzererlebnis von Webanwendungen erheblich verbessern. Vorteile von PHPPHP
Verwenden Sie PHP und AngularJS, um eine Online-Dateiverwaltungsplattform zu entwickeln, die die Dateiverwaltung erleichtert
Jun 27, 2023 pm 01:34 PM
Mit der Popularität des Internets nutzen immer mehr Menschen das Netzwerk, um Dateien zu übertragen und zu teilen. Aus verschiedenen Gründen kann die Verwendung herkömmlicher FTP- und anderer Methoden zur Dateiverwaltung jedoch nicht den Anforderungen moderner Benutzer gerecht werden. Daher ist die Einrichtung einer benutzerfreundlichen, effizienten und sicheren Online-Dateiverwaltungsplattform zu einem Trend geworden. Die in diesem Artikel vorgestellte Online-Dateiverwaltungsplattform basiert auf PHP und AngularJS. Sie kann problemlos Dateien hochladen, herunterladen, bearbeiten, löschen und andere Vorgänge ausführen und bietet eine Reihe leistungsstarker Funktionen wie Dateifreigabe, Suche,
Wie verwende ich AngularJS in der PHP-Programmierung?
Jun 12, 2023 am 09:40 AM
Mit der Popularität von Webanwendungen erfreut sich das Frontend-Framework AngularJS immer größerer Beliebtheit. AngularJS ist ein von Google entwickeltes JavaScript-Framework, das Sie beim Erstellen von Webanwendungen mit dynamischen Webanwendungsfunktionen unterstützt. Andererseits ist PHP für die Backend-Programmierung eine sehr beliebte Programmiersprache. Wenn Sie PHP für die serverseitige Programmierung verwenden, bringt die Verwendung von PHP mit AngularJS dynamischere Effekte auf Ihre Website.
Erstellen Sie eine einseitige Webanwendung mit Flask und AngularJS
Jun 17, 2023 am 08:49 AM
Mit der rasanten Entwicklung der Webtechnologie ist die Single Page Web Application (SinglePage Application, SPA) zu einem immer beliebter werdenden Webanwendungsmodell geworden. Im Vergleich zu herkömmlichen mehrseitigen Webanwendungen besteht der größte Vorteil von SPA darin, dass die Benutzererfahrung reibungsloser ist und auch der Rechendruck auf dem Server erheblich reduziert wird. In diesem Artikel stellen wir vor, wie man mit Flask und AngularJS ein einfaches SPA erstellt. Flask ist ein leichter Py
Einführung in die Grundlagen von AngularJS
Apr 21, 2018 am 10:37 AM
Der Inhalt dieses Artikels befasst sich mit der grundlegenden Einführung in AngularJS. Jetzt kann ich ihn mit Ihnen teilen.
So verwenden Sie PHP und AngularJS für die Frontend-Entwicklung
May 11, 2023 pm 05:18 PM
Mit der Popularität und Entwicklung des Internets wird die Front-End-Entwicklung immer wichtiger. Als Frontend-Entwickler müssen wir verschiedene Entwicklungstools und -technologien verstehen und beherrschen. Unter ihnen sind PHP und AngularJS zwei sehr nützliche und beliebte Tools. In diesem Artikel erklären wir, wie Sie diese beiden Tools für die Frontend-Entwicklung verwenden. 1. Einführung in PHP PHP ist eine beliebte serverseitige Open-Source-Skriptsprache. Sie eignet sich für die Webentwicklung und kann auf Webservern und verschiedenen Betriebssystemen ausgeführt werden. Die Vorteile von PHP sind Einfachheit, Geschwindigkeit und Komfort
