Einige Verwendungen von AngularJS

AngularJS ist ein hervorragendes Front-End-JS-Framework, das in vielen Google-Produkten verwendet wird. AngularJS verfügt über viele Funktionen, die wichtigsten davon sind: MVC, Modularisierung, automatisierte bidirektionale Datenbindung, semantische Tags, Abhängigkeitsinjektion usw. In diesem Artikel werden hauptsächlich einige relevante Informationen zur Verwendung von AngularJS vorgestellt. Freunde, die sie benötigen, können darauf zurückgreifen.

AngularJS

Ereignisanweisung:

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

Ereignisse sind wie ng-click an den Dom gebunden

Es ist zu beachten, dass Sie bei Verwendung des Ereignisobjekts es zu ng- hinzufügen müssen. Klicken Sie auf Warten, bis $event an den Befehl übergeben wird, z. B.:

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

Befehl bilden

ng-change

Es ist nützlich, wenn sich der Wert ändert

Einige Tags mit Wert können nur verwendet werden, wenn sie ng-modellieren 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 ausgewählt ist

Nur ​​wenn Sie dies festlegen, können Sie nur steuern, ob es über Daten ausgewählt wird

Setzen Sie ng-model und Sie ein kann es verwenden Steuerdaten

Der Unterschied zwischen deaktiviert und schreibgeschützt

Formularelemente können durch Festlegen der Attribute „disabled“ oder „readonly“ deaktiviert werden , und die deaktivierte Einstellung Danach kann der Benutzer es nicht verwenden und das Formular sendet das Feld nicht schreibgeschützt.

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

Kleiner Fall eines Countdown-Rush-Kaufs

Der $interval-Dienst entspricht setInterval, das automatisch eine Überprüfung fehlerhafter Daten durchführen kann

Wenn es gelöscht ist, muss ihm ein Wert zugewiesen werden 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 sich der Knoten nicht im Dom-Dokument befindet, wenn es nicht angezeigt wird

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

ng-bind hat ein Problem. Nach dem Hinzufügen können Sie nach der Datenvariablen In nichts mehr hinzufügen dieses Tag Nur dieses Datenelement kann angezeigt werden, andere Daten funktionieren nicht. Beispiel:

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

Es gibt ein anderes Problem, das Tag kann nicht angezeigt werden analysiert werden.

Es ist nicht möglich, ng-bind-html zu verwenden

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

. Während der umfassenden Überarbeitung nach 1.3 müssen Sie zur Optimierung von Angular js ein Plug-in (Modul)

verwenden und „ngSanitize“

in angle.module und dann müssen Sie es anzeigen. Die Beschriftung wird an eine Variable gehängt und dann auf ng-bind-html

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

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

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

ng-include kann einen HTML-Codeausschnitt einführen und erfordert auch die Definition von Variablen. Sie können auch Ausdrücke in Codeausschnitte schreiben

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

Beachten Sie das, weil Die interne Anfrage ist Ajax, sie muss in einer Serverumgebung erfolgen

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

Während des Anzeigevorgangs gebundener Daten werden Knoten intern bedient und die Die Leistung ist nicht gut. Sie können es so konfigurieren, dass die in der Ansicht angezeigten Daten zu einem bestimmten Zeitpunkt aktualisiert werden >

Sie können objektorientiert denken, Controller zu schreiben

ng-controller

Reden wir über den Service, das hat eigentlich viel gesagt.

In AngularJS werden Dienste verwendet, um Daten über bestimmte Funktionen zu verarbeiten

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

$http-Dienst

Interaktion

Methode stellt die Liefermethode Get, Post dar

URL-Datenschnittstelle

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

Die von params übermittelten Daten entsprechen den Daten in $.ajax: {}

Erfolg Erfolg Rückruf

Fehler Fehler RückrufHier werden wir reden über JSONP-Technologie

JSONP ist eine gängige Methode zur Lösung domänenübergreifender Probleme

Domänenübergreifendes Problem: Weil der Browser denselben Ursprung hat Richtlinie, wenn domänenübergreifende Probleme auftreten, wenn Daten zwischen verschiedenen Domänen ausgetauscht werden

Ursprungsrichtlinie: Der Datenaustausch 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 zum Empfangen von Daten verwendet), das nicht von der Same-Origin-Richtlinie betroffen ist. Sie können Daten von verschiedenen Domänen anfordern, indem Sie die Rückruffunktion festlegen Um Daten zu empfangen

JSONP ist eine domänenübergreifende Methode, die Front-End und Back-End kombiniert: weil das Front-End die Daten anfordert und Muss es in der Callback-Funktion verwendet werden, muss das Back-End die Daten wieder in die Callback-Funktion einfügen

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增删改查的方法

Das obige ist der detaillierte Inhalt vonEinige Verwendungen von AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!