Angular: введение и установка

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

Что такое Angular?

Сейчас же я бы хотел конкретно разобраться, что такое Angular, какие задачи он позволяет нам легко решать. Для начала Angular это opensource javascript библиотека которая является Framework’ом. Она была разработана компанией Google и получила от компании огромную поддержку.

С помощью Framework’a Angular мы можем с вами разрабатывать реактивные динамические приложения, которые называются Single Page Application (SPA). Если быть кратким, то SPA это такие приложения, которые по сути являются обычными сайтами в интернете, но при этом они состоят всего лишь из одной страницы. Но, это только технически!

Если мы хотим посмотреть реальный пример страницы Angular’а, достаточно перейти на сайт angular.io, и первое что вы заметите, что сайт загружается достаточно быстро, я бы даже сказал моментально.

За счет чего это достигается скорость переключения страниц?

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

Раньше мы делали это иначе – мы нажимали на ссылку, и по определенной ссылке отослали запрос, серверу, который уже обрабатывал там все данные, загружал в браузер страницу, ну таким образом делал это каждый раз при каждом переходе на какую-то страницу.

Как я уже говорил, сейчас мы никаких запросов не генерируем, а разве что при первой загрузке страницы, а значит полностью разгружаем Network часть, и JavaScript генерирует это все самостоятельно. Именно поэтому Single page Aplication действительно очень быстрые и получили очень широкое распространение в сайт строении.

И как раз-таки Angular позволяет создавать нам такие приложения и соответственно поддерживать их в том числе.

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

Второй Angular был написан на другом языке с использованием других патернов. Проще говоря он просто имеет лишь совпадение лишь с названием.

Позже Angular 2 получил сразу 4-ю версию. Произошло это так, потому что там произошел конфликт версионности. Angular 2 состоит из различных пакетов и в свое время Angular router пакет был 3-й версией хотя все остальные пакеты имеют версию 2.

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

Установка Angular на компьютер

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

Установить NodeJS

Заходим на сайт NodeJS и устанавливаем последнюю рекомендуемую версию. Вместе с этим вы установите себе на компьютер и менеджер пакетов npm.

NodeJs скачивание и установка

Минимизируем количество бедующих ошибок

После установки NodeJS переходим в командную строку или кому как проще терминал и вводим следующую строку:

npm install webpack webpack-dev-server typescript -g

Таким образом вы становите себе на компьютер три пакета глобально:

  • webpack
  • webpack-dev-server
  • typescript
установка ангуляр и тайпскрипта

Устанавливаем Angular

Дальше когда вы установили предыдущие пакеты, мы можем приступить к установке Angular, для этого вводим в терминале следующую команду:

npm install -g @angular/cli

После окончания загрузки пакетов Angular будет установлен на вашем компьютере.

Установка Angular завершена, но на этом не все.

Первое приложение на Angular

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

Для этого переходим в удобную нам папку, я обычную создаю папку sites в корневом диске С.

где я храню свои проекты angular

После чего вводим следующую команду:

ng new angularApplication

где:

  • ng: это обращение непосредственно к самому Angular
  • new: команда создания нового приложения
  • angularApplication: имя нашего приложения, может быть произвольным, но при этом название не может быть кириллическими буквами.

После ввода команды, Angular спросит вас, хотите ли вы использовать роутинг или нет – чаще всего он вам понадобится, потому вводим команду „y

Дальше, Angular CLI спросит какие стили вы предпочитаете использовать, я лично предпочитаю scss.

выбор стилей при установке scss

Далее когда установка закончится, вводим:

cd angularApplication 

Это позволит нам перейти в папку с только что созданным приложением, ну а дальше запускаем его:

ng serve 

Ну а дальше на скриншоте вы видите пример успешного запуска:

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

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

Если же все в порядке, то как можно увидеть на скрине, Angular CLI предлагает перейти по ссылке http://localhost:4200 для того, чтобы начать работать с сайтом. Вот как выглядит первое созданное приложение.

первое приложение angular

Если лично тебе понравилась эта статья, не забудь поделиться нею в социальной сети! Так ты скажешь мне спасибо, ну и сохранишь для себя эту ссылку ну будущее. Дальше я планирую создать больше полезных уроков на Angular, так что не забывай следить за мой. Вместе мы создадим полноценный сайт Angular.

Я планирую освятить все возможные темы на Angular, потому если тебе интересно это направление то не забудь подписаться!

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

Оставьте комментарий