AngularJS - это надежный фреймворк JavaScript с открытым исходным кодом, разработанный компанией Google. Он широко используется для создания динамических одностраничных приложений (SPA) - типа веб-приложений или веб-сайтов, которые взаимодействуют с пользователем путем динамического переписывания текущей веб-страницы, а не загрузки новых страниц с сервера.
AngularJS вращается вокруг концепции расширения синтаксиса HTML для краткого и четкого выражения компонентов приложения. Это позволяет разработчикам создавать хорошо структурированный, многократно используемый код, что в конечном итоге делает процесс разработки более эффективным, а приложение - более удобным для обслуживания.
Ключевые особенности AngularJS
Основные характеристики и отличия AngularJS включают:
- Декларативный стиль кода: AngularJS использует декларативную парадигму для создания паттернов. Это делает код более легковесным, легко читаемым и понятным, а также менее сложным, что в конечном итоге повышает качество кода и эффективность разработки.
- Двустороннее связывание данных: AngularJS предоставляет механизм двусторонней привязки данных, который синхронизирует модель и представление. Когда данные в модели изменяются, представление отражает это изменение, и наоборот.
- Инъекция зависимостей (DI): AngularJS имеет встроенную инъекцию зависимостей, которая облегчает разработку, понимание и тестирование приложения, помогая разработчикам в инстанцировании и соединении различных компонентов веб-приложения.
- Директивы: В AngularJS директивы являются уникальной и мощной функцией, которая позволяет разработчикам изобретать новый синтаксис HTML, специфичный для их приложения.
- Тестируемость: AngularJS разработан с учетом требований к тестируемости. Благодаря инъекции зависимостей и макетам данных вы можете структурировать свой код так, чтобы его было легко тестировать.
- Модель и представление независимо друг от друга (MVW): AngularJS следует паттерну проектирования MVW. Это гибкая архитектура, которая адаптируется к потребностям вашего проекта, который может быть MVC (Model-View-Controller), MVVM (Model-View-ViewModel) или другим.
- Сообщество и поддержка Google: Будучи разработанным Google, AngularJS имеет сильную поддержку сообщества и постоянное обновление версий. Это гарантирует, что технология остается актуальной и востребованной в быстро развивающейся индустрии веб-разработки.
Чтобы полностью понять всю мощь и сложность AngularJS, лучше всего погрузиться в практическую работу. В следующем руководстве будет показано, как установить AngularJS на Ubuntu 22.04 Jammy Jellyfish или Ubuntu 20.04 Focal Fossa с помощью команд CLI.
Установка Node.js
Прежде чем приступить к установке AngularJS, необходимо правильно настроить среду. Одним из основных требований для AngularJS является Node.js, среда выполнения, позволяющая запускать JavaScript на сервере. В этом разделе мы рассмотрим шаги по установке Node.js на систему Ubuntu.
Шаг 1: Обновление Ubuntu
Наше путешествие начинается с обновления существующих системных пакетов. Этот шаг гарантирует, что все установленные пакеты в вашей системе Ubuntu обновлены до последних версий, таким образом снижая возможные конфликты пакетов. Следующая команда объединяет процессы обновления и обновления:
| 1 | sudo apt update && sudo apt upgrade |
Шаг 2: Установка основных пакетов
Далее мы должны убедиться, что все необходимые пакеты для процесса установки установлены. Одним из таких пакетов является curl, инструмент командной строки, используемый для передачи данных с помощью URL-адресов. Он будет использоваться для загрузки скрипта настройки репозитория NodeSource в последующих шагах. Следующая команда устанавливает curl:
| 1 | sudo apt install curl git wget -y |
Шаг 3: Импортирование репозитория NodeSource
AngularJS поддерживается только в версиях Node.js с длительной поддержкой (LTS). Чтобы убедиться, что мы установили LTS-версию, мы добавим в нашу систему репозиторий NodeSource, в котором находятся эти версии.
Команда ниже загружает сценарий настройки репозитория NodeSource и сразу же выполняет его. Это беспроблемный способ импорта репозитория:
| 1 | curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo bash - |
Как только репозиторий будет добавлен, рекомендуется обновить списки пакетов нашей системы, чтобы отразить это изменение:
| 1 | sudo apt update |
Шаг 4: Установка Node.js LTS
Добавив репозиторий NodeSource, мы теперь готовы установить Node.js. Команда для этого проста:
| 1 | sudo apt install nodejs |
Шаг 5: Проверка установки Node.js
После установки Node.js нам необходимо подтвердить, что установка прошла успешно и что у нас установлена правильная версия. Выполнение следующей команды покажет установленную версию Node.js:
| 1 | node --version |
Установка AngularJS
Установив Node.js, мы можем приступить к установке AngularJS. AngularJS использует инструмент под названием Angular CLI (интерфейс командной строки), который нам необходимо установить. Этот инструмент помогает упростить разработку приложений Angular, предоставляя полезные команды для создания компонентов, сервисов и многого другого. В этом разделе мы проведем вас через шаги по обновлению менеджера пакетов Node (NPM), установке Angular CLI и подтверждению его установки.
Шаг 1: Обновление менеджера пакетов Node (NPM)
NPM - это менеджер пакетов для Node.js. Это полезный инструмент, который позволяет нам устанавливать библиотеки и пакеты для наших проектов. Прежде чем приступить к установке Angular CLI, мы должны убедиться, что NPM обновлен. Это важно, так как гарантирует, что мы используем последние функции и исправления безопасности NPM.
Вы можете обновить NPM до последней версии, выполнив следующую команду:
| 1 | sudo npm install npm@latest -g |
Флаг -g означает "глобальный", указывая на то, что мы хотим обновить NPM, установленный в системе, а не только в нашем текущем проекте.
Шаг 2: Установка Angular CLI
С обновленным NPM мы готовы к установке инструмента Angular CLI. Как уже говорилось ранее, этот инструмент значительно упрощает работу с AngularJS, предоставляя полезные команды, которые помогают создавать компоненты, сервисы и многое другое. Вы можете установить Angular CLI глобально с помощью следующей команды:
| 1 | sudo npm install -g @angular/cli |
Флаг -g гарантирует, что Angular CLI установлен глобально и доступен из любой директории вашей системы.
Шаг 3: Проверка установки Angular CLI
После установки Angular CLI хорошей практикой является проверка установки. Этот шаг подтверждает, что Angular CLI был установлен правильно и готов к использованию. Вы можете проверить версию Angular CLI, установленную в вашей системе, с помощью следующей команды:
| 1 | ng version |
Пример вывода, ожидаемого при использовании команды ng в терминале Ubuntu Linux:
Эта команда выводит версию установленного Angular CLI, что также подтверждает, что процесс установки прошел успешно.
Создание проекта AngularJS
После успешной установки Node.js и Angular CLI вы полностью готовы к созданию своего первого проекта AngularJS. Angular CLI - это мощный инструмент, который поможет нам автоматизировать этот процесс. Он создаст новый проект с базовым шаблоном, структурой каталогов и основными файлами, позволяя вам сосредоточиться на уникальных аспектах вашего приложения. Давайте приступим и создадим проект AngularJS.
Шаг 1: Создание нового проекта AngularJS
Создать новый проект AngularJS так же просто, как выполнить команду в Angular CLI. Чтобы сгенерировать новый проект, перейдите в каталог, в котором вы хотите создать проект, и выполните следующую команду:
| 1 | ng new my-angular-app |
В этой команде my-angular-app - это имя нового проекта AngularJS. Не стесняйтесь заменить его на имя по своему усмотрению.
Angular CLI задаст несколько вопросов о конфигурации вашего нового проекта - нужно ли применять более строгую проверку типов, добавить маршрутизацию Angular и выбрать формат таблицы стилей для использования. Вы можете выбрать опции в соответствии с требованиями вашего проекта.
Шаг 2: Перейдите в каталог нового проекта
После успешного создания проекта перейдите в каталог проекта с помощью команды cd (сменить каталог):
| 1 | cd my-angular-app |
Пожалуйста, замените my-angular-app на имя, которое вы выбрали для своего проекта в предыдущем шаге.
Шаг 3: Обслуживаем приложение
Теперь, когда вы находитесь в директории вашего проекта, вы можете обслуживать ваше приложение с помощью Angular CLI. Это означает, что вы собираетесь запустить сервер разработки, и ваше приложение будет создаваться и обслуживаться из памяти, доступной через веб-браузер. Вы можете обслуживать приложение, выполнив:
| 1 | ng serve |
Эта команда запускает сервер, следит за вашими файлами и перестраивает приложение по мере внесения изменений в эти файлы. По умолчанию приложение будет обслуживаться на http://localhost:4200/.
Для локальных сред используйте localhost, а для доменов - имя домена.
Пример вывода команды ng serve в терминале Ubuntu Linux:
Доступ к веб-интерфейсу AngularJS
После создания и обслуживания вашего проекта AngularJS следующим шагом будет доступ к веб-интерфейсу вашего приложения. AngularJS, будучи фреймворком для создания одностраничных приложений (SPA), обеспечивает бесшовный пользовательский опыт. Встроенный сервер, предоставляемый Angular CLI, упрощает предварительный просмотр вашего приложения в браузере. В этом разделе мы обсудим доступ к вашему приложению AngularJS.
Шаг 1: Понимание локального сервера
Когда вы выполнили команду ng serve в предыдущем разделе, Angular CLI создал локальный сервер разработки и начал обслуживать ваше приложение. По умолчанию этот сервер работает на порту 4200 вашей локальной машины. Это означает, что доступ к вашему приложению AngularJS можно получить, указав в веб-браузере адрес http://localhost:4200.
Шаг 2: Открытие приложения в веб-браузере
Чтобы увидеть ваше приложение AngularJS в действии, откройте веб-браузер по своему выбору и зайдите на сайт http://localhost:4200. Вы должны увидеть приветственную страницу, которая подтверждает, что ваш проект AngularJS был успешно настроен и правильно обслуживается.
Страница, которую вы видите, является шаблоном по умолчанию, предоставляемым Angular CLI для новых проектов. Это отличная отправная точка для разработки вашего приложения. По мере внесения изменений в файлы проекта приложение будет автоматически перезагружаться, благодаря функции live-reload, предоставляемой Angular CLI.
Шаг 3: Изучение структуры приложения
Теперь, когда вы получили доступ к вашему приложению AngularJS, было бы полезно ознакомиться со структурой проекта AngularJS. Папка src/ в каталоге проекта - это место, где вы будете проводить большую часть времени разработки. Она содержит все исходные файлы приложения, включая модули, компоненты, таблицы стилей, изображения и многое другое.
Папка app/ внутри src/ - это место, где находится логика приложения. Сюда входят главный файл app.module.ts, который является корневым модулем, и файл app.component.ts, который является корневым компонентом.
По мере разработки приложения вы будете добавлять новые компоненты, сервисы и модули, делая ваше приложение более сложным и многофункциональным.
Пример первого запуска тестового проекта AngularJS Web UI в Ubuntu Linux:
Заключение
В этом руководстве мы подробно рассмотрели установку и настройку AngularJS на Ubuntu Linux, в частности, версии 22.04 Jammy Jellyfish и 20.04 Focal Fossa. Мы продемонстрировали установку Node.js LTS, которая является необходимым условием для работы AngularJS. Мы также коснулись установки самого AngularJS с помощью npm и процесса создания нового проекта AngularJS с помощью Angular CLI. Наконец, мы обсудили, как получить доступ к веб-интерфейсу AngularJS, что является основополагающим шагом для проверки вашей установки и начала разработки.
Мы надеемся, что это руководство было поучительным и послужит прочной основой для вашего путешествия по разработке AngularJS на Ubuntu Linux. Сочетание AngularJS и Ubuntu Linux представляет собой мощную платформу для создания и развертывания надежных, масштабируемых веб-приложений. Мы надеемся, что это руководство вдохновит вас на дальнейшие исследования и создание удивительных приложений с помощью AngularJS.