السّلام علیک یا اباعبداللّه الحسین

سبد (0)

تبلیغات

آموزش انگولار-اپلیکیشن

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


مثالی از یک اپلیکیشن انگولار

شما اکنون به اندازه ی کافی مطلب برای ایجاد اولین اپلیکیشن انگولار یاد گرفته اید:

یادداشت من



 

تعداد کاراکترهای باقی مانده : 100


توضیح اپلیکیشن

مثالی از انگولار

<html ng-app="myNoteApp">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-controller="myNoteCtrl">

<h2>My Note</h2>

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

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

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

</div>

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

</body>
</html>
خودتان امتحان کنید »

فایل اپلیکیشن "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");};
});

 عنصر html  که دربردارنده ی اپلیکیشن انگولار است : "ng-app="myNoteApp

<html ng-app="myNoteApp">

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

<div ng-controller="myNoteCtrl">

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

<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>  که دربردارنده ی کاراکترهای باقی مانده است، پسوند می دهد:

تعداد کاراکترهای باقی مانده: <span ng-bind="left()"></span>

کتابخانه های اپلیکیشن شما به صفحه اضافه شده اند(بعد از کتابخانه):

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

شالوده ی اپلیکیشن انگولار

در بالا، یک شالوده ی اپلیکیشن واقعی تک صفحه ای انگولار(SPA) را مشاهده می کنید. 

عنصر <html> ظرف اپلیکیشن انگولار می باشد(ng-app).

یک عنصر <div> حوزه ی کنترلر انگولار را تعریف می کند(ng-controller).

شما می توانید کنترلرهای بیشتری را در یک اپلیکیشن داشته باشید. 

یک فایل اپلیکیشن(my...App.js) کد ماژول اپلیکیشن را تعریف می کند. 

یک یا چند فایل کنترلر(my...Ctrl.js) کد کنترلر را مشخص می کند. 


خلاصه-نحوه ی کار اپلیکیشن

دستور ng-app در عنصر ریشه ی اپلیکیشن قرار گرفته است.

برای یک اپلیکیشن تک صفحه ای(SPA)، معمولا ریشه ی اپلیکیشن همان عنصر <html> است.

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

انگولار بر اساس رویداد اچ تی ام ال DOMContentLoaded به طور اتوماتیک شروع به کار می کند. سپس انگولار ماژول های نام گذاری شده را بارگذاری می کند و بعنوان ریشه ی اپلیکیشن DOM را با ng-app کامپایل می کند. 

ریشه ی اپلیکیشن می تواند کل صفحه باشد، و یا یک قسمت کوچکتر از صفحه باشد. هرچه که این قسمت کوچکتر باشد، اجرا و کامپایل اپلیکیشن سریع تر خواهد بود. 

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی