خانه دانلود خبرنامه سفارش سایت درباره ما ارتباط با ما حمایت از ما تبلیغات

درس 1 : مقدمه آموزش AngularJS و معرفی

معرفی چهارچوب کاری AngularJS (Mobile SEO)

AngularJS یک چهارچوب کاری جاوا اسکریپت است که می توانید آن را به وسیله یک تگ < Script> به صفحات HTML اضافه کنید.
AngularJS به وسیله Directives خصوصیات (attributes) زبان HTML را اضافه کرده و همچنین به وسیله Expressions توانسته اطلاعات (data) را به تگ های HTML اضافه کند.

AngularJS یک چهارچوب کاری جاوا اسکریپت است

AngularJS یک چهارچوب کاری جاوا اسکریپت (JavaScript Framework) است . AngularJS یک کتابخانه از کدهای آماده است که به زبان جاوا اسکریپت نوشته شده است.
AngularJS به عنوان یک فایل جاوا اسکریپت در سطح وب توزیع شده و می توانید آن را همانند کد زیر، با استفاده یک تگ < script > به صفحه وب خود اضافه کنید :
کد مثال عملی
کد
< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">

< /script> 
                                    

AngularJS باعث توسعه HTML شده است

چهارچوب کاری AngularJS، زبان HTML را با استفاده از ng-directives توسعه داده است. خاصیت ng-app تعیین کننده یک برنامه یا نرم افزار AngularJS application است.
دستور العمل (directive) با نشانه ng-model، مقادیر کنترل های HTML صفحه وب مثل (کادر متن input، کادر انتخابی select و یا textarea) را به اطلاعات برنامه، متصل می کند.
دستور العمل (directive) با نشانه ng-bind، اطلاعات برنامه (application data) را به نمای HTML View، متصل می کند.
مثال عملی : به کد مثال عملی زیر دقت نمایید . اولین برنامه ای است که با 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 directive به AngularJS اعلام می کند که المنت < div > مالک برنامه AngularJS Application است.
دستور العمل ng-model directive، مقدار کادر ورودی input field را به متغیر برنامه با نام name، متصل می کند.
دستور العمل ng-bind directive، محتویات برنامه با نام name را به HTML درونی (inner Html) تگ < p > خواهد داد که درون آن نمایش داده می شود.

آموزش کار با AngularJS Directives : attribute

همانطور که قبلا مشاهده کردید، Angular Directives خواص HTML هایی هستند که با پیشوند ng شروع می شوند.
از ng-init برای مقداردهی اولیه یک متغیر در برنامه AngularJS استفاده می شود. همانند کد زیر :
کد مثال عملی
کد
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>

</div>
                                    
همچنین در صورتی که بخواهید کد به صورت HTML Valid یا معتبر باشد، بایستی کد را به صورت زیر بازنویسی کنید :
کد مثال عملی
کد
<div data-ng-app="" data-ng-init="firstName='John'">

<p>The name is <span data-ng-bind="firstName"></span></p>

</div>
                                    
نکته :

در صورتی که بخواهید که HTML صفحه معتبر (Valid) باشد، بایستی از data-ng به جای ng- استفاده کنید.

درباره دستور العمل ها (directives) در بخش های بعدی بیشتر آموزش خواهیم داد.

آموزش کار با AngularJS Expressions

عبارت های AngularJS Expressions، به صورت {{expression}} بین دو جفت {{ قرار می گیرند. AngularJS، خروجی و نتیجه Expression را دقیقا در نقطه ای که تعریف می شود، محاسبه کرده و نمایش می دهد.
مثال عملی : در مثال زیر، یک عبارت ساده ریاضی را به وسیله Angular 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>
                                    
عبارت های AngularJS Expression، اطلاعات (data) را دقیقا همانند دستورالعمل 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>{{name}}</p>
</div>

</body>
</html>
                                    
در مورد عبارت های AngularJS Expression در بخش های بعدی، بیشتر آموزش خواهیم داد.

آموزش کار با برنامه های Angular Application

ماژول های AngularJS modules، برنامه های AngularJS Application را تعیین می کنند.
کنترل های AngularJS Controllers، برنامه AngularJS Application را کنترل می کنند.
اعلان های ng-app برنامه (application) را تعیین کرده و اعلان ng-controller directive، کنترلر برنامه را مشخص می سازد. مثال عملی : در کد مثال عملی زیر، یک برنامه به نام myApp و کنترلر myCtrl تعریف کرده ایم. این برنامه نام و نام خانودگی را از کاربر دریافت کرده و نشان می دهد :
کد مثال عملی
کد
<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";
});
                                    
در بخش های آینده، به تفصیل به توضیح و آموزش ماژول Modules) ( و کنترلر (Controller) در AngularJS خواهیم پرداخت.