suchen

Heim >Web-Frontend >js-Tutorial >Wie lerne ich AngularJS? Das Angularjs-Lerntutorial verhindert, dass Sie den Überblick verlieren

Wie lerne ich AngularJS? Das Angularjs-Lerntutorial verhindert, dass Sie den Überblick verlieren

寻∝梦
寻∝梦Original
2018-09-08 11:36:001213Durchsuche

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

$scope Scope

之间无法互相访问
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上

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

Mehrere Controller-Controller

var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl1&#39;, function($scope) {
    $scope.firstName = "Johns";    $scope.lastName = "Doef";
});
    app.controller(&#39;myCtrl2&#39;, function($scope) {
    $scope.firstName = "Tom";    $scope.lastName = "kkk";
});

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:&#39;country&#39;">
    {{ (x.name | uppercase) + &#39;, &#39; + x.country }}
  </li></ul>

Benutzerdefinierter Filter

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(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
    $scope.msg = "Runoob";
});
app.filter(&#39;reverse&#39;, function() { //可以注入依赖
    return function(text) {
        return text.split("").reverse().join("");
    } 
});</script>  </body></html>

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(&#39;myApp&#39;, []);

app.service(&#39;hexafy&#39;, function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.controller(&#39;myCtrl&#39;, function($scope, hexafy) {
  $scope.hex = hexafy.myFunc(255);
});</script></body></html>

AngularJS XMLHttpRequest


http.get -http.delete -http.patch

Einfache Get/Post-Anfrage


// 简单的 GET 请求，可以改为 POST$http({
    method: &#39;GET&#39;,
    url: &#39;/someUrl&#39;}).then(function successCallback(response) {
        // 请求成功执行代码
    }, function errorCallback(response) {
        // 请求失败执行代码});$http.get(&#39;/someUrl&#39;, config).then(successCallback, errorCallback);$http.post(&#39;/someUrl&#39;, data, config).then(successCallback, errorCallback);

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个为初始值；

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Warum Angular4 verwenden? Der Unterschied zwischen AngularJS und Angular4Nächster Artikel：Warum Angular4 verwenden? Der Unterschied zwischen AngularJS und Angular4

In Verbindung stehende Artikel

Mehr sehen