angglarJSのいくつかの使い方について

アングラーJS
イベントコマンド:

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

ng-clickと同じように、domへのバインディングイベントです。
イベントオブジェクトを使用する場合は、ng-clickなどのコマンドでイベントに入る必要があります。

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

フォームコマンド

ng-change

値が変わると役に立ちます。
valueの値のいくつかのラベルがあって、ng-modelのができて、ようやく使うことができますよ。
n-modelを配合して使用しなければなりません。
データの検証ができます。

ng-disabled         
ng-readonly
ng-checked 

チェックボックスが選択されているかどうかをコントロールします。
これだけを設定すると、データだけで選択をコントロールできます。
n-modelを設定するとデータをコントロールできます。
disabledとreadonlyの違い
フォーム要素はdisabledまたはreadonly属性を設定することによって無効にすることができます。disabledが設定された後、ユーザは使用できません。フォームはフィールドを提出しません。readonly
ユーザが無効にしているだけで、つまりユーザは操作できませんが、フォームはまだ提出されます。
カウントダウン買い占め小事例
$intervalサービスはset Intervalに相当します。自動的に汚いデータの検査ができます。
クリアするには値を賦課してから$interval.cancel(timer)が必要です。
ng-showはtrueで表示されます。false隠し
D-hideはtrueに隠れています。false表示
ng-infとng-showは同じですが、表示されない場合は、ノードは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)
 })

n-bind関連
このラベルにはこのデータしか表示されません。他のものはだめです。

{{name}}---111
 ng-bind-template  
ng-bind-template="{{name}}---111"

また問題があって、ラベルを解析できません。
大丈夫です。ng-bindを使います。

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

これはいけません。これは1.3前のものです。1.3から大きく血が変わった時に、簡単なanglar.jsのために、このおもちゃを外に持ち出しました。プラグインを使わなければなりません。
アングラー.moduleに「ngSanitize」を入れなければなりません。
表示するラベルを変数にかけて、ng-bind-htmlに設定します。

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

このコマンドは表現を解析しないようにすることができます。

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

ng-innclude
htmlコードのセグメントを紹介することができます。変数を定義する必要があります。コードの断片にも式などを書くことができます。

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

内部はajaxでお願いしていますので、サーバー環境下でお願いします。

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

バインディングデータは表示中に常にノードを操作しています。性能が良くないので、ある時点でビュー表示のデータを更新してもいいです。
アングラーJS

ng-controller

対象に向かう思惟でcontrollerを書くことができます。

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

サービスというと、サービスはもうたくさん話しました。
angglarJSでは、サービスはいくつかの機能を通じて使用されます。
$httpサービス
データのインタラクションができます。

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

method代表伝達方法get、post
urlデータインターフェース
パラmsで提出したデータは$ajaxのdata:{}に相当します。
successが成功しました
errorエラーコール
ここでJSONPの技術を言います。
JSONPはドメイン横断問題を解決するための一般的な方法です。
ドメインをまたぐ問題：ブラウザにはソースポリシーがあるので、ドメイン間でデータのインタラクションを行うとドメインをまたぐ問題が発生します。
同ソース戦略：同じプロトコルでドメイン名とポートの場合のみデータのインタラクションができます。
JSONPの原理：scriptタグ（コールバック関数を使用してデータを受信することができます）を利用することができるsrc属性は、ソースポリシーの影響を受けず、異なるドメインのデータを要求することができます。
数を数えてデータを受信します
JSONPは前後に結合されたクロスドメイン方式です。データを要求すると、バックエンドがコールバック関数で使用されるので、バックエンドはデータをコールバック関数に戻す必要があります。
JSONPはAJAXですか？ajaxとは、xmlhttprequestオブジェクトを使用して非同期データをインタラクションする技術であり、jsopはscriptsrc属性によって取得されるもので、ajaxには該当しない。
JSONPにはどんな欠点がありますか？使う時は何に注意しなければなりませんか？
postドメインをまたぐ処理ができません。注意したいのは、毎回動的にscriptタグとコールバック関数を作成してください。データが取得されたら廃棄されます。
もしmethodがjsonpなら、jsopでドメインを越えて請求することができますが、urlの後にcalbackの値について書くのはJSON_です。CALLBACK
Baiduの検索の例
ここで引用されているのはアングラーサンテット.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.info("info");
$log.warn("warn");
$log.error("error");
$log.log("log");

anglarJsはサービスプロバイダに対して配置します。
例えば

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

angglarは知らない{}、変わり始めました！！！！
カスタムサービス3つ
1.factory

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

return文字列、配列、関数、オブジェクト（最も多く、最も論理的に使用できます）
導入方法はanggurが持っているフロントプラス$のサービスと全く同じです。利用方法は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.プロバイダー
サービスプロバイダーをカスタマイズすることで、サービスを定義することができます。書き方に違いがあります。サービス機能性のものは入れ子にして戻る必要があります。

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

複数のコントローラ間データの共有
複数のコントローラのデータ共有を実現する方法には、この3つがあります。
最初のほうが簡単です。データを父親の役割の領域に置いて、全部訪問できます。
二つ目はコントローラの中で$prevSiblingを通して兄弟の役割領域を見つけてデータを使うことです。最初のデータの種類であれば、データを双方向に結合することはできません。
三つ目はサービスを定義して、共有したいデータをサービスにします。これで全部使えます。

<body>

  <div class="container">
    <div 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>

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

カスタムモジュール
すべてのモジュールにサービスがあります。このモジュールの理由￥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))
}])

実はangguralr.sanityze.jsのようなカスタムモジュールです。
締め括りをつける
上记は小编で绍介したangglarJSのいくつかの使い方です。皆さんに助けてほしいです。もし何か疑问があれば、メッセージをください。小编はすぐに皆さんに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。