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

تبلیغات
کانال تلگرام فتولیا

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 باشید .

در همین رابطه :   50 نمونه ی صفحه ی Coming Soon

پیش نمایش 

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

 

منبع

پاسخ دهید

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

More in JavaScript, طراحي وب
آموزش استفاده آسان از Google reCaptcha در کد PHP جهت جلوگیری از اسپم

گوگل جدیدا سرویس تشخیص اسپمر های خود یا همان Google reCaptcha قدیمی را نونوار کرده است و دیگر از کدهای...

Close