Подробное объяснение модульизации в AngularJS и пример кода

У AngularJS есть несколько основных свойств, таких как:

　　1 MVC

　　2 Модулизация

　　3 Система инструкций

　　4 Двусторонняя привязка данных

Итак, в этой статье рассмотрим модульизацию AngularJS.

　　Сначала давайте поговорим о том, почему нужно реализовать модульизацию:

　　1 Увеличивает повторное использование модулей

　　2 Через определение модулей можно реализовать пользовательскую загрузочную последовательность

　　3 В единичном тестировании не нужно загружать все содержимое

　　В предыдущих примерах код контроллера напрямую писался в тег script, таким образом объявленные функции являются глобальными, что显然 не лучшее решение.

　　Ниже посмотрим, как выполняется модульизация:　　　　　　　

 <script type="text/javascript">
      var myAppModule = angular.module('myApp', []);
      myAppModule.filter('test', function() {
        return function(name) {
          return 'hello, '+name+'!';
        });
      });
      myAppModule.controller('myAppCtrl', ['$scope', function($scope) {
        $scope.name='xingoo';
      });
    </script>

　　Сначала, через глобальную переменную angular создается модуль myAppModule

angular.module('myApp',[]);

　　Первый параметр - это имя связанного приложения app, это обозначает точку входа angular на странице, аналогично функции main.

　　Второй параметр [] указывает на модули, на которые зависит.

　　Ниже посмотрим, как использовать модули!

<!doctype html>
<html ng-app="myApp">
  <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
  </head>
  <body>
    <div ng-controller="myAppCtrl">
      {{name | test }}
    </div>
    <script type="text/javascript">
      var myAppModule = angular.module('myApp', []);
      myAppModule.filter('test', function() {
        return function(name) {
          return 'hello, '+name+'!';
        });
      });
      myAppModule.controller('myAppCtrl', ['$scope', function($scope) {
        $scope.name='xingoo';
      });
    </script>
  </body>
</html>

　　Прямо привяжите myApp к ng-app, и все будет готово.

　　В script мы создали фильтр и контроллер через модуль.

　　Функция фильтра - добавление строковых修饰ок.

　　Роль контроллера - инициализация переменных.

　　Результат выполнения программы:

　　　　　　　　　 Вот так и собраны материалы по модульизации AngularJS, в будущем будут продолжены добавления соответствующих материалов, спасибо всем за поддержку нашего сайта!

Заявление: содержимое статьи взято из Интернета, авторские права принадлежат соответствующему автору, контент предоставлен пользователями Интернета, сайт не обладает правами собственности, материал не был отредактирован вручную, и сайт не несет ответственности за соответствующие юридические вопросы. Если вы обнаружите материалы,涉嫌侵犯版权， пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (во время отправки письма замените # на @) для сообщения о нарушении,并提供 соответствующие доказательства. При подтверждении факта нарушения сайт незамедлительно удалят涉嫌侵权的内容。

Основной учебник

Рекомендуем к просмотру