JavaScript, طراحي وب

آموزش شروع کار با AngularJS

تبلیغات
4 سوالی شهرداری
کانال تلگرام فتولیا

Angularjs یک فریم ورک جاوا اسکریپت است که توسط Google ایجاد شده و پشتیبانی می شود . هدف Angularjs بست دادن قابلیت های HTML و مخصوصا کمک به طراحی وب اپلیکیشن های تک صفحه ای مانند Gmail,Trello,WikiWand و … است و با ارائه راه کارهایی جهت استفاده از الگوهای MVW , MVC به گسترش و قدرتمند تر شدن برنامه کمک فراوانی می کند . در این پست شما خواهید دید که چگونه Angularjs را در محیط توسعه به کار ببرید و کار با آن را در یک برنامه ساده Hello World شروع کنید .

angular

ایجاد اولین برنامه Angularjs

یک صفحه HTML با هر نامی ایجاد کنید و کدهای زیر را در آن قرار دهید . همانطور که می بینید فایل Angularjs در بالای صفحه الحاق شده است . برای دانلود این فایل می توانید به این آدرس بروید

حالا یک تگ <div> در داخل body ایجاد کنید ولی قبل از آن اجازه دهید توضیح کوتاهی در مورد ساختار Angularjs بدهم

  • ng-app : برای دادن نام به اپلیکیشن Angularjs استفاده می شود
  • ng-controller : امکان انتخاب یک عنصر بخصوص از اپلیکیشن را فراهم می کند

حالا یک Div در داخل صفحه ایجاد می کنیم و خصوصیت های بالا نیز برایش تعیین می کنیم :

حالا که عنصر دلخواه را با مشخصات ضروری ایجاد کردیم نوبت شروع کار با Angularjs است .یک فایل JS جدید با نام app.js ایجاد کرده و کدهای زیر را در آن قرار دهید :

حالا این فایل را در قسمت <head> صفحه بعد از کد الحاق Angularjs ، الحاق کنید . این تمرین خوبی است تا ماژول Angularjs و ماژول کنترلر در فایل های جداگانه باشند تا توسعه پذیری سیستم در آینده راحت تر انجام شود .بنابراین یک فایل جدید بنام Core.js ایجاد کنید و هرگونه کد Javascript را که قرار است از این به بعد اضافه کنید و نیز کد زیر را در آن قرار دهید :

حالا کافیست فایل را ذخیره کرده و مانند دو فایل قبلی به بخش <head> صفحه اضافه کنید . الان باید پیام “Hello world from angular” را در داخل Div ببینید .کد HTML نهایی به این شکل خواهد بود :

حالا کد را ذخیره کرده و فایل HTML را در مرورگرتان باز کنید . باید پیام بالا را در مرورگر ببینید ، تبریک می گوییم شما اولین اپلیکیشن Angularjs تان را نوشتید . منتظر آموزش های بعدی Angularjs باشید .

پیش نمایش 

مطالب بیشتر در مورد Angularjs :

 

منبع

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

آخرین مقالات فتولیا در ایمیل شما

در خبرنامه ما عضو شوید و آخرین مطالب و مقالات آموزشی را اول شما دریافت کنید