angularjs浅尝1

AngularJSは、HTMLの構築アプリケーションの不足を克服するために設計されています.通常、動的アプリケーションの構築における静的Webテクノロジーの不足を解決するには、次の技術を使用します.

クラスライブラリ-クラスライブラリはいくつかの関数の集合であり、WEBアプリケーションを書くのに役立ちます.主導的な役割を果たすのは、クラスライブラリをいつ使用するかを決定するコードです.クラスライブラリ:jQueryなど

フレームワーク-フレームワークは特殊で、すでに実現されたWEBアプリケーションであり、具体的なビジネスロジックを埋め込む必要があります.ここでフレームワークは主導的な役割を果たし、それによって具体的な応用論理に基づいてコードを呼び出す.フレームワークは、knockout、sproutcoreなどです.

AngularJSは、HTML自体のアプリケーション構築における欠陥を補完しようとする異なる方法を使用しています.AngularJSは,我々が識別子(directives)と呼ぶ構造を用いることで,ブラウザが新しい構文を認識できるようにする.例:

は二重括弧{}}構文を使用してデータバインドを行う.

は、DOM制御構造を使用して、DOMフラグメントの反復または非表示を実現する.

はフォームとフォームの検証をサポートします.

は、論理コードを関連するDOM要素に関連付けることができる.

は、HTMLを再利用可能なコンポーネントに分割することができる.

Demo

  
    
        
    
  
  
    

      

        name:{{contact.name}},age:{{contact.age}},hometown:{{contact.hometown}},{{"sb"}}
      
    
    name:
    age:
    hometown:
      
  

angular.module('index',[]).controller('IndexCtrl',function($scope){
  $scope.contacts = [{
      name:'   ,
      age:20,
      hometown:'hk
    },{
      name:'   ,
      age:22,
      hometown:'hk'}];
  $scope.reset_contact = function(){
    $scope.new_contact = {
      name:'',
      age:'',
      hometown:''
    };};
  $scope.add_contact = function(){
    $scope.contacts.push($scope.new_contact);
    $scope.reset_contact();
  };});

ng-appはangularjsがラベル のdomを することを し、index は ドメイン であり、index ドメインに していることを している.angular.module('index',[]).controllerはindexの ドメイン でcontrollerを することを し、 にng-controllerはその の がIndexCtrlに することを している.ng-modelこのチェックバインディングをnew_に contact 、angularjsはその が によって することを します.ng-click add_contact クリック.liタグ のng-repeat=「contact in contacts」 はAngularJS です.この はAngularJSに のliラベルをテンプレートとしてリスト の にli を するように えた.これにより、 ボタンをクリックすると、 ボックスに されるmodelがcontactsに され、add_contact は に され、ページの はangularjsによって に します.angularjsはng-app のdomにのみ するため、ng-app のすべてのdom,jsを することなく、 のページでangularjsを することができる.Angularjsとrestfulのバックエンドのインタラクションは に で、ngResourceコンポーネントを して、CRUDのパス、http vebを すると、saveを び しやすくなり、updateはバックエンドとインタラクションします.Demo

app=angular.module("index",["ngResource"])
app.factory "Contact",($resource) ->
$resource("/contacts/:id.json",{id:"@id"},{update:{method:"put"}})
$scope.contacts = Contact.query # /contacts
Contact.save $scope.new_contact #create
contact.$update #  

は を してください.http://me.angry-arthas.com/blog/2015/09/06/angularjsqian-chang-1/