Angularjsの学習を開始する良い方法は、古典的なアプリケーション「Hello World！」を作成することです。
1.たとえば、お気に入りのテキストエディターを使用してHTMLファイルを作成します。HelloWorld.html。
2.次のソースコードをHTMLファイルにコピーします。
3.このHTMLファイルをWebブラウザーで開きます。
ソースコード：
コードコピーは次のとおりです。
<！doctype html>
<html ng-app>
<head>
<Script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
</head>
<body>
こんにちは世界'}}！
</body>
</html>
ブラウザで上記のコードを実行して、効果を確認してください。
それでは、コードを詳しく見て、何が起こっているのか見てみましょう。ページがロードされると、タグNG-APPはAngularJSにHTMLページ全体を処理し、アプリケーションを起動するように指示します。
コードコピーは次のとおりです。
<html ng-app>
この行は、AngularJSスクリプトをロードします。
コードコピーは次のとおりです。
<Script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
（HTMLページ全体を処理するAngularjsの詳細については、Bootstrapを参照してください。）
最後に、タグ内の本体はアプリケーションのテンプレートであり、UIでの挨拶を示しています。
コードコピーは次のとおりです。
こんにちは世界'}}！
二重ブレースでタグ付けされた{{{}}のコンテンツは、挨拶の縛られた表現であり、これは単純な文字列「世界」です。
以下では、より興味深い例を見てみましょう。AngularJSを使用して動的な表現を挨拶テキストにバインドします。
こんにちはAngularjsの世界！
この例は、AngularJの双方向データ結合を示しています。
1。以前に作成されたHelloWorld.htmlドキュメントを編集します。
2.次のソースコードをHTMLファイルにコピーします。
3.ブラウザウィンドウを更新します。
ソースコード：
コードコピーは次のとおりです。
<！doctype html>
<html ng-app>
<head>
<Script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
</head>
<body>
あなたの名前：<input type = "text" ng-model = "yourname" placeholder = "world">
<hr>
こんにちは{{yourname || '世界'}}！
</body>
</html>
ブラウザで上記のコードを実行して、効果を確認してください。
この例には、次の重要なメモがあります。
1。テキスト入力命令<入力ng-model = "yourname" />は、yournameと呼ばれるモデル変数にバインドされています。
2。ダブルブレースマークYourNameモデル変数をグリーティングテキストに追加します。
3.イベントリスナーを登録したり、アプリケーションにイベントハンドラーを追加する必要はありません！
次に、入力ボックスに名前を入力してみてください。タイプした名前はすぐに更新され、挨拶に表示されます。これは、Angularjsの双方向データ結合の概念です。入力ボックスの変更はすぐにモデル変数（1つの方向）に反映され、モデル変数の変更はすぐにグリーティングテキスト（他方の方向）に反映されます。
AngularJSアプリケーション分析
このセクションでは、AngularJSアプリケーションの3つのコンポーネントについて説明し、それらがモデルビューコントローラーの設計パターンにどのようにマッピングされるかについて説明します。
テンプレート
テンプレートは、アプリケーションのビューを提示するためにHTMLとCSSで記述するファイルです。 AngularJSコンパイラのディレクティブとして、新しい要素と属性タグをHTMLに追加できます。 AngularJSコンパイラは完全に拡張可能です。つまり、AngularJSを使用すると、HTMLで独自のHTMLタグを作成できます。
アプリケーションロジックと動作
アプリケーションロジックと動作は、JavaScriptで定義するコントローラーです。 AngularJSは標準のAJAXアプリケーションとは異なります。リスナーやDOMコントローラーは、既にAngularJSに組み込まれているため、作成する必要はありません。これらの機能により、アプリケーションロジックは簡単に書き込み、テスト、維持、理解できます。
モデルデータ（データ）
モデルは、AngularJSスコープされたオブジェクトのプロパティから拡張されています。モデルのデータは、JavaScriptオブジェクト、配列、または原始的なタイプである可能性があり、問題ではありません。それらがすべてAngularJSスコープされたオブジェクトに属することが重要です。
AngularJSは、データモデルとビューインターフェイスUIとの間の双方向の同期を範囲を維持します。モデルの状態が変更されると、AngularJSはすぐにViewインターフェイスに反映されたものを更新し、その逆も同様です。
さらに、AngularJSは非常に便利なサービス機能も提供します。
1.基礎となるサービスには、依存関係インジェクション、XHR、キャッシュ、URLルーティング、ブラウザの抽象サービスが含まれます。
2.独自の特定のアプリケーションサービスを拡張および追加することもできます。
3.これらのサービスは、Webアプリケーションを作成するのに非常に便利です。