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 AngularJS
$rootScope : 根作用域,所有 controller 都可以调用，类似于项目级别的全局变量
js赋值 : $rootScope.lastname = "Refsnes";
html调用 : $root.lastname
Copier après la connexion
Portée AngularJS
$rootScope
之间无法互相访问
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上
Copier après la connexion
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
Copier après la connexion
Contrôleur AngularJS
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";
});Copier après la connexion
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:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li></ul>Copier après la connexion
Filtre l'entrée
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('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.msg = "Runoob";
});
app.filter('reverse', function() { //可以注入依赖
return function(text) {
return text.split("").reverse().join("");
}
});</script> </body></html>Copier après la connexion
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('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>Copier après la connexion
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: '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);Copier après la connexion
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个为初始值；
Copier après la connexion
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
