Comment l'utiliser dans angulaireJS ?-js tutoriel-php.cn

Cet article présente principalement quelques informations pertinentes sur l'utilisation d'angularJS. Les amis qui en ont besoin peuvent s'y référer

AngularJS

<.>Commande Event :

ng-click/dblclick
ng-mousedown/up
ng-mouseenter/leave
ng-mousemove/over/out
ng-keydown/up/press
ng-focus/blur
ng-submit

Copier après la connexion

Identique à ng-click, elle lie les événements au dom

Il convient de noter que lors de l'utilisation d'événements Object , vous devez transmettre $event en ng-click et d'autres instructions, telles que :

<button ng-click="clickFn($event)" class="btn btn-danger">aa</button>

Copier après la connexion

Commande de formulaire

ng-change

Copier après la connexion

Cela sera utile lorsque la valeur change

Certaines balises avec valeur ne peuvent être utilisées que si elles peuvent être utilisées avec ng-model

Doivent être utilisées avec ng-model

Peut effectuer une vérification des données

ng-disabled 控制元素是否可用
ng-readonly
ng-checked

Copier après la connexion

Contrôler si la case à cocher est cochée

Seul ce réglage ne peut contrôler si elle est sélectionnée via les données

Définissez ng-model et vous pourrez contrôler les données via celui-ci

La différence entre désactivé et lecture seule

Tous les éléments du formulaire peut être passé Définissez l'attribut désactivé ou en lecture seule pour le désactiver. Une fois désactivé, l'utilisateur ne peut pas l'utiliser et le formulaire ne soumettra pas le champ en lecture seule

est uniquement désactivé par l'utilisateur, c'est-à-dire. l'utilisateur ne peut pas fonctionner, mais le formulaire est toujours Soumettra

cas d'achat urgent avec compte à rebours

Le service $interval est équivalent à setInterval, qui peut effectuer automatiquement une inspection des données sales

clear Si tel est le cas, vous devez attribuer une valeur, puis $interval.cancel(timer)

ng-show s'affiche comme vrai. false hide

ng-hide est vrai pour cacher. faux affichage

ng-if est identique à ng-show, sauf que s'il n'est pas affiché, le nœud n'est pas dans le document dom

var app = angular.module("myapp",[])
app.controller("myController",function ($scope,$interval) {
$scope.num=1
$scope.canBuy = false
$scope.time = 5
  var timer = $interval(function () {
   $scope.time--;
   if($scope.time<=0){
    $scope.canBuy=true
    $interval.cancel(timer)     
   }
  },1000)
 })

Copier après la connexion

Lié à ng-bind

Il y a un problème avec ng-bind Après l'avoir ajouté, vous ne pouvez pas ajouter d'autres éléments après la variable data. Cette balise ne peut afficher que cette donnée, mais. pas les autres. Par exemple,

{{name}}---111
用ng-bind-template就好
ng-bind-template="{{name}}---111"

Copier après la connexion

a un autre problème. Il ne peut pas analyser la balise

. Utilisez ng-bind-html

ng-bind-html="<h1>{{name}}---111</h1>"

Copier après la connexion

. Cela ne fonctionnera pas. C'est avant la 1.3 Oui, lors de la refonte majeure après la 1.3, afin de rationaliser angulaire.js, cette chose a été supprimée. Vous avez dû utiliser un plug-in (module)

. et vous deviez mettre "ngSanitize" dans angulaire.module

Ensuite, vous devez accrocher l'étiquette à afficher sur une variable, puis la définir sur ng-bind-html

<. 🎜>Cette commande peut empêcher l'analyse de l'expression

$scope.text= "<h1>"+$scope.name+"---111</h1>"
ng-bind-html=&#39;&#39;text“
ng-non-bindable

Copier après la connexion

<h3 ng-non-bindable>{{name}}</h3>

Copier après la connexion

ng-include peut introduire un extrait de code HTML, qui également nécessite que des variables soient définies et des expressions peuvent également être écrites dans l'extrait de code

Notez que, comme la requête interne est ajax, elle doit être dans un environnement serveur

$scope.text=&#39;html/a.html&#39;;
ng-include=&#39;text&#39;

Copier après la connexion

Pendant le processus d'affichage, les données liées feront toujours fonctionner le nœud en interne, et les performances ne sont pas bonnes. Vous pouvez le faire. Configurez-le pour mettre à jour les données affichées dans la vue à un certain moment

ng-model-options=&#39;{updateOn:&#39;blur&#39;}&#39;

Copier après la connexion

AngularJS

Vous pouvez utiliser la pensée orientée objet Contrôleur d'écriture

ng-controller

Copier après la connexion

Parlons de service Le service a en fait beaucoup dit.

<p ng-controller="myController as myFun"> 
{{name}}<br>
{{myFun.age}}<br>
{{myFun.sex}}
</p>
myapp.controller("myController",["$scope",myFun])
function myFun($scope){
 $scope.name=&#39;allen&#39;;
 this.sex=&#39;male&#39;
}
myFun.prototype.age="18"

Copier après la connexion

Dans angulaireJS, les services sont utilisés pour interagir avec les données via certaines fonctions

Service $http

method représente la méthode de livraison get, post

$http({
 url:"http://datainfo.duapp.com/shopdata/getclass.php",
 method:"get",
 params:{}
}).success(function(data){
 $scope.dataList=data;
}).error(function(error){
 console.log(error)
})

Copier après la connexion

url data interface params Les données soumises sont équivalentes à $.ajax Les données dans : {}

success success callback

error error callback

Ici nous parlerons de la technologie JSONP

JSONP est un moyen courant de résoudre les problèmes inter-domainesProblèmes inter-domaines : étant donné que les navigateurs ont une politique de même origine, des problèmes inter-domaines se produiront lorsque des données sont échangées entre différents domaines

Stratégie originale : l'interaction des données ne peut être effectuée que sous le même protocole, même nom de domaine et même port

Principe de JSONP : des balises de script peuvent être utilisées (des fonctions de rappel seront utilisées pour recevoir data) L'attribut src n'est pas affecté par la politique de même origine et peut demander des données à différents domaines. Vous pouvez recevoir des données en définissant la fonction de rappel

numéro . JSONP est une méthode cross-domain qui combine front-end et back-end : parce que le front-end demande les données et doit les utiliser dans la fonction de rappel, le back-end doit mettre les données revenir dans la fonction de rappel

JSONP appartient-il à AJAX ? Ajax fait référence à la technologie d'interaction de données asynchrone en utilisant l'objet xmlhttprequest. JSONP est obtenu en s'appuyant sur l'attribut scriptsrc. Il n'appartient pas à ajax

Quels sont les inconvénients de JSONP ? à quand l'utiliser ?

ne peut pas publier de traitement inter-domaines. Il convient de noter que les balises de script et les fonctions de rappel doivent être créées dynamiquement pour chaque requête et détruites une fois l'acquisition des données terminée.

Si la méthode est jsonp, vous pouvez utiliser jsonp pour les requêtes inter-domaines, mais veillez à écrire la valeur du rappel après l'url sous la forme JSON_CALLBACK

Recherche Baidu petit exemple La référence ici est angulaire-sanitize.js

var app = angular.module("myapp",[&#39;ngSanitize&#39;])
app.controller("myController",function ($scope,$http) {
  $http({   url:"http://datainfo.duapp.com/shopdata/getclass.php",
   method:"post",
   params:{a:1}
  }).success(function (results) {
   $scope.dataList = results
  }).error(function (error) {
   console.log(error)
  })
 })
 app.controller("yourController",function ($scope,$http) {
  $scope.search = function () {
   $http({    url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
    method:"jsonp",
    params:{
     wd:$scope.wd,
     cb:&#39;JSON_CALLBACK&#39;
    }
   }).success(function (results) {
    $scope.dataList = results.s
   })
  }
 })

Copier après la connexion

$location service

console.log($location.absUrl())//输出绝对地址
console.log($location.host())//输出域名
console.log($location.port())//输出端口
console.log($location.protocol())//协议
$location.path("aaa")//在路由中控制切换页面
console.log($location.path()) // #/aaa

Copier après la connexion

Service $log

Modes de sortie de console multiples

Configuration du fournisseur de services AngularJs

$log.info("info");
$log.warn("warn");
$log.error("error");
$log.log("log");

Copier après la connexion

例如

myapp.config(["$interpolateProvider",function($interpolateProvider){
 $interpolateProvider.startSymbol("!!");
 $interpolateProvider.endSymbol("!!");
}])

Copier après la connexion

angular就不认识{{}}了，开始变成！！！！

自定义服务三种

1.factory

myapp.factory(&#39;serviceName&#39;,function(){
  return ....
})

Copier après la connexion

可以return 字符串、数组、函数、对象（使用最多，最和逻辑）

引入方法和angualr自带的前面加$的服务完全一样，使用方法取决于return出来的是什么东西，自定义服务的服务名还是别加$了

eq:返回一个两个数之间的随机数的服务

myapp.factory("myService",function(){
 return {
  getRandom:function(a,b){
   return Math.random()*(b-a)+a;
  }
 }
})

Copier après la connexion

自定义的服务可以依赖注入其他服务

myapp.factory(&#39;myHttpService&#39;,[&#39;$http&#39;,function($http){
   return {
     $http({
       url:......
     })      
     }
}])

Copier après la connexion

eq:下一个自定义的http服务

myapp.factory("myHttpService",["$http",function($http){
  return {
    http:function(url,sfn,efn){
      $http({
        url:url,
        method:"get"
      }).success(sfn).error(efn)
    }
  }
}])
myHttpService.http("http://datainfo.duapp.com/shopdata/getclass.php",function(data){
  console.log(data)
},function(data){
  console.log(data)
})

Copier après la connexion

2.provider

可以通过去自定义一个服务供应商去定义一个服务，写法有区别，服务功能性的东西需要嵌套一层返回

myapp. provider (&#39;myHttpService&#39;,[&#39;$http&#39;,function($http){
   return {
     $get:function(){
     return:{//这里才是输出
     } 
     }
}])

Copier après la connexion

外面return出来的是这个服务的供应商，供应商的$get方法里返回的才是供我们使用的部分，可以通过更改供应商的部分参数来控制服务的功能，

eq：还是返回一个范围内的随机数，但是通过配置供应商的一个值来控制服务返回的是整数还是小数

myapp.provider("myService",function(){
  return {
    isInt:true,
    $get:function(){
      var that=this;
      return {
        getRandom:function(a,b){
          var num=Math.random()*(b-a+1)+a;
          if(that.isInt){
            return Math.floor(num);
          }else{
            return(num)
          }
        }
      }
    }
  }
})
myapp.config(["myServiceProvider",function(myServiceProvider){
  myServiceProvider.isInt=false;
}])

Copier après la connexion

通过这种方法创建的服务是可以配置供应商的

3.service

通过这种方法创建出来的只能是对象
最简单的创建方式，自带返回，支持面向对象的写法

myapp.service("myService",function(){
    this.getRandom=function(a,b){
      return Math.random()*(b-a)+a;
    }
})

myapp.service("myService",aaa)
function aaa(){
  this.getRandom=function(a,b){
    return Math.random()*(b-a)+a;
  }
}

Copier après la connexion

多个控制器间数据的共享

实现多个控制器数据共享的方法有这样三种，

第一种比较简单，就是把数据放到父作用域上，就都可以访问了

第二种就是在控制器里通过$$prevSibling找到兄弟作用域，然后使用数据，需要注意的是，如果是初始数据类型的话就不能做数据双向绑定了

第三种是定义服务，把需要共享的数据做成服务，这样就都可以用了

<body>

  <p class="container">
    <p ng-controller="firstController">
      <input type="text" class="form-control" ng-model="name">
      <input type="text" class="form-control" ng-model="data.name">
      <input type="text" class="form-control" ng-model="Data.name">
      <p>
        first-name:{{name}}<br>
        first-data-name:{{data.name}}<br>
        first-Data-name:{{Data.name}}
      </p>

    </p>
    <p ng-controller="secondController">
      <p>
        second-name:{{name}}<br>
        second-data-name:{{data.name}}<br>
        second-Data-name:{{Data.name}}
      </p>
    </p>
  </p>
</body>
<script src="../Base/angular.min.js"></script>
<script>
  var app=angular.module("myapp",[]);
  app.factory("Data",function () {
    return {
      name:&#39;lily&#39;
    }
  })
  app.controller("firstController",function ($scope,Data) {
    $scope.name="allen";
    $scope.data={
      name:&#39;tom&#39;
    }
    $scope.Data=Data;
  })
  app.controller("secondController",function ($scope,Data) {
    $scope.name=$scope.$$prevSibling.name;
    $scope.data=$scope.$$prevSibling.data;
    $scope.Data=Data;
  })
</script>

Copier après la connexion

自定义模块

所有的模块都有服务，ng-app这个模块理由￥scope什么的服务，

咱们自己也可以写一个模块，然后里面可以去写服务

这样就可以把某些服务写在某个自定义的模块里，实现重复调用

例如把随机数的例子写在一个自定义的模块里

var myModule=angular.module("myModule",[]);
myModule.service("myService",function(){
  this.ran=function(a,b){
   return Math.random()*(a+b)-a;
  }
})
var myapp=angular.module("myapp",["myModule"]);
myapp.controller("myController",["$scope","$log","myService",function($scope,$log,myService){
 $log.log(myService.ran(5,10))
}])

Copier après la connexion

其实像angualr.sanitize.js就是一个自定义模块

上面是我整理给大家的，希望今后会对大家有帮助。

使用axios如何实现ajax请求（详细教程）

在JavaScript中如何实现弹性效果

使用JavaScript如何实现二叉树遍历

在axios中如何实现cookie跨域

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!