ساخت برنامه با AngularJS – قالب ایستا

 [button type=”info” size=”lg” link=”http://angular.github.io/angular-phonecat/step-1/app/”] نمایش [fa type=”eye”] [/button]


به منظور نشان دادن اینکه AngularJS چطور کدهای استاندارد HTML را به صفحه می افزاید، شما یک صفحه ی ایستا HTML خواهید ساخت و سپس به بررسی اینکه چگونه می توانیم این کد HTML را به یک الگو (teamplate) تبدیل کنیم می پردازیم، خواهیم دید که Angular با استفاده از نمایش پویا همان نتیجه را با هر مجموعه از داده ها نشان می دهد.

در این مرحله شما تعدادی اطلاعات عمومی درباره دو تلفن همراه به صفحه HTML خود اضافه می کنید.

  • صفحه در حال حاضر شامل یک لیست با اطلاعات مربوط به دو تلفن است.

همانطور که می دانیم ابتدا باید فضای کاری خود را به مرحله ی یک انتقال دهیم:

حال سرور خود را روشن کنید و به از طریق مرورگر به آدرس زیر بروید:

مهمترین تغییرات را می توانید در GitHub مشاهده کنید.

app/index.html

آزمایش

سعی کنید کدهای HTML ایستای بیشتری را به فایل index.html اضافه کنید، به عنوان مثال:

 

خلاصه

علاوه بر این شما می توانید به برنامه خود لیستی از کدهای HTML ایستا را به صفحه اضافه کنید، حال در قسمت بعدی خواهید دید که چطور با استفاده از AngularJS همان لیست را بطور پویا در صفحه نمایش خواهیم داد.