AngularJS стал одним из самых надежных фреймворков приложений с момента его разработки в 2009 году и последующей поддержки Google в 2010 году. Очень высока вероятность того, что вы использовали хотя бы одного, если не всех, из нескольких самых известных пользователей AngularJS сегодня: Нетфликс, Paypal и Youtube. Хотя все мы знакомы с веб-приложениями, живущими в наше время, подавляющее большинство практически не имеет ни малейшего представления о том, что такое фреймворк или что происходит за кулисами. Фреймворки — это программное обеспечение, разработанное и используемое разработчиками для создания приложений, тем самым предоставляя разработчикам базовую структуру для работы при разработке динамических веб-приложений.
Известный и называемый одностраничным приложением SPA, AngularJS расширяет атрибуты HTML с помощью ng-директив и связывает данные с HTML с помощью выражений. Называемая SPA, поскольку логика приложения и взаимодействия происходят на одной странице, эта единственная страница также будет динамически загружать новый контент и данные. Привязка модели данных и такие функции, как внедрение зависимостей, помогут вам сжать код, который вам нужно будет написать. Наличие возможностей модульного тестирования Karma для Angular позволяет вам создавать более мелкие и простые в тестировании части кода.
Имея дизайн MVC, модель-представление-контроллер, Angular позволяет вам следовать шаблону разделения логического уровня, уровня данных и уровня представления на отдельные разделы. Модель представляет собой слой данных, и внутри этого слоя может быть представлено что угодно. Синтаксис основной модели применяется с директивой ng-app следующим образом:
<body data-ng-app=”AngularJS”>
Основная модель связана с телом HTML, потому что само приложение является основной моделью, поэтому AngularJS сообщает, что все, что находится в элементе body, будет частью нашего приложения.
Контроллеры — это объекты JavaScript, созданные с помощью конструкторов объектов JavaScript. Эти контроллеры, за неимением лучшего термина, управляют приложениями, созданными AngularJS. Использование директивы ng-controller позволяет определить контроллер. Контроллер будет вызываться с объектом $scope, в котором поле ввода имени будет «Калеб», а поле ввода фамилии — «Робертс».
<div data-ng-app=”myApp” data-ng-controller=”theControl”>
First Name: <input type=”text” data-ng-model=”firstName”><br>
Last Name: <input type=”text” data-ng-model=”lastName”><br>
<br>
Full Name: {{firstName + “ “ + lastName}}
</div>
<script>
var myApp = angular.module(‘myApp’, []);
app.controller(‘theControl’, function($scope) {
$scope.firstName = “Caleb”;
$scope.lastName = “Roberts”;
});
</script>
Наконец, у нас есть представления, которые представляют уровень представления, предоставляемый конечным пользователям. Комбинация маршрутов и представлений помогает связать различные представления с контроллерами. Возможность разделить приложение на разные представления, используя маршрутизацию для загрузки других частей приложения, позволяет пользователю иметь доступ к двум представлениям на одной странице, а не к двум отдельным веб-страницам, в соответствии с духом инфраструктуры MVC.
AngularJS предлагает множество встроенных сервисов, которые представляют собой функции, доступные вам в приложении AngularJS. Из-за постоянного контроля со стороны AngularJS использование встроенных сервисов позволяет корректно выполнять изменения и события, что делает их предпочтительными для AngularJS по сравнению с объектами, которые уже находятся в DOM.
Вот и все, краткий и базовый обзор AngularJS. Есть так много всего, что нужно узнать, и я едва поцарапал поверхность тем, что я рассмотрел сегодня. По моему опыту, испачкать руки и возиться с кодом — лучший способ изучить и понять множество нюансов AngularJS. Со временем и практикой сложности программного обеспечения будут раскрыты, так что идите и кодируйте!
