در این مقاله به تعریف آنگولارجی اس می پردازیم برای مطالعه این درس آشنایی کامل با مباحث Html و جاوا اسکریپت ضروری است.
آموزش آنگولار جی اس
AngularJS یک فریم ورک جاوا اسکریپت است. و میتواند با تگ <script> به صفحه وب استفاده میشود.
AngularJS صفت های HTML را با Directives توسعه دهد، و برای اتصال به داده های Html از Expressions استفاده می کند.
آنگولار جی اس فریم ورک جاوا اسکریپت
همانطور که در توضیح بالا گفتیم آنگولارجی است یک فریم ورک جاوا اسکریپت است ، آنگولارجی اس کتابخانه ای است که با جاوا اسکریپت نوشته شده است.
برای افزودن آنگولارجی است به صفحه وب از دستور زیر استفاده می کنیم:
<script src="https://sargonco.com/Uploads/Public/article/webdistut/javascript/angular.min.js"></script>
توسعه Html با AngularJS
آنگولارجی اس برای توسعه HTML از ng-directives استفاده می کند.
دستور العمل ng-app برای معرفی یک اپلیکیشن آنگولارجی اس بکار میرود.
دستور العمل ng-model برای معرفی برای اتصال به کنترل های HTML مانند (input, select, textarea) به داده های نرم افزار استفاده میشود.
در مثال زیر عملگر ng-bind را برای نمایش داده ها در HTML بکار خواهیم برد.
مثال:
<!DOCTYPE html>
<html>
<script src="https://sargonco.com/Uploads/Public/article/webdistut/javascript/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
مشاهده نتیجه
توضیح مثال بالا:
انگولار جی اس بصورت اتوماتیک با بارگذاری صفحه اجرا خواهد شد.
دستورالعمل ng-app به آنگولار جی اس اعلام میدارد که تگ <div> اجرا کننده اپلیکیشن آنگولار جی اس می باشد.
دستور العمل ng-bind در درون تگ <p> متغییر name را وارد خواهد کرد.
دستورالعمل های آنگولار جی اس
شما در مثال بالا دیدید که دستور العمل های آنگولار جی اس با پیشوند ng بصورت صفت HTML استفاده میشوند.
دستور العمل ng-init متغییر ها را در نرم افزار آنگولار جی اس تعریف می کند:
مثال :
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
مشاهده نتیجه
نتیجه مشابه با دستور معتبر در HTML:
<div data-ng-app="" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>
مشاهده نتیجه
شما میتوانید از data-ng- بجای ng- استفاده کنید و اینکار از نظر HTML معتبر تر است.
اصطلاحات در آنگولار جی اس
اصطلاحات در آنگولار جی اس درون دو براکت نوشته میشوند : {{ expression }}
خروجی آنگولارجی اس دقیقا محتوای براکت ها خواهد بود:
مثال:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
مشاهده نتیجه
اصطلاحات در آنگولار جی اس دقیقا مانند دستورالعمل ng-bind است:
مثال:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
مشاهده نتیجه
modules در آنگولار جی اس نرم افزار انگولارجی اس را تعریف می کنند.
controllers کنترل نرم افزار آنگولار جی اس را در اختیار قرار دارند.
دستورالعمل ng-app نرم افزار را تعریف کرده و دستورالعمل ng-controller کنترل ها را تعریف می کند:
مثال:
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
مشاهده نتیجه
ماژولها نرم افزار را در آنگولارجی اس تعریف می کنند:
ماژول ها در آنگولارجی اس
var app = angular.module('myApp', []);
کنترلرها کنترل اپلیکیشن را در آنگولارجی اس در اختیار دارند:
کنترلرهای آنگولارجی اس
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
در آموزش های بعدی درباره کنترل ها و ماژول ها بیشتر صفحبت خواهیم کرد.
در صورت تمایل جهت مشاوره رايگان ، گرفتن قیمت طراحی سایت ، اطلاعات بيشتر و سفارش با ما تماس بگيريد.