ورود به کارتابل مشتریان وب مهراز
مقدمه ای بر AngularJS
یادگیری AngularJSAngularJS با استفاده از دستورالعمل ها (directive ها ) صفات جدیدی را در HTML گسترش می دهد و اطلاعات و داده را با استفاده از عبارات (experssion ها) در صفحه HTML قرار می دهد.
AngularJs فریمورکی از JavaScript است
AngularJSS فریمورکی از JavaScript است ، در واقع کتابخانه می باشد که با اسفتاده از JavaScript نوشته شده است.
AngularJS یک فایل جاوااسکریپت است و توسط تگ <script> به راحتی به صفحه HTML اضافه می شود.
AngularJS صفحه HTML را توسعه میدهد
AngularJS با استفاده از ng-directives صفحه HTML را توسعه میدهد.
دستور ng-app برنامه AngularJS ما را تعریف می کند.
ng-model کنترل های HTML را با داده های برنامه مقدار دهی می کند.
ng-bind مقدار های HTML را در صفحه نمایش می دهد.
<!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 ng-bind="name"></p>
</div>
</body>
</html>توضیح مثال :
AngularJS با بالا آمدن صفحه شروع به کار می کند.
دستور ng-app به AngularJS می گوید که عنصر <div> مالک برنامه AngularJS ماست.
دستور ng-model مقادیر ورودی فیلد input را با کلمه name مقدار دهی می کند.
دستور ng-bind تگ <p> را با توجه به ورودی input مقدار دهی می کند. در واقع با این کار innerHTML تگ <p> مقدار دهی می شود.
دستور العمل های AngularJS
همانطور که تاکنون ملاحظه کردید ، دستورهای AngularJS در صفات HTML با پیشوند ng مشخص می شوند.
دستور ng-init برنامه ی AngularJS را مقدار دهی اولیه می کند.
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div> همچنین می توان کدهای AngularJS را مانند مثال زیر نوشت :
<div data-ng-app="" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div> شما در این دوره در رابطه با دستور العمل های AngularJS بیشتر آشنا خواهید شد.
عبارات در AngularJS
با استفاده از دو براکت پشت سر هم می توانید عبارت محاسباتی یا هر نوع عبارتی را داشته باشد : {{ عبارت محاسباتی یا ... }}
AngularJS دقیقا هر جا از عبارات استفاده کنید نتیجه خروجی را همان جا نمایش می دهد.
<!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>عبارات در AngularJS را می توان با استفاده از 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>شما در این دوه آموزشی AngularJS در رابطه با عبارات بیشتر خواهید دانست.
برنامه های AngularJS
ماژول های AngularJS برنامه AngularJS را تعریف می کنند. (AngularJS Modules)
کنترلر های AngularJS برنامه AngularJS را کنترل می کنند. (AngularJS 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> ماژول های AngularJS برنامه را تعریف می کند:
کنترلر های AngularJS هم برنامه AngularJS را کنترل می کنند :
{
$scope.firstName= "John"; $scope.lastName= "Doe";
});
شما در دروس بعدی بیشتر در رابطه با ماژول ها و کنترل ها خواهید دانست.
نظر شما
>