Angularjs Module
Модуль определяет приложение.
Модуль - это контейнер для разных частей приложения.
Модуль является контейнером для контроллера приложения.
Контроллер обычно принадлежит модулю.
Создать модули
Вы можете создавать модули через Angular.Module функция AngularJS:
<div ng-app = "myApp"> ... </div> <script> var app = angular.module ("myApp", []); </script>Параметр «MyApp» соответствует элементу HTML, который выполняет приложение.
Теперь вы можете добавить контроллеры, инструкции, фильтры и т. Д. В вашем приложении AngularJS.
Добавить контроллер
Вы можете использовать директиву NG-Controller для добавления контроллера приложения:
AngularJs Extance
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-pp = "myapp" ng-controller = "myctrl"> {{firstname + "" + lastname}} </div> <script> var app = angular.module ("myApp", []); app.controller ("myctrl", функция ($ scope) {$ scope.firstname = "johla"; $ scope. "Doe";}); </script> </body> </html>Эффект бега:
Джон Доу
Вы можете узнать больше о контроллерах в главе контроллера AngularJS.
Добавить команду
AngularJS предоставляет много встроенных инструкций, которые вы можете использовать для добавления функциональности в ваше приложение.
Для получения полной инструкции, пожалуйста, обратитесь к справочнику AngularJS.
Кроме того, вы можете использовать модули для добавления собственных инструкций для вашего приложения:
AngularJs Extance
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-pp = "myapp" runoob-directive> </div> <script> var app = angular.module ("myApp", []); app.directive ("runoobdirective", function () {return {template: "Я создал его в конструкторе директивы!"};}); </script> </body> </html>Результаты работы:
Я создал его в конструкторе директивы!
Вы можете узнать больше о директивах в главе директив AngularJS.
Модули и контроллеры включены в файлы JS
Как правило, приложения AngularJS включают модули и контроллеры в файлах JavaScript.
В следующем примере «myApp.js» содержит определитель модуля приложения, а файл "myctrl.js" содержит контроллер:
AngularJs Extance
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-pp = "myapp" ng-controller = "myctrl"> {{firstname + "" + lastname}} </div> <script src = "myApp.js"> </script> <script src = "myctrl.js"> </script> </body> </html>Результаты работы:
Джон Доу
myApp.js
var app = angular.module ("myApp", []);
Примечание В определении модуля параметр [] используется для определения зависимостей модуля.
Кроншеты [] указывают, что у модуля нет зависимости. Если есть зависимость, название зависимости будет записано в скобках.
myctrl.js
app.controller ("myctrl", function ($ scope) {$ scope.firstname = "John"; $ scope.lastname = "doe";});Функции влияют на глобальное пространство имен
Глобальные функции следует избегать в JavaScript. Потому что они легко перезаписаны другими файлами сценариев.
Модуль AngularJS позволяет охватывать все функции под этим модулем, избегая этой проблемы.
Когда будет загружена библиотека?
Примечание. В нашем случае все библиотеки AngularJS загружаются в главу HTML -документа.
Для применений HTML обычно рекомендуется разместить все сценарии в нижней части элемента <body>.
Это увеличит скорость загрузки веб -страницы, поскольку загрузка HTML не подлежит загрузке сценариев.
В наших экземплярах множества Angularjs вы увидите, что библиотека AngularJS загружена в область <head> документа.
В нашем случае AngularJS загружается в элемент <головы>, потому что вызов к углованию. Модуль может быть сделан только после загрузки библиотеки.
Другое решение состоит в том, чтобы загрузить библиотеку AngularJS в элемент <body>, но она должна быть помещена перед вашим сценарием AngularJS:
AngularJs Extance
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-pp = "myapp" ng-controller = "myctrl"> {{firstname + "" + lastname}} </div> <script> var app = angular.module ("myApp", []); app.controller ("myctrl", функция ($ scope) {$ scope.firstname = "johla"; $ scope. "Doe";}); </script> </body> </html>Результаты работы:
Джон Доу
Выше представляет собой сборник информации о модуле AngularJS, и мы будем продолжать добавлять ее позже. Я надеюсь, что это может помочь программировать друзей.