AngularJSが標準のHTMLを強化する方法を説明するために、最初に静的HTMLページテンプレートを作成し、次にこの静的HTMLページテンプレートを動的に表示できるAngularJSテンプレートに変換します。
このステップでは、2つの携帯電話の基本情報をHTMLページに追加し、次のコマンドで作業ディレクトリをステップ1にリセットします。
コードコピーは次のとおりです。
gitチェックアウト-fステップ1
app/index.htmlファイルを編集し、次のコードをindex.htmlファイルに追加してから、アプリを実行して効果を表示します。
app/index.html
コードコピーは次のとおりです。
<ul>
<li>
<span> nexus s </span>
<p>
Nexus Sで速く速くなりました
</p>
</li>
<li>
<span> wi-fi </span>を搭載したMotorola Xoom™
<p>
次の世代のタブレット。
</p>
</li>
</ul>
練習する
たとえば、index.htmlに複数の静的HTMLコードを追加してみてください。
コードコピーは次のとおりです。
<p>電話の総数：2 </p>
要約します
このステップでは、静的HTML電話リストをアプリに追加します。次に、ステップ2にアクセスして、AngularJSを使用して同じリストを動的に生成する方法を理解しましょう。