Как установить и использовать AngularJS в Ubuntu 20.04 | 18.04

Linux, Ubuntu

Как установить и использовать AngularJS в Ubuntu 20.04 | 18.04

 

AngularJS — это распространенное веб-приложение с открытым исходным кодом, используемое для создания мобильных и настольных приложений. AngularJS был создан Google в 2009 году при поддержке большого сообщества из более чем 1,7 миллиона разработчиков, авторов библиотек и создателей контента. AngularJS построен на языке TypeScript и включает:

  • Компонентная структура, позволяющая создавать масштабируемые веб-приложения.
  • Набор инструментов разработчика для разработки, обновления и тестирования кода.
  • Набор хорошо интегрированных библиотек с различными функциями, такими как управление формами, маршрутизация и т. Д.

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

  • Связывание данных Это позволяет автоматически синхронизировать данные между моделями и компонентами представления.
  • Возможность создавать полнофункциональные интернет-приложения (RIA).
  • Предлагает возможность писать приложения на JavaScript с использованием чистого контроллера представления модели (MVC).
  • Приложение, написанное на AngularJS, кроссбраузерно.
  • Deep Linking , функция кода, которая позволяет кодировать состояние приложения в URL-адресе, чтобы его можно было добавить в закладки.
  • Внедрение зависимостей — с помощью встроенного внедрения зависимостей можно легко разрабатывать, понимать и тестировать приложение.
  • Представление модели Независимо от того, что делит приложение на части, называемые моделями, представлением и контроллером, каждая из которых имеет свои обязанности.
  • AngularJS имеет шаблоны, которые отображаются из контроллера и модели, то есть из файла HTML.
  • Он имеет встроенные службы, такие как $ http, который используется для выполнения HTTP-запросов XML.

Хотя AngularJS имеет множество удивительных преимуществ, он все же имеет следующие недостатки:

  • Это не безопасно . В среде JavaSCript должна быть реализована аутентификация на стороне сервера для обеспечения безопасности приложения.
  • Не подлежит деградации в том смысле, что когда пользователь приложения отключает JavaScipt, у вас не останется ничего, кроме базовой страницы.

В этом руководстве я продемонстрирую, как установить и использовать AngularJS в Ubuntu 20.04 | 18.04.

Начиная

Для этого руководства убедитесь, что у вас есть:

  • Система Ubuntu 20.04 | 18.04.
  • Пользователь с привилегиями sudo.

Обновите и обновите свою систему Ubuntu 20.04 | 18.04.

sudo apt update && sudo apt upgrade

Шаг 1. Установите Node.js в Ubuntu 20.04 | 18.04

В этом руководстве мы будем использовать npm (Node Package Manager) для установки AngularJS в нашей системе. npm — это менеджер пакетов по умолчанию для Node.JS в системе Linux, поэтому он будет установлен в нашей Ubuntu 20.04 | 18.04, выполнив следующие действия.

Добавьте репозиторий Node.JS. Здесь мы установим Node.js 14 в Ubuntu 20.04 | 18.04, поскольку node.js 16 не поддерживается Angular.

curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -

Пример вывода:

## Installing the NodeSource Node.js 14.x repo...


## Populating apt-get cache...

+ apt-get update
Hit:1 http://ke.archive.ubuntu.com/ubuntu focal InRelease
Get:2 http://ke.archive.ubuntu.com/ubuntu focal-updates InRelease [114 kB]
............
## To install the Yarn package manager, run:
     curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | gpg --dearmor | sudo tee /usr/share/keyrings/yarnkey.gpg >/dev/null
     echo "deb [signed-by=/usr/share/keyrings/yarnkey.gpg] https://dl.yarnpkg.com/debian stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
     sudo apt-get update && sudo apt-get install yarn

Затем продолжите и установите node.js в Ubuntu 20.04 | 18.04 с помощью команды APT:

sudo apt install -y nodejs

Приведенная выше команда установит NPM, который является менеджером пакетов JavaScript. Подтвердите установку, проверив установленную версию node.js.

$ node -v
v14.18.1

Следующим шагом будет обновление версии npm.

sudo npm install npm@latest -g

Проверьте версию npm с помощью команды:

$ npm --version
8.1.0

Шаг 2 — Установите AngularJS в Ubuntu 20.04 | 18.04

После установки npm мы готовы установить AngulaJS в нашей системе. Установите последнюю версию AngulaJS в Ubuntu 20.04 | 18.04 с помощью команды:

sudo npm install -g @angular/cli

Последняя версия Angular CLI будет установлена ​​на ubuntu 20.04 | 18.04. После завершения установки проверьте установленную версию Angular.

$ ng version

Пример вывода:


     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 12.2.10
Node: 14.18.1
Package Manager: npm 8.1.0
OS: linux x64

Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1202.10 (cli-only)
@angular-devkit/core         12.2.10 (cli-only)
@angular-devkit/schematics   12.2.10 (cli-only)
@schematics/angular          12.2.10 (cli-only)

Кроме того, вы можете установить определенную версию в Angular CLI в Ubuntu 20.04 | 18.04.

#...Angular 8....#
npm install -g @angular/cli@8 
 
#...Angular 9....#
npm install -g @angular/cli@9  

#...Angular 10....#
npm install -g @angular/cli@10

Шаг 3 — Создайте новое приложение Angular

Установив Angular, вы можете использовать ngкоманду для создания нового приложения angular. В этом руководстве мы создадим демонстрационное приложение HelloWorld с использованием AngularJS.

 

ng new HelloWorld

Пример вывода:

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS [Press Enter]
CREATE HelloWorld/README.md (1057 bytes)
CREATE HelloWorld/.editorconfig (274 bytes)
CREATE HelloWorld/.gitignore (604 bytes)
CREATE HelloWorld/angular.json (3063 bytes)
CREATE HelloWorld/package.json (1075 bytes)
CREATE HelloWorld/tsconfig.json (783 bytes)
CREATE HelloWorld/.browserslistrc (703 bytes)
CREATE HelloWorld/karma.conf.js (1427 bytes)
CREATE HelloWorld/tsconfig.app.json (287 bytes)
CREATE HelloWorld/tsconfig.spec.json (333 bytes)
CREATE HelloWorld/src/favicon.ico (948 bytes)
CREATE HelloWorld/src/index.html (296 bytes)
CREATE HelloWorld/src/main.ts (372 bytes)
CREATE HelloWorld/src/polyfills.ts (2820 bytes)
CREATE HelloWorld/src/styles.css (80 bytes)
CREATE HelloWorld/src/test.ts (788 bytes)
CREATE HelloWorld/src/assets/.gitkeep (0 bytes)
CREATE HelloWorld/src/environments/environment.prod.ts (51 bytes)
CREATE HelloWorld/src/environments/environment.ts (658 bytes)
CREATE HelloWorld/src/app/app-routing.module.ts (245 bytes)
CREATE HelloWorld/src/app/app.module.ts (393 bytes)
CREATE HelloWorld/src/app/app.component.css (0 bytes)
CREATE HelloWorld/src/app/app.component.html (24617 bytes)
CREATE HelloWorld/src/app/app.component.spec.ts (1085 bytes)
CREATE HelloWorld/src/app/app.component.ts (214 bytes)
✔ Packages installed successfully.

Команда создает каталог HelloWorld в текущем каталоге со всеми необходимыми файлами для приложения Angular.

Шаг 4 — Обслуживание приложения Angular

На этом этапе ваше созданное приложение angular готово к работе. Перейдите в каталог и обслуживайте свое приложение, как показано ниже.

cd HelloWorld
ng serve

Пример вывода:

⠋ Generating browser application bundles (phase: setup)...Compiling @angular/core : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
✔ Browser application bundle generation complete.

Initial Chunk Files | Names         |      Size
vendor.js           | vendor        |   2.39 MB
polyfills.js        | polyfills     | 128.50 kB
main.js             | main          |  56.80 kB
runtime.js          | runtime       |   6.62 kB
styles.css          | styles        | 736 bytes

                    | Initial Total |   2.58 MB

Build at: 2021-10-16T11:12:44.459Z - Hash: fe2b801949a1c6690c83 - Time: 45098ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✔ Compiled successfully.
✔ Browser application bundle generation complete.

5 unchanged chunks

Build at: 2021-10-16T11:12:48.166Z - Hash: 88949641eec1a3868c26 - Time: 2723ms

✔ Compiled successfully.

Поскольку приложение angular работает на порту 4200, доступ к приложению через Интернет осуществляется по URL-адресу http://localhost:4200.

В качестве альтернативы вы можете изменить хост и порт, на котором работает приложение, используя:

ng serve --host 0.0.0.0 --port 8080

Здесь приложение работает на IP-адресе 0.0.0.0 и порту 8080.

Теперь вы можете добавлять зависимости, поддерживать PWA, запускать и смотреть тесты, а также создавать свое приложение для производства и т. Д.

Заключение

Вот и все! Мы успешно установили и использовали AngularJS в Ubuntu 20.04 | 18.04. Надеюсь, это руководство было вам полезно.