آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

مقدمه ای بر AngularJS

 

رمز فایل :tahlildadeh.com

 

کلیه حقوق مادی و معنوی این مقاله متعلق به آموزشگاه تحلیل داده می باشد و هر گونه استفاده غیر قانونی از آن پیگرد قانونی دارد.

 

مقدمه ای بر AngularJS

همان طور که پیشتر گفته شد، AngularJS صرفا یک کتابخانه یا چارچوب کاری JavaScript است. از این رو می توان با استفاده از تگ <script> آن را به صفحات HTML افزود. AngularJS خصیصه های (attribute) HTML را از طریق directive ها (دستورها) بسط داده و با بهره گیری از عبارت ها (expression) داده ها را به HTML مقید می سازد (bind می کند).

AngularJS یک کتابخانه یا چارچوب کاری JavaScript است!

همان طور که می دانید AngularJS یک چارچوب کاری (framework) است که با زبان جاوا اسکریپت نوشته شده است. AngularJS به صورت یک فایل جاوا اسکریپت ارائه شده و می توان آن را با استفاده از تگ <script>به صفحه ی وب اضافه کرد.

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">

</script>

 

AngularJS قابلیت ها و امکانات زبان طراحی وب HTML را بسط می دهد!

کتابخانه ی AngularJS با استفاده از دستورهای ng-directive، قابلیت هایHTML  را بسط می دهد.

دستور ng-app یک برنامه ی AngularJS را تعریف یا مشخص می کند. 

کار دستور ng-model این است که مقدار کنترل های HTML همچون input ، select و textarea  را به داده های app متصل (bind) می کند.

دستور ng-bind داده های برنامه را به اشیا نمایی/دیداری(view)  HTML مقید می سازد (bind می کند)؛ به عبارت دقیقتر به کمک آن داده ها نمایش داده می شوند.

مثالی از AngularJS

نمونه یک

div ng-app="">
        

Input something in the input box:

Name:

امتحان کنید

تشریح مثال:

AngularJS با بارگذاری کامل صفحه به صورت خودکار آغاز می شود.

پس از آن به واسطه ی دستور ng-app به AngularJs اطلاع دادیم که تگ <div> مالک برنامه ی       Angularjs  است.

سپس با استفاده از دستور ng-model مقدار فیلد input را به متغیر برنامه "name" مقید (bind) کردیم.

در پایان دستور ng-bind کاری کردیم که متغیر برنامه ی name به innerHtml تگ <p> وصل (bind) شود.

Directive های AngularJS

 

همان طور که قبلا مشاهده کرده اید، directive های AngularJS در واقع همان خصیصه های (attribute) HTML هستند که دارای پیشوند ng می باشند.

به عنوان مثال دستور  ng-init، متغیرهای برنامه را مقداردهی اولیه (initialize) می کند:

نمونه دو

  

The name is

امتحان کنید

روشی جایگزین به همراه HTML معتبر:

نمونه سه

    

The name is

امتحان کنید

 

چنانچه می خواهید کدهای HTML صفحه Valid یا معتبر باشند می توانید به جای پیشوند ng- از پیشوند data-bg- استفاده نمایید.

عبارت ها(expression)  AngularJS

عبارت های AngularJS داخل {{ }} نوشته می شوند.

دستور ng-init متغیرهای برنامه ی AngularJS را مقداردهی اولیه می کند:

 

نمونه چهار

    

The name is

امتحان کنید

 


    HTMLاطلاعات را به المان های angularJsدر کل، عبارت ها در 

مقید می سازند (منتقل می کنند) درست مشابه کاری که دستور

 انجام می دهد. ng-bind

نمونه پنج

    

Input something in the input box:

Name:

{{name}}

امتحان کنید

برنامه های (application) AngularJS

ماژول های Angularjs برنامه های Angularjs را تعریف می کنند و کنترلر های Angularjs برنامه های Angularjs را مدیریت می کنند.

دستور ng-app اپلیکیشن مورد نظر را کنترل می کند و دستور ng-controller در حقیقت کنترلر را مشخص می کند.

نمونه شش

Try to change the names.

First Name:
Last Name:

Full Name: {{firstName + " " + lastName}}
امتحان کنید

ماژول های AngularJS اپلیکیشن را تعریف می کنند:

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

کنترلر (controller) اپلیکیشن ها را مدیریت می کنند:

    app.controller('myCtrl', function ($scope) {

        $scope.firstName = "John";

        $scope.lastName = "Doe";

    });

  • 2162
  •    1356
  • تاریخ ارسال :   1394/08/16

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .