Quelques utilisations d'angularJS

AngularJS est un excellent framework JS frontal qui a été utilisé dans de nombreux produits Google. AngularJS possède de nombreuses fonctionnalités, dont les plus essentielles sont : MVC, modularisation, liaison de données bidirectionnelle automatisée, balises sémantiques, injection de dépendances, etc. Cet article présente principalement des informations pertinentes sur l'utilisation d'angularJS. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

AngularJS

Directive d'événement :

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

Comme ng-click, les événements sont liés au dom

Il convient de noter que lors de l'utilisation de l'objet événement, vous devez l'ajouter à ng- cliquez sur Attendre que $event soit transmis à la commande, par exemple :

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

Commande de formulaire

ng-change

Cela sera utile lorsque la valeur change

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

Doit être utilisé avec ng-model

Peut effectuer la vérification des données

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

Contrôlez si la case à cocher est sélectionné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 peut l'utiliser Données de contrôle

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

Les éléments du formulaire peuvent être désactivés en définissant les attributs désactivés ou en lecture seule , et le paramètre désactivé Après cela, l'utilisateur ne peut pas l'utiliser et le formulaire ne soumettra pas le champ en lecture seule

n'est désactivé que par l'utilisateur, c'est-à-dire que l'utilisateur ne peut pas l'utiliser, mais le formulaire le fera. toujours être soumis

Petit cas d'achat précipité avec compte à rebours

Le service $interval est équivalent à setInterval, qui peut vérifier automatiquement les données sales

S'il est effacé, il faut lui 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)
 })

ng-bind

ng-bind a un problème Après l'avoir ajouté, vous ne pouvez rien ajouter d'autre après la variable de données In. cette balise Seule cette donnée peut être affichée, et les autres données ne fonctionneront pas. Par exemple,

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

Il y a un autre problème, la balise ne peut pas. être analysé.

C'est bon. Il n'est pas possible d'utiliser ng-bind-html

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

. Lors de la refonte majeure après la 1.3, afin de rationaliser angulaire. js, pour sortir ce truc, vous devez utiliser un plug-in (module)

et vous devez mettre "ngSanitize"

dans angulaire.module et vous devez ensuite l'afficher. L'étiquette est accrochée à une variable, puis définie sur ng-bind-html

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

Cette directive peut rendre l'expression non analysée

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

ng-include

peut introduire un extrait de code html et nécessite également que des variables soient définies. Vous pouvez également écrire des expressions, etc. dans les extraits de code

$scope.text='html/a.html';
ng-include='text'

Notez que comme il s'agit en fait d'une requête ajax en interne, elle doit être dans un environnement serveur

ng-model-options='{updateOn:'blur'}'

Pendant le processus d'affichage des données liées, les nœuds sera exploité en interne et les performances ne sont pas bonnes. Vous pouvez le configurer comme ceci pour mettre à jour les données affichées dans la vue à un certain moment. Juste ok

AngularJS

ng-controller

Vous pouvez utiliser un contrôleur orienté objet Pensez à écrire

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

Parlons de service. Le service en a effectivement dit beaucoup.

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

Service $http Interaction

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

la méthode représente le mode de livraison get, post

interface de données URL Le les données soumises par params sont équivalentes aux données dans $.ajax : {}

rappel de succès

rappel d'erreur d'erreur

Ici, nous allons parler à propos de la technologie JSONP

JSONP est un moyen courant de résoudre les problèmes inter-domainesProblème inter-domaines : car le navigateur a la même origine politique, lorsque des problèmes inter-domaines surviendront lorsque les données sont échangées entre différents domaines

Politique d'origine d'origine : l'échange de données ne peut avoir lieu que sous le même protocole, nom de domaine et port

Principe de JSONP : Vous pouvez utiliser l'attribut src de la balise script (qui utilisera la fonction de rappel pour recevoir des données) pour ne pas être affecté par la politique de même origine. Vous pouvez demander des données à différents domaines en définissant la fonction de rappel

Pour recevoir des données

JSONP est une manière inter-domaines de combiner front-end et back-end : parce que le front-end demande les données et doit utilisez-le dans la fonction de rappel, le back-end doit remettre les données dans la fonction de rappel .

JSONP属于AJAX吗？ajax是指通过使用xmlhttprequest对象进行异步数据交互的技术，jsonp是依靠scriptsrc属性来获取的，不属于ajax

JSONP有什么缺点，使用的时候需要注意什么？

不能post跨域处理，需要注意的是：每次请求应该动态的创建script标签和回调函数，数据获取完成后销毁。

如果method是jsonp的话，就可以用jsonp去跨域请求，但是注意要在url后写关于callback的值为JSON_CALLBACK

百度搜索小例子

这里引用的是 angular-sanitize.js

var app = angular.module("myapp",['ngSanitize'])
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:'JSON_CALLBACK'
    }
   }).success(function (results) {
    $scope.dataList = results.s
   })
  }
 })

$location服务

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

$log 服务

多种控制台输出模式

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

angularJs对服务供应商配置

例如

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

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

自定义服务 三种

1.factory

myapp.factory('serviceName',function(){
  return ....
})

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

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

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

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

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

myapp.factory('myHttpService',['$http',function($http){
   return {
     $http({
       url:......
     })      
     }
}])

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

2.provider

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

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

外面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;
}])

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

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

多个控制器间数据的共享

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

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

第二种就是在控制器里通过$$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>

自定义模块

所有的模块都有服务，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))
}])

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

相关推荐：

如何用AngularJS编程思想

AngularJs表单验证的方法

AngularJs增删改查的方法

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!