MEAN.JS - Угловые компоненты в приложении

В этой главе мы добавим в приложение компоненты angular. Это интерфейс JavaScript для веб-интерфейса, который позволяет создавать динамические одностраничные приложения с использованием шаблона Model View Controller (MVC). В главе об архитектуре MEAN.JS вы видели, как AngularJS обрабатывает клиентский запрос и получает результат из базы данных.

Знакомство с AngularJS

AngularJS - это платформа веб-приложений с открытым исходным кодом, которая использует HTML в качестве языка шаблонов и расширяет синтаксис HTML для четкого выражения компонентов вашего приложения. AngularJS предоставляет некоторые базовые функции, такие как привязка данных, модель, представления, контроллеры, службы и т. Д. Для получения дополнительной информации об AngularJS перейдите по этой ссылке .

Вы можете сделать страницу приложением Angular, добавив на страницу Angular. Его можно добавить, просто используя внешний файл JavaScript, который можно либо загрузить, либо на него можно напрямую ссылаться в версии CDN.

Предположим, мы загрузили файл и сослались на него локально, добавив на страницу следующее:

<script src="angular.min.js"></script>

Теперь нам нужно сообщить Angular, что эта страница является приложением Angular. Следовательно, мы можем сделать это, добавив атрибут ng-app к тегу <html> или <body>, как показано ниже -

<html ng-app>
or
<body ng-app>

Приложение ng-app можно добавить к любому элементу на странице, но его часто помещают в теги <html> или <body>, чтобы Angular мог работать где угодно на странице.

Angular приложение как модуль

Для работы с приложением Angular нам нужно определить модуль. Это место, где вы можете сгруппировать компоненты, директивы, службы и т. Д., Которые связаны с приложением. На имя модуля ссылается атрибут ng-app в HTML. Например, мы назовем имя модуля приложения Angular как myApp и можем указать его в теге <html>, как показано ниже -

<html ng-app="myApp">

Мы можем создать определение для приложения, используя инструкцию ниже во внешнем файле JavaScript -

angular.module('myApp', []); //The [] parameter specifies dependent modules in the module definition

Определение контроллера

Приложение AngularJS полагается на контроллеры для управления потоком данных в приложении. Контроллер определяется с помощью директивы ng-controller .

Например, мы прикрепим контроллер к телу с помощью директивы ng-controller вместе с именем контроллера, который вы хотите использовать. В строке ниже мы используем имя контроллера как «myController».

<body ng-controller="myController">

Вы можете присоединить контроллер (myController) к модулю Angular (myApp), как показано ниже -

angular
.module('myApp')
.controller('myController', function() {
   // controller code here
});

Лучше использовать именованную функцию вместо анонимной для удобства чтения, повторного использования и тестирования. В приведенном ниже коде мы используем новую именованную функцию «myController» для хранения кода контроллера -

var myController = function() {
   // controller code here
};
angular
.module('myApp')
.controller('myController', myController);

Для получения дополнительной информации о контроллерах перейдите по этой ссылке .

Определение объема

Область видимости - это специальный объект JavaScript, который связывает контроллер с представлениями и содержит данные модели. В контроллерах доступ к данным модели осуществляется через объект $ scope. Функция контроллера принимает параметр $ scope, который был создан Angular, и предоставляет прямой доступ к модели.

В приведенном ниже фрагменте кода указано, как обновить функцию контроллера для получения параметра $ scope и установить значение по умолчанию -

var myController = function($scope) {
   $scope.message = "Hello World...";
};

Для получения дополнительной информации о контроллерах перейдите по этой ссылке . В следующей главе мы начнем создавать одностраничное приложение с помощью Angular.