آموزش Angular به زبان فارسی - بخش بیست و سوم
بسم الله الرحمن الرحیم
مشاهده تمامی آموزش های دوره AngularJS
آموزش Angular
بخش بیست و سوم (پیاده سازی یک مثال ساده)
AngularJS Application
یکی از اهداف AngularJS ساخت نرم افزارهایی با قابلیت SPA یا همان single page application است، ما در این دوره با برخی از دستورات در AngularJS آشنا شدیم و حال وقت آن است تا یک برنامه کاربردی برای خود تولید کنیم.
ساخت AngularJS Application
شما به اندازه کافی در حال حاضر با AngularJS آشنا شده اید که بتوانید یک برنامه SPA طراحی کنید.
کد برنامه
<html ng-app="myNoteApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>
<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", []);
فایل Controller برنامه 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> شامل یک برنامه AngularJS است (ng-app="myNoteApp"):
<html ng-app="myNoteApp">
تگ <div> برای تعیین میدان دید (Scope) Controller مورد استفاده قرار می گیرد (ng-controller="myNoteCtrl)
<div ng-controller="myNoteCtrl">
رهنمود ng-model یک <textarea> را به متغییر message کنترلر مقید می کند.
<textarea ng-model="message" cols="40" rows="10"></textarea>
دو رویداد ng-click توابع Controller ما را (clear() و save()) فراخوانی می کند.
<button ng_click="save()">Save</button>
<button ng-click="clear()">Clear</button>
رهنمود ng-bind تابع left() را به یک <span> مقید می کند.
Number of characters left: <span ng-bind="left()"></span>
کتابخانه AngularJS را به صفحه اضافه کرده ایم.
<script src="myNoteApp.js"></script>
<script src="myNoteCtrl.js"></script>
ساختار AngularJS Application
در بالا شما طرح ریزی (scaffolding) یک برنامه واقعی (single page application (SPA) ) AngularJS را دیدید.
عنصر <html> یک container برای برنامه AngularJS می باشد (ng-app=) و تگ <div> میدان دید (scope) برنامه ما را مشخص می کند (ng-controller=). شما می توانید در یک برنامه چندین Controller را تعریف کنید. my...App.js کد ماژول برنامه را تعریف می کند و یک یا چند فایل controller (my...Ctrl.js) کدهای controller برنامه را تعریف می کند.
چند نکته و مرور
برای افزایش سرعت لو برنامه فایل های AngularJS را در پایین <body> قرار دهید.
کد برنامه را باید بعد از فراخوانی کتابخانه AngularJS فراخوانی کنید.
رهنمود ng-app باید در عنصر Root صفحه قرار گیرد و چون می خواهیم SPA طراحی کنیم پس عنصر Root ما تگ <html> است.
در یک برنامه ممکن است ما یک و یا چند ng-controller داشته باشیم که هر یک scope خودشان را دارند.
AngularJS به صورت خودکار در یک رویداد HTML DOMContentLoaded اجرا می شود. اگر یک ng-app پیدا شود، AngularJS هر رهنمودی که نام آن در صفحه باشد را لود خواهد کرد و اولین عنصر برنامه را از ng-app کامپایل خواهد کرد.
عنصر Root می تواند کل صفحه را در بر گیرد و یا یک بخش کوچک از صفحه باشد طبیعتا هر بخش تحت مدیریت AngularJS کوچکتر باشد برنامه شما سریعتر اجرا خواهد شد.
مشاهده تمامی آموزش های دوره AngularJS
انشالله که مطالب ارائه شده مفید واقع شده باشد، خواهش بنده ارسال نظرات و پیشنهادات شما برای بهتر شدن سطح علمی مطالب است. دوره مقدماتی با این آموزش به پایان رسید انشالله در آموزش بعدی یک پروژه را پیاده سازی خواهیم کرد
یاعلی