Latest web development tutorials

AngularJS модуль

Модуль определяет приложение.

Модуль представляет собой контейнер, в различных частях приложения.

Модуль контроллера является приложением контейнера.

Контроллер обычно принадлежат к модулю.


Создайте модуль

Вы можете создать модуль по AngularJS изangular.module функции:

<Div нг-приложение = "MyApp "> ... </ DIV>

<Script>

вар приложение = angular.module ( "MyApp" , []);

</ Script>

Параметр "MyApp" соответствует исполнению приложения HTML элементов.

Теперь вы можете добавить контроллер инструкции, фильтры и т.д. в AngularJS приложениях.


Добавить контроллер

Вы можете использовать инструкциинг-контроллера для добавления приложений контроллера:

AngularJS примеры

<Div нг-приложение = "MyApp " нг-контроллер = "myCtrl" >
{{FirstName + "" + LastName }}
</ Div>

<Script>

вар приложение = angular.module ( "MyApp" , []);

app.controller ( "myCtrl", функция ( $ сфера) {
$ Scope.firstName = "Джон";
$ Scope.lastName = "Doe";
});

</ Script>

Попробуйте »

Вы можете AngularJS контроллеры узнать больше знаний о секции контроллера.


Добавить инструкцию

AngularJS предоставляет множество встроенных команд, вы можете использовать их для добавления функциональности к вашему приложению.

Полные инструкции можно найти в содержании AngularJS справочного руководства .

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

AngularJS примеры

<Div нг-приложение = "MyApp " w3big-директива> </ DIV>

<Script>

вар приложение = angular.module ( "MyApp" , []);

app.directive ( "w3bigDirective", функция ( ) {
вернуться {
Шаблон: "Я создал конструктор инструкции!"
};
});
</ Script>

Попробуйте »

Вы можете AngularJS директивы узнать больше знаний о разделе инструкции.


Модули и контроллеры, включенные в файл JS

Обычно AngularJS прикладной модуль и контроллер включается в файл JavaScript.

В следующих примерах "myApp.js" содержит определение модулей прикладных программ, файл "myCtrl.js" содержит контроллер:

AngularJS примеры

<! DOCTYPE HTML>
<HTML>
<Script SRC = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ скрипт>
<Body>

<Div нг-приложение = "MyApp " нг-контроллер = "myCtrl">
{{FirstName + "" + LastName }}
</ Div>

<Script SRC = "myApp.js"> </ скрипт>
<Script SRC = "myCtrl.js"> </ скрипт>

</ 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-приложений, как правило, рекомендуется всем скрипты размещаются в нижней части элемента <тела>.

Это позволит увеличить скорость загрузки страницы, так как HTML не подлежит загрузке скрипт для загрузки.

В нашем примере несколько AngularJS, вы увидите AngularJS библиотека загружается в <HEAD> области документа.

В нашем примере, AngularJS в элементе <HEAD> загружается, так как вызов angular.module выполняться только после завершения загрузки библиотеки.

Другим решением является загрузить AngularJS библиотеку элемент <Body>, но они должны быть размещены в передней части вашего AngularJS сценария:

AngularJS примеры

<! DOCTYPE HTML>
<HTML>
<Head>
<Meta Charset = "UTF-8 ">
<Script SRC = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ скрипт>
</ Head>
<Body>

<Div нг-приложение = "MyApp " нг-контроллер = "myCtrl">
{{FirstName + "" + LastName }}
</ Div>
<Script>
вар приложение = angular.module ( "MyApp", []);
app.controller ( "myCtrl", функция ($ сфера) {
$ Scope.firstName = "Джон";
$ Scope.lastName = "Doe";
});
</ Script>

</ Body>
</ HTML>

Попробуйте »