Меню Рубрики

Установка angular на linux

Как установить Angular CLI на Linux

Angular является открытым исходным кодом, популярных и высоко расширяемая структура фронтенд-разработка приложений, используемых для создания мобильных и веб — приложений с использованием TypeScript / JavaScript и другие распространенные языки.

Angular хорошо подходит для создания небольших и крупных приложений с нуля. Одним из ключевых компонентов Angular платформы для помощи разработки приложений являются Angular CLI утилиты — это простой и легкий в использовании инструмент командной строки для создания, управления, создания и тестирование Angular приложений.

В этой статье мы расскажем , как установить Angular инструмент командной строки на систему Linux и узнать некоторые основные параметры этого инструмента.

Установка Node.js в Linux

Для того, чтобы установить Angular CLI , вам необходимо установить последнюю версию Node.js .

Установка Node.js на Ubuntu

$ sudo curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash — [for Node.js version 12]$ sudo curl -sL https://deb.nodesource.com/setup_11.x | sudo -E bash — [for Node.js version 11]$ sudo curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash — [for Node.js version 10]$ sudo apt install -y nodejs

Установка Node.js на Debian

# curl -sL https://deb.nodesource.com/setup_12.x | bash — [for Node.js version 12]# curl -sL https://deb.nodesource.com/setup_11.x | bash — [for Node.js version 11]# curl -sL https://deb.nodesource.com/setup_10.x | bash — [for Node.js version 10]# apt install -y nodejs

Установка Node.js на CentOS / RHEL и Fedora

# curl -sL https://rpm.nodesource.com/setup_12.x | bash — [for Node.js version 12]# curl -sL https://rpm.nodesource.com/setup_11.x | bash — [for Node.js version 11]# curl -sL https://rpm.nodesource.com/setup_10.x | bash — [for Node.js version 10]# yum -y install nodejs
# dnf -y install nodejs [ RHEL 8 . Fedora 22+ versions]

Кроме того , чтобы скомпилировать и установить собственные дополнения от NPM вам , возможно , потребуется установить средства разработки в вашей системе следующим образом

$ sudo apt install -y build-essential [Для Debian/Ubuntu]# yum install gcc-c++ make [Для CentOS/RHEL]# dnf install gcc-c++ make [Для RHEL 8/Fedora 22+]

Установка Angular CLI в Linux

После того как вы Node.js и NPM установлены мы можем установить Angular CLI с помощью менеджера пакетов NPM следующим образом ( -g флаг означает установить общесистемный инструмент, который могут использовать все пользователи системы ).

# npm install -g @angular/cli
ИЛИ
$ sudo npm install -g @angular/cli

Создание проекта с помощью Angular CLI в Linux

В этом разделе мы покажем , как создавать, строить и обслуживать новый, основной Angular проект. Во- первых, перейти в WebRoot директорию вашего сервера, а затем инициализировать новый Angular приложение следующим образом (следуйте инструкциям):

# cd /var/www/html/
# ng new tecmint-app #as root
OR
$ sudo ng new tecmint-app #non-root user

Затем, перейдите в каталог приложений, который только что был создан и служит приложение, как показано на рисунке.

# cd tecmint-app
# ls #list project files
# ng serve

Перед тем , как получить доступ к новому приложению из браузера, если у Вас работают службу брандмауэра, необходимо открыть порт 4200 в конфигурации брандмауэра , как показано на рисунке.

———- На CentOS/RHEL/Fedora ———-
# firewall-cmd —permanent —zone=public —add-port=4200/tcp
# firewall-cmd —reload

———- В Ubuntu/Debian ———-
$ sudo ufw allow 4200/tcp
$ sudo ufw reload

Теперь вы можете открыть веб-браузер и перейдите используя следующий адрес:

источник

Как установить Angular CLI на Linux

Angular является открытым исходным кодом, популярных и высоко расширяемая структура фронтенд-разработка приложений, используемых для создания мобильных и веб — приложений с использованием TypeScript / JavaScript и другие распространенные языки.

Angular хорошо подходит для создания небольших и крупных приложений с нуля. Одним из ключевых компонентов Angular платформы для помощи разработки приложений являются Angular CLI утилиты — это простой и легкий в использовании инструмент командной строки для создания, управления, создания и тестирование Angular приложений.

В этой статье мы расскажем , как установить Angular инструмент командной строки на систему Linux и узнать некоторые основные параметры этого инструмента.

Установка Node.js в Linux

Для того, чтобы установить Angular CLI , вам необходимо установить последнюю версию Node.js .

Установка Node.js на Ubuntu

$ sudo curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash — [for Node.js version 12]$ sudo curl -sL https://deb.nodesource.com/setup_11.x | sudo -E bash — [for Node.js version 11]$ sudo curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash — [for Node.js version 10]$ sudo apt install -y nodejs

Установка Node.js на Debian

# curl -sL https://deb.nodesource.com/setup_12.x | bash — [for Node.js version 12]# curl -sL https://deb.nodesource.com/setup_11.x | bash — [for Node.js version 11]# curl -sL https://deb.nodesource.com/setup_10.x | bash — [for Node.js version 10]# apt install -y nodejs

Установка Node.js на CentOS / RHEL и Fedora

# curl -sL https://rpm.nodesource.com/setup_12.x | bash — [for Node.js version 12]# curl -sL https://rpm.nodesource.com/setup_11.x | bash — [for Node.js version 11]# curl -sL https://rpm.nodesource.com/setup_10.x | bash — [for Node.js version 10]# yum -y install nodejs
# dnf -y install nodejs [ RHEL 8 . Fedora 22+ versions]

Кроме того , чтобы скомпилировать и установить собственные дополнения от NPM вам , возможно , потребуется установить средства разработки в вашей системе следующим образом

$ sudo apt install -y build-essential [Для Debian/Ubuntu]# yum install gcc-c++ make [Для CentOS/RHEL]# dnf install gcc-c++ make [Для RHEL 8/Fedora 22+]

Установка Angular CLI в Linux

После того как вы Node.js и NPM установлены мы можем установить Angular CLI с помощью менеджера пакетов NPM следующим образом ( -g флаг означает установить общесистемный инструмент, который могут использовать все пользователи системы ).

# npm install -g @angular/cli
ИЛИ
$ sudo npm install -g @angular/cli

Создание проекта с помощью Angular CLI в Linux

В этом разделе мы покажем , как создавать, строить и обслуживать новый, основной Angular проект. Во- первых, перейти в WebRoot директорию вашего сервера, а затем инициализировать новый Angular приложение следующим образом (следуйте инструкциям):

# cd /var/www/html/
# ng new tecmint-app #as root
OR
$ sudo ng new tecmint-app #non-root user

Затем, перейдите в каталог приложений, который только что был создан и служит приложение, как показано на рисунке.

# cd tecmint-app
# ls #list project files
# ng serve

Перед тем , как получить доступ к новому приложению из браузера, если у Вас работают службу брандмауэра, необходимо открыть порт 4200 в конфигурации брандмауэра , как показано на рисунке.

———- На CentOS/RHEL/Fedora ———-
# firewall-cmd —permanent —zone=public —add-port=4200/tcp
# firewall-cmd —reload

———- В Ubuntu/Debian ———-
$ sudo ufw allow 4200/tcp
$ sudo ufw reload

Теперь вы можете открыть веб-браузер и перейдите используя следующий адрес:

источник

How to Install Angular CLI on Linux

by Aaron Kili | Published: July 26, 2019 | Last Updated: July 31, 2019

Angular is an open-source, popular and highly-extensible front-end application development framework, used for building mobile and web applications using TypeScript/JavaScript and other common languages. Angular is an umbrella term for all Angular versions that come after AngularJS (or Angular version 1.0) including Angular 2, and Angular 4.

Angular is well suited for building small to large scale applications from scratch. One of the key components of the Angular platform to aid application development is the Angular CLI utility – it is a simple and easy-to-use command-line tool used to create, manage, build and test Angular applications.

In this article, we will explain how to install Angular command-line tool on a Linux system and learn some basic examples of this tool.

Installing Node.js in Linux

To install Angular CLI, you need to have the latest version of Node.js and NPM installed on your Linux system.

Install Node.js on Ubuntu

Install Node.js on Debian

Install Node.js on CentOS/RHEL & Fedora

Also, to compile and install native add-ons from NPM you may need to install development tools on your system as follows.

Installing Angular CLI in Linux

Once you have Node.js and NPM installed, as shown above, you can install Angular CLI using the npm package manager as follows (the -g flag means to install the tool system-wide to be used by all system users).

Install Angular CLI in Linux

You can launch the Angular CLI using the ng executable which should now be installed on your system. Run the following command to check the version of Angular CLI installed.

Creating an Angular Project Using Angular CLI

In this section, we will show how to create, build, and serve a new, basic Angular project. First, move into the webroot directory of your server, then initialize a new Angular application as follows (remember to follow the prompts):

Next, move into the application directory which has just been created and serve application as shown.

Before you can access your new app from a web browser, if you have a firewall service running, you need to open port 4200 in the firewall configuration as shown.

Now you can open a web browser and navigate using the the following address to see the new app run as shown in the following screenshot.

Access Your New Angular App

Note: If you use the command ng serve to build an application and serve it locally, as shown above, the server automatically rebuilds the app and reloads the web page(s) when you change any of the source files.

For more information concerning the ng tool, run the following command.

The Angular CLI Homepage: https://angular.io/cli

In this article, we have shown how to install Angular CLI on different Linux distributions. We also covered how to build, compile and server a basic Angular application on a development server. For any queries or thoughts, you want to share with us, use the feedback form below.

источник

Введение в Angular

Что такое Angular. Первый проект

Angular представляет фреймворк от компании Google для создания клиентских приложений. Прежде всего он нацелен на разработку SPA-решений (Single Page Application), то есть одностраничных приложений. В этом плане Angular является наследником другого фреймворка AngularJS. В то же время Angular это не новая версия AngularJS, а принципиально новый фреймворк.

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

Одной из ключевых особенностей Angular является то, что он использует в качестве языка программирования TypeScript. Поэтому перед началом работы рекомендуется ознакомиться с основами данного языка, про которые можно прочитать здесь.

Но мы не ограничены языком TypeScript. При желании можем писать приложения на Angular с помощью таких языков как Dart или JavaScript. Однако TypeScript все таки является основным языком для Angular.

Последняя версия Angular — Angular 9 вышла в феврале 2020 года. Официальный репозиторий фреймворка на гитхабе: https://github.com/angular/angular. Там вы можете найти сами исходные файлы, а также некоторую дополнительную информацию.

Начало работы c Angular

Для работы с Angular необходимо установить сервер Node.js и пакетный менеджер npm , если они отсутствуют на рабочей машине. Для установки можно использовать программу установки node.js. Вместе с сервером она также установит и npm. При этом особого какого-то знания для работы с NodeJS и npm не требуется.

После установки необходимых инструментов создадим простейшее приложение. Для этого определим на жестком диске папку приложения. Путь она будет называться helloapp .

Установка Angular CLI

Для компиляции приложения мы будем использовать инфрастуктуру Angular CLI. Angular CLI упрощает создание приложения, его компиляцию. Angular CLI распространяется как пакет npm, поэтому для его использования его необходимо сначала установить. Для установки Angular CLI откроем консоль/командную строку и выполним в ней следующую команду:

Данная команда установит пакет @angular/cli в качестве глобального модуля, поэтому в последующем пр создании новый проектов Angular его не потребуется устанавливать заново.

Установка пакетов. Package.json

В папке проекта создадим новый файл package.json со следующим содержимым:

Данный файл устанавливает пакеты и зависимости, которые будут использоваться проектом. В секции dependencies в основном определяются пакеты angular, которые необходимы приложению для работы. В секции devDependencies прописаны только те пакеты, которые будут использоваться для разработки. В частности, это пакеты для работы с языком typescript (так как мы будем писать код приложения на языке TypeScript), а также пакеты, необходимые для компиляции приложения с помощью инфраструктуры Angular CLI.

В секции «scripts» описаны используемые команды. В частности, команда ng serve запускает простенький веб-сервер для тестирования приложения и само приложение. А команда ng build компилирует приложение.

Затем откроем командную строку (терминал) и перейдем в ней к папке проекта с помощью команды cd:

И затем выполним команду npm install , которая установит все необходимые модули:

После выполнения этой команды в папке проекта должна появиться подпапка node_modules , которая содержит все используемые зависимости и пакеты.

Определение приложения

Затем создадим в папке проекта подпапку, которую назовем src — она будет содержать все исходные файлы. И далее в папке src создадим подкаталог app .

Создание компонента Angular

Компоненты представляют основные строительные блоки приложения Angular. Каждое приложение Angular имеет как минимум один компонент. Поэтому создадим в папке src/app новый файл, который назовем app.component.ts и в котором определим следующий код компонента:

В начале файла определяется директива import , которая импортирует функциональность модуля angular/core , предоставляя доступ к функции декоратора @Component .

Далее собственно идет функция-декоратор @Component , которая ассоциирует метаданные с классом компонента AppComponent. В этой функции, во-первых, определяется параметр selector или селектор css для HTML-элемента, который будет представлять компонент. Во-вторых, здесь определяется параметр template или шаблон, который указывает, как надо визуализировать компонент. В этом шаблоне задана двусторонняя привязка с помощью выражений [(ngModel)]=»name» и <> к некоторой модели name.

И в конце собственно экспортируется класс компонента AppComponent, в котором как раз определяется переменная name — в данном случае это пустая строка.

Создание модуля приложения

Приложение Angular состоит из модулей. Модульная структура позволяет легко подгружать и задействовать только те модули, которые непосредственно необходимы. И каждое приложение имеет как минимум один корневой модуль. Поэтому создадим в папке src/app новый файл, который назовем app.module.ts со следующим содержимым:

Этот модуль, который в данном случае называется AppModule, будет входной точкой в приложение.

С помощью директив import здесь импортируется ряд нужных нам модулей. Прежде всего, это модуль NgModule. Для работы с браузером также требуется модуль BrowserModule. Так как наш компонент использует элемент input или элемент формы, то также подключаем модуль FormsModule. И далее импортируется созданный ранее компонент.

Запуск приложения

Теперь нам надо указать Angular, как запускать наше приложение. Для этого создадим в папке src (на уровень выше, чем расположены файлы app.component.ts и app.module.ts) файл main.ts со следующим содержимым:

Этот код инициализирует платформу, которая запускает приложение, и затем использует эту платформу для загрузки модуля AppModule.

Также в папке src определим еще один файл, который назовем polyfills.ts со следующим кодом:

Данный файл определяет полифилы — инструменты, которые необходимы для поддержки приложения на Angular различными браузерами.

Создание главной страницы

Далее определим в папке src главную страницу index.html приложения:

А в элементе body определен элемент , в который собственно и будет загружаться приложение.

Определение конфигурации

Поскольку для определения кода приложения применяется язык TypeScript, поэтому также создадим в корневой папке проекта новый файл tsconfig.json :

Данный файл определяет настройки для компилятора TypeScript. Опция «compilerOptions» устанавливает параметры компиляции. А опция «files» определяет компилируемые файлы. В нашем случае это файл приложения — main.ts, который подтягивает все остальные файлы приложения, и файл полифилов polyfills.ts.

Angular.json

Для компиляции приложения мы будем использовать Angular CLI, поэтому нам надо описать поведение CLI с помощью файла angular.json. Итак, добавим в корневую папку проекта новый файл angular.json и определим в нем следующее содержимое:

Вкратце пройдемся по структуре файле. Вначале определяется параметр version . Он определяет версию конфигурации проекта.

Далее идет секция projects , которая определяет настройки для каждого проекта. В нашем случае у нас только один проект, который называется по названию каталога проекта — helloapp.

Проект определяет следующие опции:

projectType : тип проекта. Значение «application» указывает, что проект будет представлять приложение, которое можно будет запускать в браузере

root : указывает на папку файлов проекта относительно рабочей среды. Пустое значение соответствует корневой папке проекта, так как в данном случае рабочая среда и каталог проекта совпадают

sourceRoot : определяет корневую папку файлов с исходным кодом. В нашем случае это папка src, где собственно определены все файлы приложения

architect : задает настройки для построения проекта. В файле package.json определены команды build и serve , и для каждой из этих команд в секции architect заданы свои настройки.

Для каждой команды задается параметр builder , который определяет инструмент для построения проекта. Так, для команды «build» задано значение «@angular-devkit/build-angular:browser» — данный билдер для построения использует сборщик пакетов webpack. А для команды «serve» задано значение «@angular-devkit/build-angular:dev-server» — данный билдер запускает веб-сервер и развертывает на нем скомпилированное приложение.

Параметр options задает параметры построения файлов. Для команды «build» здесь определены следующие опции:

outputPath : путь, по которому будет публиковаться скомпилированное приложение

index : путь к главной странице приложения

main : путь к главному файлу приложения, где собственно запускается приложение Angular

polyfills : путь к файлу полифилов

tsConfig : путь к файлу конфигурации TypeScript

aot : указывает, будет ли использоваться компиляция AOT (Ahead-Of-Head) (предварительная компиляция перед выполнением). В данном случае значение true означает, что она используется

Для команды «serve» указана только одна опцияя — browserTarget , которая содержит ссылку на конфигурацию для команды build — «helloapp:build». То есть по сути эта команда использует ту же конфигурацию, что и команда build.

Последняя опция defaultProject указывает на проект по умолчанию. В данном случае это наш единственный проект.

Если мы используем TypeScript для работы с Angular и Angular CLI для компиляции, то эти файлы package.json, tsconfig.json и angular.json фактически будут присутствовать в каждом проекте. И их можно переносить из проекта в проект с минимальными изменениями. Например, в файле angular.json вместо названия проекта «helloapp» будет соответствующее название проекта. В файле package.json можно будет задать какие-то другие версии пакетов, если предыдущие версии устарели. Можно будет изменить название проекта, версию. Можно подправить настройки TypeScript или Angular CLI, но в целом общая организация будет той же.

В итоге у нас получится следующая структура проекта:

Запуск проекта

И теперь, когда все готово, мы можем запустить проект. Для этого в командной строке (терминале) перейдем к папке проекта с помощью команды cd и затем выполним команду ng serve :

Консольный вывод проинформирует нас, какие файлы какого размера созданы. Кроме того, мы сможем увидеть адрес, по которому запущен тестовый веб-сервер — по умолчанию это «http://localhost:4200/». Если мы передаем команде флаг —open , как в случае выше, то Angular CLI автоматически открывае браузер с запущенным приложением. И мы можем обратиться к приложению:

Введем в текстовое поле какое-нибудь имя, и оно тут же отобразится в заголовке.

Важно отметить, что пока приложение запущено, мы можем поменять код, и Angular CLI почти моментально перекомпилирует и перезапустит приложение.

источник

Читайте также:  Установка trd на lx 570

Добавить комментарий