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.