In diesem Artikel geht es hauptsächlich um die Syntaxeinführung von AngularJS sowie um die Erklärung des Geltungsbereichs von AngularJS und die Erklärung des AngularJS-Controllers und -Dienstes. Schauen wir uns als Nächstes die Artikelleiste dieses Artikels an
Unbekannte AngularJS-Syntax aufzeichnen
Filter
-
Benutzerdefinierter Filter
AngularJS Service
AngularJS XMLHttpRequest
AngularJS Select(Auswahlfeld)
$Standort
$http-Dienst
$Timeout-Dienst
Erstellen Sie einen benutzerdefinierten Dienst
AngularJS Scope
AngularJS Controller
-
AngularJS Filter
AngularJS Scope
$rootScope
$rootScope : 根作用域,所有 controller 都可以调用，类似于项目级别的全局变量
js赋值 : $rootScope.lastname = "Refsnes";
html调用 : $root.lastname
Nach dem Login kopieren
$scope Scope
之间无法互相访问
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上
Nach dem Login kopieren
AngularJS-Controller
控制 AngularJS 应用程序的数据。 AngularJS 控制器是常规的 JavaScript 对象。
ng-controller
ng-controller 指令定义了应用程序控制器
ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。 myCtrl 函数是一个 JavaScript 函数。
JS引用<script src="personController.js"></script> 多个controller
js文件中 定义一个app
之后可以定义多个controller
HTML中也可以对应多个controller
Nach dem Login kopieren
Mehrere Controller-Controller
var app = angular.module('myApp', []);
app.controller('myCtrl1', function($scope) {
$scope.firstName = "Johns"; $scope.lastName = "Doef";
});
app.controller('myCtrl2', function($scope) {
$scope.firstName = "Tom"; $scope.lastName = "kkk";
});Nach dem Login kopieren
AngularJS-Filterung Filter
Filter
Filter können mithilfe einer Pipe zu Ausdrücken und Anweisungen hinzugefügt werden Zeichen (|).
AngularJS-Filter können zum Transformieren von Daten verwendet werden
Währung Zahlen in Währungsformat formatieren
Filter Wählen Sie eine Teilmenge aus Array-Elementen aus.
Kleinbuchstaben Formatiert Zeichenfolgen in Kleinbuchstaben.
orderBy Ordnen Sie das Array gemäß einem Ausdruck an
Großbuchstaben Formatieren Sie die Zeichenfolge in Großbuchstaben
Filtereingabe
Dem Eingabefilter kann ein Pipe-Zeichen übergeben werden ( |) und ein der Direktive hinzugefügter Filter, gefolgt von einem Doppelpunkt und einem Modellnamen.
<p><input type="text" ng-model="test"></p><ul>
<li ng-repeat="x in names | filter:test | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li></ul>Nach dem Login kopieren
Das folgende Beispiel passt einen Umkehrfilter an, um die Zeichenfolge umzukehren.
<!DOCTYPE html><html><meta charset="utf-8"><script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script> <body> <p ng-app="myApp" ng-controller="myCtrl">姓名: {{ msg | reverse }}</p><script>var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.msg = "Runoob";
});
app.filter('reverse', function() { //可以注入依赖
return function(text) {
return text.split("").reverse().join("");
}
});</script> </body></html>Nach dem Login kopieren
Konvertierung von Groß- und Kleinbuchstaben (Wenn Sie lernen möchten Weitere Informationen finden Sie auf der chinesischen PHP-Website AngularJS Development Manual Mit AngularJS können Sie Ihre eigenen Dienste erstellen oder integrierte Dienste verwenden.
In AngularJS ist ein Dienst eine Funktion oder ein Objekt, das in Ihrer AngularJS-Anwendung verwendet werden kann.
$location
location.absUrl(); die aktuelle URL-Adresse der Seite $http-Dienst
$http ist der am häufigsten verwendete Dienst in AngularJS-Anwendungen. Der Dienst sendet eine Anfrage an den Server und die Anwendung antwortet auf die vom Server gesendeten Daten.
$timeout service
Intervalldienst entspricht der JS-Funktion window.setInterval. Intervall kann verwendet werden, um einen Verzögerungsdienst festzulegen, der immer ausgeführt wird. Erstellen Sie einen benutzerdefinierten Dienst
Um einen benutzerdefinierten Dienst zu verwenden, müssen Sie ihn unabhängig hinzufügen, wenn Sie den Controller definieren und Abhängigkeiten festlegen:
Nachdem Sie einen benutzerdefinierten Dienst erstellt und mit Ihrer Anwendung verbunden haben, können Sie ihn in Controllern, Anweisungen, Filtern oder anderen Diensten verwenden.
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script></head><body><p ng-app="myApp" ng-controller="myCtrl"><p>255 的16进制是:</p><h1>{{hex}}</h1></p><p>自定义服务，用于转换16进制数：</p><script>var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});</script></body></html>Nach dem Login kopieren
AngularJS XMLHttpRequest
http.get -http.post -http.delete -http.patch
Einfache Get/Post-Anfrage
// 简单的 GET 请求，可以改为 POST$http({
method: 'GET',
url: '/someUrl'}).then(function successCallback(response) {
// 请求成功执行代码
}, function errorCallback(response) {
// 请求失败执行代码});$http.get('/someUrl', config).then(successCallback, errorCallback);$http.post('/someUrl', data, config).then(successCallback, errorCallback);Nach dem Login kopieren
AngularJS Select (Auswahlfeld)
AngularJS kann mithilfe eines Arrays oder Objekts eine Dropdown-Liste mit Optionen erstellen.
ng-option-Direktive zum Erstellen einer Dropdown-Liste, die Listenelemente werden in einer Schleife durch Objekte und Arrays ausgegeben
$scope.names = ["Google", "Runoob", "Taobao" ];
Legen Sie den Anfangswert des Dropdown-Felds fest
scope.cars.car02; //设置第2个为初始值；
Nach dem Login kopieren
Dieser Artikel endet hier (wenn Sie mehr sehen möchten, besuchen Sie die chinesische PHP-Website
AngularJS-Benutzerhandbuch
zum Lernen) Wenn Sie Fragen haben, können Sie unten eine Nachricht hinterlassen.
Das obige ist der detaillierte Inhalt vonWie lerne ich AngularJS? Das Angularjs-Lerntutorial verhindert, dass Sie den Überblick verlieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
