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

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

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

angular

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>First Angular App</title>
        <script src="angular.js"></script>
    </head>
    <body>
     <!-- Your HTML Code goes here -->
    </body>
    </html>

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

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

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

<div id="main_div" ng-app='my_ang_app' ng-controller='first_div'>
</div>

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

var app = angular.module('my_ang_app', []);

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

app.controller('first_div', function ($scope) {
     $scope.message="Hello world from angular";
    });

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>First Angular App</title>
        <script src="angular.js"></script>
        <script src="app.js"></script>
        <script src="core.js"></script>
    </head>
    <body>
      <div id="main_div" ng-app='my_ang_app' ng-controller='first_div'>
       {{message}}
      </div>
    </body>
    </html>

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

در همین رابطه :   چگونه : در بازار کار طراحی وب ایران با مشتری رفتار کنیم ؟!

پیش نمایش 

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

 

منبع

پاسخ دهید

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

More in فونت
فونت های حرفه ای رایگان ۲۰۱۲

اکنون داریم به نیمه سال نزدیک می شویم و به احتمال زیاد شما دنبال فونت های جدید و زیبا می...

Close