لتوضيح كيفية تعزيز AngularJS HTML القياسي ، سنقوم أولاً بإنشاء قالب صفحة HTML ثابت ثم تحويل قالب صفحة HTML الثابت إلى قالب AngularJS يمكن عرضه ديناميكيًا.
في هذه الخطوة ، نضيف المعلومات الأساسية لهاتين إلى صفحة HTML وإعادة ضبط دليل العمل إلى الخطوة 1 مع الأمر التالي.
نسخة الكود كما يلي:
git checkout -f step -1
يرجى تحرير ملف التطبيق/index.html ، وإضافة الكود التالي إلى ملف index.html ، ثم قم بتشغيل التطبيق لعرض التأثير.
app/index.html
نسخة الكود كما يلي:
<ul>
<li>
<span> Nexus S </span>
<p>
سرعان ما أصبح أسرع مع Nexus S.
</p>
</li>
<li>
<span> Motorola Xoom ™ مع Wi-Fi </span>
<p>
الجيل التالي ، الجيل القادم.
</p>
</li>
</ul>
يمارس
حاول إضافة رمز HTML ثابت متعددة إلى index.html ، على سبيل المثال:
نسخة الكود كما يلي:
<p> إجمالي عدد الهواتف: 2 </p>
لخص
تضيف هذه الخطوة قائمة هاتف HTML ثابتة إلى التطبيق ، والآن لنذهب إلى الخطوة 2 لفهم كيفية إنشاء نفس القائمة بشكل ديناميكي باستخدام AngularJS.