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

آموزش برنامه ی تحت وب AngularJS

دوره آموزش SPA

 

رمز فایل :tahlildadeh.com

 

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

 

برنامه ی تحت وب AngularJS

با مطالبی آموزش هایی که تاکنون آموخته ایم، حال می توانیم یک برنامه ی تک صفحه ای (SPA) را به طور واقعی بسازیم.

نمونه ای از یک برنامه ی AngularJS

اکنون به اندازه ی کافی مطلب جهت ایجاد کردن اولین برنامه ی AngularJS فراگرفته اید.

کد این برنامه را در زیر مشاهده می کنید:

 

نمونه یک

 

My Note

Number of characters left:

امتحان کنید

 

فایل حاوی برنامه "myNoteApp.js":

var app = angular.module("myNoteApp", []);

فایل دربردارنده ی کنترلگر "myNoteCtrl.js":

        app.controller("myNoteCtrl", function ($scope) {

            $scope.message = "";

            $scope.left = function () { return 100 - $scope.message.length; };

            $scope.clear = function () { $scope.message = ""; };

            $scope.save = function () { alert("Note Saved"); };

        });

کتابخانه های برنامه ی شما به صفحه ی مورد نظر اضافه می شوند:

<script src="myNoteApp.js"></script>
<script src="myNoteCtrl.js"></script>


عنصر html  که دربردارنده ی برنامه ی AngularJS است : "ng-app="myNoteApp

<html ng-app="myNoteApp">

  تگ <div> در سند HTML حوزه ی (scope) یک کنترلگر می باشد: "ng-controller="myNoteCtrl

<div ng-controller="myNoteCtrl">

دستور ng-model محتوای یک <textarea>  را به متغیر کنترلگر message، bind می کند:

<textarea ng-model="message" cols="40" rows="10"></textarea>

دو رخداد ng-click توابع کنترلگر ()clear و ()save را صدا می زنند:

<button ng-click="save()">Save</button>
<button ng-click="clear()">Clear</button>

دستور ng-bind تابع کنترلگر ()left را به یک <span> که حاوی کاراکترهای باقی مانده است، bind یا متصل می کند:

Number of characters left: <span ng-bind="left()"></span>

کتابخانه های برنامه ی شما به صفحه ی مورد نظر اضافه شده اند (پس از کتابخانه):

 

<script src="myNoteApp.js"></script>
<script src="myNoteCtrl.js"></script>

 اسکلت و ساختار برنامه ی کاربردی AngularJS

در بالا، یک ساختار برنامه ی کاربردی واقعی تک صفحه ای را نظاره گر هستید. 

المان  <html> ظرف نگهدارنده ی برنامه ی کاربردی AngularJS می باشد(ng-app=).

المان <div> حوزه ی (scope) کنترلگر AngularJS را مشخص می کند(ng-controller=).

می توان چندین کنترلگر در یک برنامه ی AngularJS داشت.

(my...App.js) App file کد ماژول برنامه را تعریف می کند. 

یک یا چند فایل کنترلگر (my...Ctrl.js) کد کنترلگر را تعریف می کنند. 

چکیده – برنامه چگونه کار می کند؟

دستور ng-app در root element (عنصر آغازین یا به عبارتی ریشه) برنامه قرار گرفته است.

برای یک برنامه ی تک صفحه ای، معمولا ریشه یا عنصر آغازین برنامه ی همان عنصر  <html> است.

یک یا چند دستور ng-controller درواقع کنترلگرهای برنامه ی مورد نظر را تعریف می کنند. هر کنترلگر حوزه ی(scope)  مختص خود را دارد که عبارت است از عنصر HTML ای که در آنجا تعریف شده است.

AngularJS به محض اجرای رخداد HTML DOMContentLoaded به صورت خودکار راه اندازی می شود. در صورت وجود دستور ng-app ، AngularJS ماژول های نام گذاری شده در دستور نام برده را بارگذاری می کند و سپس برنامه  DOM را باng-app  به عنوان ریشه ی برنامه کامپایل می کند.

ریشه ی برنامه (application root) می تواند کل صفحه و یا یک قسمت کوچکتر از آن باشد. هرچه که این قسمت کوچکتر باشد، ترجمه و اجرای برنامه سریع تر صورت می پذیرد. 

 

 

 

 

 

 

  • 1283
  •    1400
  • تاریخ ارسال :   1394/09/17

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

ارسال

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

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