با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش AngularJS را دنبال می کنند. ما در بخش آشنایی بیشتر با AngularJS قصد داریم ابتدا شما را با ساختار و ویژگی های فریم ورک AngularJS ، آشنا کنیم. سپس در بخش های آموزشی آتی به آموزش کامل AngularJS ، خواهیم پرداخت.
اگر به تازگی وارد بخش جاری شده اید. و از AngularJS و جزئیات این دوره آموزشی، اطلاع ندارید. می توانید مطالب بخش مقدمه ای بر دوره آموزش AngularJS را مرور کنید.
AngularJS در واقع یک فریم ورک جاوا اسکریپت است. که شما می توانید آن را به صفحات HTML وب خود، با استفاده از تگ <script>
، اضافه کنید.
AngularJS ویژگی های HTML را با دستورالعمل ها گسترش می دهد. و داده ها را به HTML با اصطلاحات مرتبط می کند.
AngularJS کتابخانه ای است که در جاوااسکریپت نوشته شده است.
AngularJS به عنوان یک فایل جاوااسکریپت توزیع شده است. و می تواند به یک صفحه وب با تگ <script>
اضافه شود:
1 | <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> |
AngularJS صفحات html را با استفاده از ng-directives گسترش می دهد.
دستور Ng-app یک برنامه AngularJS را تعریف می کند.
دستورالعمل مدل ng مقدار کنترل های HTML از جمله input، select و textarea را به داده های برنامه متصل می کند.
دستور ng-bind اطلاعات برنامه را به نمای HTML متصل می کند.
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/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 به AngularJS اعلام می کند. که عنصر <div>
“مالک” یک برنامه AngularJS است.
دستورالعمل مدل ng مقدار فیلد ورودی را به نام متغیر برنامه متصل می کند.
دستور ng-bind محتویات عنصر <p>
را به نام متغیر برنامه متصل می کند.
همانطور که قبلا دیده اید، دستورات AngularJS دارای ویژگی های HTML با پیشوند ng هستند.
دستور ng-init ابتدا متغیرهای برنامه AngularJS را راه اندازی می کند.
1 2 3 4 5 | <div ng-app="" ng-init="firstName='John'"> <p>The name is <span ng-bind="firstName"></span></p> </div> |
1 2 3 4 5 | <div data-ng-app="" data-ng-init="firstName='John'"> <p>The name is <span data-ng-bind="firstName"></span></p> </div> |
عبارات AngularJS در داخل دو براکت نوشته می شوند: {{عبارات}}.
AngularJS خروجی را دقیقا در همان جای که عبارات نوشته شده نمایش می دهد.
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app=""> <p>My first expression: {{ 5 + 5 }}</p> </div> </body> </html> |
عبارات AngularJS داده های AngularJS را به HTML همانند دستورالعمل اتصال به ng متصل می کنند.
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/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 را کنترل می کند.
دستورالعمل Ng-app برنامه را تعریف می کند، دستورالعمل ng-controller کنترل کننده را تعریف می کند.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <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 برنامه های کاربردی را تعریف می کنند:
1 | var app = angular.module('myApp', []); |
کنترل کننده های AngularJS برنامه های کاربردی را کنترل می کند:
1 2 3 4 | app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe"; }); |
در این بخش حدودا با کلیات ساختار فریم ورک AngularJS و چگونگی استفاده از کدهای AngularJS در صفحه html ، آشنا شدید. امیدواریم که مطالب آموزش آشنایی بیشتر با AngularJS ، برای شما مفید بوده باشد.
علی حاتمی
سلام آقای اصغری میشه لطفا جواب سوال منو بدین.میشه یه مقایسه بین انگولار و جاوااسکریپت خام از نظر راحت بودن و منطقی بودن در یادگیری بکنید.مثلا بخش اعتبار سنجی واقعا در خود جاوا اسکریپت خیلی پیچیده هست حالا همین بخش چقدر فهمش در آنگولار منطقی تر هستش با سپاس فراوان
پی وی لرن
با سلام
همانطور که می دانید آنگولار یکی از فریم ورک های جاوا اسکریپت است و فریم ورک ها ساخته می شوند تا برنامه نویسان راحت تر و با امکانات بیشتر بتوانند از کدها استفاده کنند و کاربردهای بیشتری به آن زبان بدهند از این رو پیشنهاد می شود که این دوره را مشاهده کنید و از آن لذت ببرید و بخش های مربوط به اعتبار سنجی ها را هم در این دوره خودتان یک نگاهی داشته باشید و مقایسه کنید.