بخش های اصلی

آموزش AngularJS

آموزش AngularJS – ماژول ها

AngularJS از روش ماژولار پشتیبانی می کنه. ماژول ها برای جداسازی منطق ها: سرویس ها، controllerها، برنامه و ...، به کار می رن و کد را واضح می کنن. ماژول ها را در فایل هایِ js جداگانه ای ذخیره می کنیم و بصورت فایلِ module.js آن ها را نام گذاری می کنیم. در این مثال دو ماژول ایجاد می کنیم.

  •  ماژول برنامه – برای مقداردهی اولیه ی برنامه با کنترلر (ها) استفاده میشه.
  •  ماژولِ Controller – برای تعریفِ controller استفاده میشه.

ماژول برنامه

mainApp.js

var mainApp = angular.module("mainApp", []);

در ادامه با استفاده از تابعِ angular.module ، ماژولِ applicationای به نامِ  mainApp، تعریف می کنیم. یک آرایه ی خالی به آن پاس میدیم. این آرایه معمولاً حاویِ ماژول های وابسته ست.

ماژولِ Controller

studentController.js

mainApp.controller("studentController", function($scope) {
   $scope.student = {
      firstName: "Hamid",
      lastName: "Tadayoni",
      fees:500,
      
      subjects:[
         {name:'Physics',marks:70},
         {name:'Chemistry',marks:80},
         {name:'Math',marks:65},
         {name:'English',marks:75},
         {name:'Hindi',marks:67}
      ],
      
      fullName: function() {
         var studentObject;
         studentObject = $scope.student;
         return studentObject.firstName + " " + studentObject.lastName;
      }
   };
});

در ادامه با استفاده از تابعِ mainApp.controller، ماژولِ controllerای به نامِ studentController را تعریف کرده ایم.

استفاده از ماژول ها

<div ng-app = "mainApp" ng-controller = "studentController">
   ...
   <script src = "mainApp.js"></script>
   <script src = "studentController.js"></script>
	
</div>

در ادامه از ماژولِ application با استفاده از دستورِ ng-app و از ماژولِ controller با استفاده از دستورِ ng-controller، استفاده کرده ایم. mainApp.js و studentController.js را در صفحه ی html به نامِ main، import کرده ایم.

مثال

مثال زیر تمام ماژول های بالا را نشان میده.

testAngularJS.htm

<html>
   
   <head>
      <title>Angular JS Modules</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      <script src = "/angularjs/src/module/mainApp.js"></script>
      <script src = "/angularjs/src/module/studentController.js"></script>
      
      <style>
         table, th , td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
         }
         
         table tr:nth-child(odd) {
            background-color: #f2f2f2;
         }
         
         table tr:nth-child(even) {
            background-color: #ffffff;
         }
      </style>
      
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "mainApp" ng-controller = "studentController">
         
         <table border = "0">
            <tr>
               <td>Enter first name:</td>
               <td><input type = "text" ng-model = "student.firstName"></td>
            </tr>
         
            <tr>
               <td>Enter last name: </td>
               <td><input type = "text" ng-model = "student.lastName"></td>
            </tr>
         
            <tr>
               <td>Name: </td>
               <td>{{student.fullName()}}</td>
            </tr>
         
            <tr>
               <td>Subject:</td>
               <td>
               
                  <table>
                     <tr>
                        <th>Name</th>
                        <th>Marks</th>
                     </tr>
                  
                     <tr ng-repeat = "subject in student.subjects">
                        <td>{{ subject.name }}</td>
                        <td>{{ subject.marks }}</td>
                     </tr>
                  </table>
                  
               </td>
            </tr>
         </table>
         
      </div>
      
   </body>
</html>

mainApp.js

var mainApp = angular.module("mainApp", []);

studentController.js

mainApp.controller("studentController", function($scope) {
   $scope.student = {
      firstName: "Hamid",
      lastName: "Tadayoni",
      fees:500,
      
      subjects:[
         {name:'Physics',marks:70},
         {name:'Chemistry',marks:80},
         {name:'Math',marks:65},
         {name:'English',marks:75},
         {name:'Hindi',marks:67}
      ],
      
      fullName: function() {
         var studentObject;
         studentObject = $scope.student;
         return studentObject.firstName + " " + studentObject.lastName;
      }
   };
});

textAngularJS.htm را در مرورگر باز کنین. خروجی را ببینین.

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش AngularJS

Learn AngularJS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد