Maison >interface Web >js tutoriel >Comment apprendre AngularJS ? Le didacticiel d'apprentissage Angularjs vous évite de vous perdre

Comment apprendre AngularJS ? Le didacticiel d'apprentissage Angularjs vous évite de vous perdre

寻∝梦original: 2018-09-08 11:36:001215parcourir

Cet article parle principalement de l'introduction de la syntaxe de angularjs, ainsi que de l'explication de la portée d'angularjs et de l'explication du contrôleur et du service angulairejs. Ensuite, jetons un coup d'œil à cet article Barre d'articles.

Enregistrer la syntaxe Angularjs inconnue

Filtre
Filtre personnalisé
Filtre personnalisé
Service AngularJS
AngularJS XMLHttpRequest
AngularJS Select (case de sélection)
$emplacement
$service http
$service d'expiration
Créer un service personnalisé
Portée AngularJS
Contrôleur AngularJS

Filtre AngularJS

$rootScope : 根作用域,所有 controller 都可以调用，类似于项目级别的全局变量
js赋值 : $rootScope.lastname = "Refsnes";
html调用 : $root.lastname

Portée AngularJS

$rootScope

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

Portée $scope

 控制 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

Contrôleur AngularJS

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";
});

Contrôleurs de contrôleurs multiples

Filtres AngularJS

Filtres

Des filtres peuvent être ajoutés aux expressions et directives à l’aide d’un caractère barre verticale (|).

Les filtres AngularJS peuvent être utilisés pour transformer les données

Les nombres au format de devise au format monétaire

filtre Sélectionnez un sous-ensemble parmi les éléments du tableau.

minuscules Formate les chaînes en minuscules.

orderBy Organise le tableau selon une expression

majuscule Formate la chaîne en majuscule

<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>

Filtre l'entrée

Le filtre d'entrée peut recevoir un caractère barre verticale ( |) et un filtre ajouté à la directive suivi de deux points et d'un nom de modèle.

Filtre personnalisé

<!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>

L'exemple suivant personnalise un filtre inversé pour inverser la chaîne

conversion majuscules, minuscules (si vous voulez en savoir plus, rendez-vous sur le site PHP chinois Manuel de développement AngularJS pour apprendre)

Service AngularJS (Service)

Dans AngularJS, vous pouvez créer vos propres services ou utiliser des services intégrés.

Dans AngularJS, un service est une fonction ou un objet qui peut être utilisé dans votre application AngularJS. $location

location.absUrl(); l'adresse URL actuelle de la page

service $http

$http est le service le plus couramment utilisé dans les applications AngularJS. Le service envoie une requête au serveur et l'application répond aux données envoyées par le serveur. $timeout service

le service d'intervalle correspond à la fonction JS window.setInterval.

l'intervalle peut être utilisé pour définir un service de retard qui s'exécute toujours.

Créer un service personnalisé

<!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>

Pour utiliser un service personnalisé, vous devez l'ajouter indépendamment lors de la définition du contrôleur et définir les dépendances :

Après avoir créé un service personnalisé et l'avoir connecté à votre application, vous pouvez l'utiliser dans des contrôleurs, des directives, des filtres ou d'autres services.

AngularJS XMLHttpRequest

http.get

-http. poster

-http.delete

-http.patch

// 简单的 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);

Demande d'obtention/publication simple

AngularJS Select (case de sélection)

AngularJS peut créer une liste déroulante d'options à l'aide d'un tableau ou d'un objet. Directive ng-option pour créer une liste déroulante, les éléments de la liste sont affichés en boucle à travers des objets et des tableaux
$scope.names = ["Google", "Runoob", "Taobao" ];

scope.cars.car02;  //设置第2个为初始值；

Définissez la valeur initiale de la liste déroulante

Cet article se termine ici (si vous voulez en voir plus, rendez-vous sur PHP Chinese site Web Manuel d'utilisation AngularJS Étude), si vous avez des questions, vous pouvez laisser un message ci-dessous.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Pourquoi utiliser angulaire4 ? La différence entre angulairejs et angulaire4Article suivant：Pourquoi utiliser angulaire4 ? La différence entre angulairejs et angulaire4

Articles Liés

Voir plus