Компьютерапия

AngularJS - Модули

Категория: AngularJS
Просмотров: 2702

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 }}

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok



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

Новые статьи

Предыдущие статьи

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok