Angularベース(1.2-2.0バージョン)

22556 ワード

アングラー

チュートリアルの推奨場所:http://www.angularjs.net.cn/tutorial/
私は「angular権威教程」とangularマニュアルを結合する傾向がある.
デバッグツールの推奨事項:ng-inspector
1、データバインド
Angularデータバインドの2つの方法:(1)ng-bind命令(2)差分式(3)ng-model双方向データバインド
ng-bindと差分式は簡単なjs式を書くことができ、ng-modelは変数名をバインドするしかありません.
ng-bindとng-cloakは点滅の問題を回避できます(補間式はロードしたばかりのときにページに表示されます)




  
      
  


  
  
    
    
      ：xxx
      ：{{name}}

2、データ




  
      
  


  
    
      
      
      {{index}}-{{item}}
    
    
      
      
      
      

      
        
        {{key}}-{{value}}
      
  

  
      function check0(){
        alert("1==1："+(1==1)); //true
      }
      function check1(){
        alert("'a'=='a'："+('a'=='a')); //true
      }
      function check2(){
        alert("[1,2,3]==[1,2,3]："+([1,2,3]==[1,2,3])); //false
      }

      function check3(){
        alert('{"name":"ion","age":22}=={"name":"ion","age":22}：'+({"name":"ion","age":22}=={"name":"ion","age":22}));  //false
      }

3、ng環境とjs環境
(1)ng環境とjs環境が互いに通じない




  
  ng   js     
  


    
    
    
      function showmsg() {
        console.log(a);  //Uncaught ReferenceError: a is not defined
      }

(2)ngイベント(jsに似た使い方)

ng-click

ng-dbl-click

ng-mousedown

ng-mouseenter

ng-mouseleave

ng-mousemove

ng-keydown

ng-keyup

ng-keypress

ng-change




  
  ng  
  


    
    //ng     ng     
    
    
      What you input is： {{json.name}}

(3)モジュールとcontroller$scopeのドメイン(ng とjs をする)





  
  angular  
  
  
    //1.1    ：module           ，                ，    
    let mod = angular.module('test',[]);
    //2.1 controller，          controller
    mod.controller('ctrl1',function($scope){
      //    ng      ，     parseInt js      
      $scope.parseInt = function (str){
        return parseInt(str);
      }

    });
  



    
    
    
    {{parseInt(a)+parseInt(b)}}

4、内蔵フィルタとカスタムフィルタ




  
       



      
        
            ：    

            ： 

            ：{{(price*quantity) | currency}}
        
        
                

          
          
            
            
              {{item}}
            
          
        
        
                stringMerge

          
              ：{{ msg | stringMerge:'are':'god' }}
        
      
      
      
      
        var app = angular.module('myApp', []);
        app.controller('myController', ['$scope','$filter',function($scope,$filter) {
          $scope.price = 9.99;
          $scope.quantity = 2;

          $scope.items=['  ','  ','  ','  '];

          // JavaScript       $filter      
          $scope.msg=$filter('lowercase')('ION');
          
        }]);
        
        app.filter('stringMerge', function() { //      
            return function(text,text1,text2) {
              return text+" "+text1+" "+text2;
            }
        });

カスタムフィルタは、文字が含まれているかどうかを判断します.




    
    Document
    


    
        {{'ion' | isInclude:name}}
    


    //      【name】-Controller     【name】-Ctrl       
    angular.module('myApp',[]).controller('myController',function ($scope) {
        $scope.name = 'ion luo';
        $scope.surname = 'luo';
    }).filter('isInclude',function () {
        return function (txt1,txt2) {
            if(txt2.indexOf(txt1)>-1){
                return true;
            }
            else{
                return false;
            }
        }
    });

5、組み込みサービスとカスタムサービス
一般的なangular内蔵サービスは、$location、$http、$timeout()および$interval()です.
サービスはangularアプリケーションのいくつかの関数(後2つ)またはオブジェクト(前2つ)であると考えられる.




  
      
  


  
    $location           URL  ：

    {{myUrl}}
  
  
    $http   AngularJS          。          ，              。

         ：{{myDate}}
  
  
    $timeout       JS window.setTimeout   。

    $interval       JS window.setInterval   。

     angular       angular      js       ，  angular        
        ，     $timeout    ，5s   "   "。
  


  
    var app = angular.module('myApp',[]);
    app.controller('myController',['$scope','$location','$http','$timeout',function($scope,$location,$http,$timeout){
      // $location           URL   
      $scope.myUrl = $location.absUrl();

      // $http   AngularJS          。          ，              。
      $http.get('welcome.php').then(function(response){
        $scope.myDate = response.date;
      },function(){
        $scope.myDate = "      ！";
      });

      // $timeout       JS window.setTimeout   。
      //$interval       JS window.setInterval   。
      $timeout(function(){
        alert("   ！");
      },5000);
    }]);

カスタムオブジェクトサービス




  
       
  


  
         ：               

    
    

    {{ decimalism }}      ：{{ hex }}
  


  
    var app = angular.module('myApp',[]);
    //       
    app.service('hexafy',function(){
      this.myFun = function(param){
        return param.toString(16);
      }
    });

    app.controller('myController',function($scope,hexafy){
      $scope.decimalism = 50;
      $scope.hex = hexafy.myFun($scope.decimalism);
    });

6、$httpサービス
getとpostリクエストの略記フォーマット:

$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);

7、依存注入
AngularJSは良好な依存注入機構を提供する.次の5つのコアコンポーネントを依存注入として使用します.

(1)value

Valueは、コントローラに値を渡す簡単なjavascriptオブジェクトです(構成フェーズ):




  
      
  


  
    {{ number }}
  



  var app = angular.module('myApp',[]);
      value    "defaultValue"      
  app.value('defaultValue',5);
  //  defaultValue      
  app.controller('myController',function($scope,defaultValue){
    $scope.number = defaultValue;
  });

(2)service




  
      
  


  
    {{ number }}
  



  var app = angular.module('myApp',[]);
  //    'calcService'，        square         
  app.service('calcService',function(){
    this.square = function(a){
      return a*a;
    }
  });
  //        
  app.controller('myController',function($scope,calcService){
    $scope.number = calcService.square(5);
  });

(3)factory

factoryは、値を返す関数です.サービスとコントロールが必要な場合に作成します.すなわち、サービスまたはコントローラに導入することができる.通常factory関数を使用して値を計算または返します.




  
      
  


  
    {{ number }}
  



  var app = angular.module('myApp',[]);
  //     factory 'MathService'           
  app.factory('MathService',function(){
    var factory = {};

    factory.multiply = function(a,b){
      return a*b;
    }

    return factory;
  });
  // service   factory，  controller     
  app.service('calcService',function(MathService){
    this.multi = function(a,b){
      return MathService.multiply(a,b);
    }
  });
  //         
  app.controller('myController',function($scope,calcService){
    $scope.number = calcService.multi(5,6);
  });

(4)constant

constant(定数)は、構成フェーズで数値を渡すために使用されます.この定数は、構成フェーズでは使用できないことに注意してください.




  
      
  


  
    {{ number }}
  



  var app = angular.module('myApp',[]);
  //      
  app.constant('constValue','5');
  //        
  app.controller('myController',function($scope,constValue){
    $scope.number = constValue;
  });

(5)provider

AngularJSではproviderでサービス、factoryなどを作成します(構成フェーズ).Providerでは、value/service/factoryを返すfactoryメソッドget()が提供されています.




  
      
  


  
    {{ number }}
  



  var app = angular.module('myApp',[]);
  //   service/factory
  app.config(function($provide) {
   $provide.provider('MathService', function() {
      this.$get = function() {
         var factory = {};  
         
         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
      };
    });
  });
  // MathService     
  app.controller('myController',function($scope,MathService){
    $scope.number = MathService.multiply(5,6);
  });

8、ルート





AngularJS      -     




 
    AngularJS     
    
          
          
           
          
    
     
    
    
        angular.module('routingDemoApp',['ngRoute'])
        .config(function($routeProvider){
            $routeProvider
            .when('/',{template:'      '})
            .when('/computers',{template:'        '})
            .when('/printers',{template:'       '})
            .otherwise({redirectTo:'/'});
        });

ルーティング設定時にオブジェクトを設定するには、次の手順に従います.
AngularJSルーティングも異なるテンプレートで実現できる.
$routeProvider.when関数の最初のパラメータはURLまたはURL正規規則であり、2番目のパラメータはルーティング構成オブジェクトである.
ルーティング構成オブジェクトの構文規則は次のとおりです.

$routeProvider.when(url, {
    template: string,
    templateUrl: string,
    controller: string, function   array,
    controllerAs: string,
    redirectTo: string, function,
    resolve: object
});

パラメータの説明:

template:ng-viewに簡単なHTMLコンテンツを挿入する必要がある場合は、このパラメータを使用します:

.when('/computers',{template:'        '})

templateUrl:ng-viewにHTMLテンプレートファイルを挿入する必要がある場合、このパラメータ:

$routeProvider.when('/computers', {
    templateUrl: 'views/computers.html',
});

以上のコードを使用すると、サービス側からviews/computersが取得されます.htmlファイルの内容をng-viewに挿入します.

controller:function、stringまたは配列タイプ、現在のテンプレートで実行されているcontroller関数は、新しいscopeを生成します.

controller As:stringタイプ、controllerの別名を指定します.

redirectTo:リダイレクトされたアドレス.

resolve:現在のコントローラに依存する他のモジュールを指定します.

9、コンポーネント通信
(1)公共サービスによる




    
    Document


    
    



    var app = angular.module('myApp',[]);
    //      
    app.service('shareService',function () {
        this.names = [];
        this.addName = function(name){
            this.names.push(name);
        }
    });
    //    1，                names  
    app.directive('directive1',function(shareService){
        return {
            restrict:"E",
            template:"name: <input type='text' ng-model='new_name'/><br/><button ng-click='addName()'>Add</button>",
            link:function (scope,element,attrs) {
                scope.addName = function () {
                    if(scope.new_name){
                        shareService.addName(scope.new_name);
                    }
                }
            }
        }
    });
    //    2，               names 
    app.directive('directive2',function (shareService) {
        return {
            restrict:"E",
            template:"<ul><li ng-repeat='list in lists'>{{list}}</li></ul>",
            link:function (scope,element,attrs) {
                scope.lists = shareService.names;
            }
        }
    });

(2)linkのattrsによる同一domでのコンポーネント通信




    
    Document


    



    <!--
      directive          link  ，           attrs,    directive   
  atrributes  ，attrs       ，      $set $observe，       attr      
 attr  ,            。      ，           dom      directive 
   ，          attrs  。
    -->
    var app = angular.module('myApp',[]);

    app.directive('directive1',function(){
        return {
            restrict:"E",
            template:"<span>{{ time | date:'yyyy-MM-dd HH:mm:ss'}}</span>",
            link:function (scope,element,attrs) {
                attrs.$observe('showValue',function (newValue) {
                    scope.time = newValue;
                });
            }
        }
    });

    app.directive('directive2',function ($interval) {
        return {
            restrict:"A",
            link:function (scope,element,attrs) {
                let defInterval = $interval(function () {
                    attrs.$set("showValue",new Date().getTime());
                },1000);

                scope.$on('$destory',function(){
                    $interval.cancel(defInterval);
                });
            }
        }
    });

10、システム指令
すべてのangularシステム命令はangularリファレンスマニュアルを表示します.http://www.runoob.com/angularjs/angularjs-reference.html.一般的なシステム命令について説明します.
(1)ng-classとng-style

(2)ng-switch
このコマンドは、ng-ifとにをたすとHTMLにレンダリングされます.( ng-ifはng-else でif-else をりません. にじてng-switchをします)

(3)ng-bind-htmlと$sce.trustAsHtml()




  
  ng-bind-html $sce
  


  
  


  var app = angular.module('myApp',[]);
  app.controller('myController',function($scope,$sce){
    $scope.a = $sce.trustAsHtml("    <a href='https://blog.csdn.net/ion_L' target='_blank'>ion   </a>");
    $scope.b = 5;
  });
  app.filter('html', ['$sce', function ($sce) {
    return function (text) {
        return $sce.trustAsHtml(text);
  }.filter('tostring', function () {
    //$sce can`t trust a non-string value in a content requiring a string
    return function (text) {
        if (text === null || text === undefined) {
            return '';
        }
        return '' + text;
    };
    });
}]);

なお、低バージョンのangluarはHTMLコードを直接バインドすることができるが、anglar 1である.6.4以降は$sceを付けなければなりません.そうしないと、次のようなエラーが発生します.

$sceの詳細については、以下を参照してください.https://www.cnblogs.com/xing901022/p/5100551.html
(4) ng-trim()




    
    
    
    Document
    
    


    // ng-trim = "true"       
    
    
               : {{ input }}

11. シンボルの

    var APP = angular.module('myApp',[]);
    APP.config(function ($interpolateProvider) {
        $interpolateProvider.startSymbol('{[');
        $interpolateProvider.endSymbol(']}');
    });

12、Angular

なるドメインの
https://www.cnblogs.com/yuzhongwusan/p/4938816.html

9&と&&の違いは何ですか?|内部クラス|汎用

FileReaderを使用してフロントエンドの画像プレビューを実現