AngularJS - Модули

Здравствуйте, будущие программисты! Сегодня мы погружаемся в мир модулей AngularJS. Не волнуйтесь, если вы новички в программировании; я проведу вас через это шаг за шагом, как я делал это для countless студентов на протяжении многих лет моего преподавания. Давайте отправимся в это увлекательное путешествие вместе!

AngularJS - Modules

Что такое модули AngularJS?

Представьте, что вы строите巨型 конструктор Lego. Вместо того чтобы пытаться построить все сразу, вы, вероятно, создадите более мелкие, управляемые части, которые вы сможете позже объединить. Именно так и работают модули в AngularJS!

Модули в AngularJS являются контейнерами для различных частей вашего приложения. Они помогают вам организовать ваш код, делая его更容易 для поддержки и понимания. Представьте их как аккуратно промаркированные коробки, где вы храните различные функциональности вашего приложения.

Приложение-модуль

Приложение-модуль похоже на основную коробку, которая содержит все другие коробки. Это место, где начинается ваше приложение AngularJS. Давайте создадим наш первый модуль приложения:

var myApp = angular.module('myApp', []);

Вот что происходит в этой строке:

angular.module() — это функция, которая создает новый модуль.
'myApp' — это имя, которое мы даем нашему модулю.
Пустой массив [] — это место, где мы бы перечислили любые зависимости, которые может иметь наш модуль (об этом мы поговорим позже).

Контроллер-модуль

Теперь у нас есть наша основная коробка (приложение-модуль), добавим в нее несколько более мелких коробок. Одна из них — это контроллер-модуль. Контроллеры в AngularJS управляют данными вашего приложения. Вот как можно создать контроллер:

myApp.controller('MyController', function($scope) {
$scope.message = "Привет, AngularJS!";
});

Давайте разберем это:

myApp.controller() добавляет новый контроллер в наш модуль myApp.
'MyController' — это имя, которое мы даем этому контроллеру.
Функция определяет, что делает этот контроллер.
$scope — это особый объект, который позволяет контроллеру взаимодействовать с视图 (HTML).

Использование модулей

Теперь, когда мы создали наши модули, как мы их действительно используем? Это проще, чем вы можете подумать! Вам просто нужно сослаться на них в вашем HTML. Вот как это делается:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Мое приложение AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MyController">
<h1>{{message}}</h1>
<script src="app.js"></script>
</body>
</html>

Обратите внимание на несколько ключевых моментов здесь:

ng-app="myApp" сообщает AngularJS, где живет наше приложение.
ng-controller="MyController" применяет наш контроллер к телу.
{{message}} отобразит сообщение, которое мы определили в нашем контроллере.

Пример

Давайте соберем все вместе с немного более сложным примером. Мы создадим простое приложение списка дел:

// app.js
var todoApp = angular.module('todoApp', []);

todoApp.controller('TodoController', function($scope) {
$scope.todos = [
{text: 'Изучить AngularJS', done: false},
{text: 'Создать приложение', done: false}
];

$scope.addTodo = function() {
$scope.todos.push({text: $scope.newTodo, done: false});
$scope.newTodo = '';
};
});

А вот соответствующий HTML:

<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>Список дел</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="TodoController">
<h2>Список дел</h2>
<ul>
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span ng-class="{'done': todo.done}">{{todo.text}}</span>
</li>
</ul>
<form ng-submit="addTodo()">
<input type="text" ng-model="newTodo" placeholder="Добавить новое дело">
<input type="submit" value="Добавить">
</form>
<script src="app.js"></script>
</body>
</html>

Вывод

Когда вы запустите этот код, вы увидите простое приложение списка дел. Вы можете добавлять новые дела и отмечать их как выполненные. Волшебство происходит через взаимодействие между нашими модулями (определенными в app.js) и是我们的 HTML.

Заключение

И вот мы и добрались до этого! Мы совершили путешествие по миру модулей AngularJS, от базового понятия до рабочего приложения списка дел. Помните, что модули resemble Lego блоки - они помогают вам строить сложные структуры piece за piece. По мере того как вы будете продолжать свое приключение с AngularJS, вы откроете для себя еще больше способов использования модулей для создания мощных и эффективных веб-приложений.

Продолжайте практиковаться, оставайтесь любопытными и, что самое главное, получайте удовольствие от программирования! Кто знает? Следующее революционное приложение может быть у вас на кончиках пальцев!

Credits: Image by storyset