AngularJS入門例のHello World詳細

2139 ワード

この例では、AngularJS入門例Hello Worldについて説明します.皆さんの参考にしてください.具体的には以下の通りです.
以前はjQueryやオリジナルのJavaScriptを使用していたが、最近はAngularJS、RequireJSといった比較的ブームのあるフレームワークが必要になった.ここに自分の学習過程を記録して、オリジナルの名を冠しますが、実はすべてネット上のいくつかの資料を参考にして、自分のいくつかの実践と理解を加えます.AngularJSに慣れるまでは、あまり質の高い文章は出ておらず、学習ノートやメモとしか言いようがありません.練習で使用したバージョンは1.2.25です.
サンプルコードは次のとおりです.



  
    
    Hello,World!
    
  
  
    
      

Hello, {{yourName}}


ブラウザでこのページを き、テキストボックスに すると、インタフェースが にリアルタイムに されます.Javascriptまたはjqueryを して、このような さな を すると、グループはリスニングイベントを し、textコントロールの を し、 を して します.AngularJSを するには、ng-appを し、ng-modelを し、{yourName}}を して する があります.AngularJSを するのは で、コードがコンパクトであることは らかです.この3つのものの を に てみましょう.
1、ng-app: のdomノードに でき、そのノードとそのすべてのサブノードがAngularJSの であることを す.このマークを すとAngularJSフレームワークは がないことがわかります.



  
    
    Hello,World!
    
  
  
    

Hello, {{yourName}}

Hello, {{yourName}}


はng-appを に くとdiv に したデータがリアルタイムで され、 には がないことがわかります.1つのhtmlページをすべてAngularJSに して したり、AngularJSにページの を させたりすることができ、ng-appが するdomノードを に じて することができます.
2、ng-model:これはAngularJSデータの バインド です. な :AngularJSにこれはデータモデルで、メモリに してください.インタフェースでデータを すると、メモリのデータも に されます.メモリの を すると、インタフェース も に されます.この は らかに で、データの を することができて、 たちが でコードを してこの を することを けることができます.
3、{{yourName}:これはフレームワークが する で、メモリ のデータモデルの を できます.これはstruts 2と ていて、データを するために されます.これはAngularJSが した にすぎず、JSPページのEL 、struts 2のOGLNLとよく ており、データの メカニズムである.
AngularJSに する については、「AngularJS と チュートリアル」および「AngularJS MVCアーキテクチャ 」のトピックを してください.
では、AngularJSプログラムの に つことを しています.