مقدمه ای بر AngularJS

AngularJs فریمورکی از JavaScript است  ، که با استفاده از تگ <script> به صفحه HTML اضافه می شود.
AngularJS با استفاده از دستورالعمل ها (directive ها ) صفات جدیدی را در HTML گسترش می دهد و اطلاعات و داده را با استفاده از عبارات (experssion ها) در صفحه HTML قرار می دهد.
 

AngularJs  فریمورکی از JavaScript است

AngularJSS فریمورکی از JavaScript است ، در واقع کتابخانه می باشد که با اسفتاده از JavaScript نوشته شده است.

AngularJS یک فایل جاوااسکریپت است و توسط تگ <script> به راحتی به صفحه HTML اضافه می شود.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

AngularJS صفحه HTML را توسعه میدهد

AngularJS با استفاده از ng-directives  صفحه HTML را توسعه میدهد.

دستور ng-app برنامه AngularJS ما را تعریف می کند.

ng-model کنترل های HTML را با داده های برنامه مقدار دهی می کند.

ng-bind مقدار های HTML را در صفحه نمایش می دهد.

شروع 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>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 را مقدار دهی اولیه می کند.

شروع AngularJS 2
<div ng-app="" ng-init="firstName='John'">
    <p>The name is <span ng-bind="firstName"></span></p>
</div> 
مشاهده مثال

همچنین می توان کدهای AngularJS را مانند مثال زیر نوشت :

مثال AngularJS
<div data-ng-app="" data-ng-init="firstName='John'">
    <p>The name is <span data-ng-bind="firstName"></span></p>
</div> 
مشاهده مثال

در صورتی که میخواهید ، شما می توانید از data-ng- بجای ng- استفاده کنید

شما در این دوره در رابطه با دستور العمل های AngularJS بیشتر آشنا خواهید شد.

عبارات در 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 هم نشان داد.

مثال 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>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  کنترلر برنامه را معرفی می کند.

مثال AngularJS
<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 برنامه را تعریف می کند:

var app = angular.module('myApp', []);

کنترلر های AngularJS هم برنامه AngularJS را کنترل می کنند :

app.controller('myCtrl', function($scope)
{
$scope.firstName= "John"; $scope.lastName= "Doe";
});

شما در دروس بعدی بیشتر در رابطه با ماژول ها و کنترل ها خواهید دانست.

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط