AngularJS поддерживает модульный подход. Модули используются для разделения логических функций, например, служб, контроллеров, приложений и т. Д. И сохраняют код чистым. Мы определяем модули в отдельных файлах js и называем их в файле module.js. В этом примере мы собираемся создать два модуля.

  • Application Module - используется для инициализации приложения с помощью контроллера (ов).
  • Модуль контроллера - используется для определения контроллера.

Прикладной модуль

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

Здесь мы объявили приложение mainApp модуль , используя angular.module функцию. Мы передали пустой массив. Этот массив обычно содержит зависимые модули.

Контрольный модуль

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

Здесь мы объявили модуль контроллера studentController, используя функцию mainApp.controller.

Внимание!!!

Если примеры не отображаются на странице или искажены, проверьте не блокирует ли их браузер!

Opera

Свободу АНГУЛЯРУ в Opera!!! )))

Google Chrome

Свободу АНГУЛЯРУ в Google Chrome!!! )))

Mozilla Firefox

Свободу АНГУЛЯРУ в Mozilla Firefox!!! )))

Yandex

Свободу АНГУЛЯРУ в Yandex!!! )))

Использование модулей

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

Здесь мы использовали модуль приложения, используя директиву и контроллер ng-app, используя директиву ng-controller. Мы импортировали mainApp.js и studentController.js на главную страницу html.

Пример

В следующем примере будут показаны все вышеупомянутые модули.

<html>
  
   <head>
      <title>Angular JS Modules</title>
      <script src = "http://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: "Ivan",
      lastName: "Ivanov",
      fees:500,
     
      subjects:[
         {name:'Physics',marks:70},
         {name:'Chemistry',marks:80},
         {name:'Math',marks:65},
         {name:'English',marks:75}
         
      ],
     
      fullName: function() {
         var studentObject;
         studentObject = $scope.student;
         return studentObject.firstName + " " + studentObject.lastName;
      }
   };
});
Angular JS Modules

AngularJS Sample Application

Enter first name:
Enter last name:
Name: {{student.fullName()}}
Subject:
Name Marks
{{ subject.name }} {{ subject.marks }}
Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
Ok

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!



Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
Ok