تیشرت اختصاصی برنامه نویس ها
خرید
اطلاعات بیشتر

آموزش شروع کار با 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 :

 

منبع

دسته بندی : JavaScriptطراحي وب

پاسخ دهید

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

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

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

Close