آموزش انگولار-اپلیکیشن
اکنون زمان آن فرا رسیده است که یک اپلیکیشن تک صفحه ای انگولار(SPA) را به طور واقعی ایجاد نماییم.
مثالی از یک اپلیکیشن انگولار
شما اکنون به اندازه ی کافی مطلب برای ایجاد اولین اپلیکیشن انگولار یاد گرفته اید:
یادداشت من
تعداد کاراکترهای باقی مانده : 100
توضیح اپلیکیشن
مثالی از انگولار
<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":
فایل کنترلر "myNoteCtrl.js":
$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
یک <div> در صفحه ی HTML حوزه ی(scope) یک کنترلر است: "ng-controller="myNoteCtrl
یک دستور ng-model محتوای یک <textarea> را به متغیر کنترلر message پیوند می دهد:
دو رویداد ng-click توابع کنترلر ()clear و ()save را فراخوانی می کنند:
<button ng-click="clear()">Clear</button>
یک دستور ng-bind تابع کنترلر ()left را به یک <span> که دربردارنده ی کاراکترهای باقی مانده است، پسوند می دهد:
کتابخانه های اپلیکیشن شما به صفحه اضافه شده اند(بعد از کتابخانه):
<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 کامپایل می کند.
ریشه ی اپلیکیشن می تواند کل صفحه باشد، و یا یک قسمت کوچکتر از صفحه باشد. هرچه که این قسمت کوچکتر باشد، اجرا و کامپایل اپلیکیشن سریع تر خواهد بود.
- نوشته شده توسط احسان عباسی
- بازدید: 7684
