Wie verwende ich es in AngularJS?

In diesem Artikel werden hauptsächlich einige relevante Informationen zur Verwendung von AngularJS vorgestellt. Freunde, die es benötigen, können darauf verweisen

AngularJS

Ereignisbefehl:

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

Wie ng-click, beide binden Ereignisse an den Dom

Es ist zu beachten, dass das Ereignisobjekt manchmal verwendet wird , Sie müssen $event in Anweisungen wie ng-click übergeben, z. B.:

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

Formularbefehl

ng-change

Wenn der Wert Änderungen Es ist nützlich, wenn

Es gibt einige Tags mit Wert, die mit ng-model verwendet werden können

Muss mit ng-model verwendet werden

Kann Datenüberprüfung durchführen

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

Kontrollieren Sie, ob das Kontrollkästchen aktiviert ist

Nur ​​durch die Einstellung kann nur gesteuert werden, ob es über Daten ausgewählt wird

Festlegen – Das Modell kann Daten darüber steuern

Der Unterschied zwischen deaktiviert und schreibgeschützt

Formularelemente können durch Festlegen der Option „deaktiviert“ oder „deaktiviert“ deaktiviert werden schreibgeschützte Attribute: Nach dem Festlegen von „disabled“ kann der Benutzer es nicht verwenden und das Formular sendet das schreibgeschützte Feld nicht.

wird vom Benutzer nur deaktiviert, d. h. der Benutzer kann es nicht bedienen, das Formular jedoch noch eingereicht werden

Kleiner Fall eines Countdown-Rush-Kaufs

Der $interval-Dienst entspricht setInterval, das schmutzige Daten automatisch überprüfen kann

Um es zu löschen, müssen Sie einen Wert zuweisen und dann wird $interval.cancel (Timer)

ng-show als wahr angezeigt. false hide

ng-hide ist wahr, um sich zu verstecken. falsche Anzeige

ng-if ist dasselbe wie ng-show, außer dass, wenn es nicht angezeigt wird, der Knoten nicht im Dom-Dokument ist

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

Es gibt ein Problem mit ng-bind. Nach dem Hinzufügen können Sie keine anderen Dinge nach der Datenvariablen hinzufügen. Dieses Tag kann nur dieses Datenelement anzeigen, andere jedoch nicht . Zum Beispiel:

rrree

Das Tag

kann nicht geparst werden. Es ist in Ordnung Funktioniert nicht. Das wird sich nach 1.3 ändern. Um angle.js zu optimieren, mussten wir ein Plug-in (Modul) verwenden Wir mussten „ngSanitize“

in angle.module einfügen. Dann müssen Sie die anzuzeigende Beschriftung an eine Variable hängen und sie dann auf ng-bind-html

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

setzen. Diese Anweisung kann dazu führen, dass der Ausdruck nicht analysiert wird

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

ng -include

kann einen HTML-Codeausschnitt einführen, für den auch Variablen definiert werden müssen . Ausdrücke können auch in das Code-Snippet geschrieben werden

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

Hinweis, da es sich tatsächlich um Ajax handelt, muss es sich also in einer Serverumgebung befinden

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

Die gebundenen Daten funktionieren weiterhin intern und die Leistung ist nicht gut. Sie können es so konfigurieren und die in der Ansicht angezeigten Daten zu einem bestimmten Zeitpunkt aktualisieren

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

Sie können objektorientiertes Denken verwenden, um Controller zu schreiben

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

Lassen Sie uns über Dienste sprechen, es wurde eigentlich schon viel gesagt. In angleJS werden Dienste verwendet, um über bestimmte Funktionen mit Daten zu interagieren

$http-Dienst

ng-controller

Methode stellt die Liefermethode Get, Post darURL-Datenschnittstelle

params Die übermittelten Daten entsprechen $.ajax-Daten: {}

Erfolg Erfolg RückrufFehler Fehler RückrufHier werden wir über die JSONP-Technologie sprechen

JSONP ist ein Cross- Grenzlösung Eine häufige Art von Domänenproblemen

Domänenübergreifende Probleme: Da Browser eine Same-Origin-Richtlinie haben, treten domänenübergreifende Probleme auf, wenn Daten zwischen verschiedenen Domänen ausgetauscht werden

Origin-Richtlinie: Dateninteraktion kann nur unter demselben Protokoll, demselben Domänennamen und demselben Port erfolgen. Prinzip von JSONP: Sie können das src-Attribut des Skript-Tags verwenden (das eine Rückruffunktion verwendet). um Daten zu empfangen) Nicht von der gleichen Ursprungsrichtlinie betroffen, können Sie Daten von verschiedenen Domänen anfordern und Daten empfangen, indem Sie die Rückruffunktion

Nummer

< festlegen 🎜>JSONP ist eine domänenübergreifende Methode zur Kombination von Front-End und Back-End: Da das Front-End Daten anfordert und diese in der Callback-Funktion verwenden muss, muss das Back-End die Daten wieder in die Callback-Funktion einfügen

Gehört JSONP zu AJAX? Ajax bezieht sich auf die Technologie der asynchronen Dateninteraktion, die über das Attribut „scriptsrc“ abgerufen wird.

Was sind die Nachteile von JSONP? zu, wenn man es benutzt? kann keine domänenübergreifende Verarbeitung veröffentlichen. Es ist zu beachten, dass Skript-Tags und Rückruffunktionen für jede Anfrage dynamisch erstellt und nach Abschluss der Datenerfassung gelöscht werden sollten.

Wenn die Methode JSONP ist, können Sie JSONP für domänenübergreifende Anforderungen verwenden. Achten Sie jedoch darauf, den Rückrufwert nach der URL als JSON_CALLBACK zu schreiben.

Baidu-Suche klein Beispiel

Die Referenz hier ist angle-sanitize.js

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

$location service

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

$log Service

Mehrere Konsolenausgabemodi

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

angularJs für die Dienstanbieterkonfiguration

例如

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就是一个自定义模块

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

相关文章：

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

在JavaScript中如何实现弹性效果

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

在axios中如何实现cookie跨域

Das obige ist der detaillierte Inhalt vonWie verwende ich es in AngularJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!