Что такое Angular? (Часть 1) | Настройка среды разработчика | Создать новый угловой проект.

Давайте начнем с того, что такое Angular?

Angular - это фреймворк для создания клиентских приложений на HTML, CSS и Javascript / Typescript.

Typescript: это язык, который компилируется в Javascript. TypeScript очень часто используется при использовании Angular, потому что даже Angular написан на Typescript.

Зачем нам нужен Angular?

Сложные приложения сложно поддерживать в Javascript и JQuery. Нам нужен способ структурировать наше приложение. Вот почему используются эти фреймворки (Angular, React и т. Д.).

Преимущества использования Angular?

  • Придает нашему приложению чистую структуру: простую для понимания и легкую в обслуживании
  • Включает много повторно используемого кода
  • Делает наше приложение более тестируемым

Архитектура Angular?

Front-end (клиент) 👇 ← → Back-end (веб-сервер) 👇

Пользовательский интерфейс (UI) 👇 ← → Данные + API и обработка (бизнес-логика) 👇

(HTML, CSS, Typescript, JS, Angular) 👇 ← → (Java, Python, Node.js и т. д.) 👇

Внешний интерфейс (клиент) отправляет / получает данные на / от сервера с помощью API

Приложение Программирование I интерфейса (API) / HTTP-сервисов

В API конечные точки доступны по протоколу HTTP (методы GET и POST)

Конечные точки - это URL-адреса для доступа к API, а HTTP-запросы получают / отправляют данные с / на сервер.

А роль Angular - во внешнем интерфейсе, то есть на стороне клиента - пользовательский интерфейс.

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

Настройка среды разработчика

1. Установите стабильную версию Node.

N ode: по сути, это среда выполнения для выполнения кода Javascript вне браузера. В этом проекте мы в основном не используем Node, но Node предоставляет некоторые инструменты, необходимые для создания проекта angular.

Посетите: https://nodejs.org /, чтобы загрузить и установить рекомендованную стабильную версию Node.

После завершения установки убедитесь, что установка прошла успешно - ›Откройте командную строку и введите: узел - версия, чтобы убедиться, что узел установлен успешно. (Минимальная версия Node, необходимая для создания приложения angular, - это версия 6.9)

node --version

На моем компьютере Mac отображается версия узла: v10.10.0 👇

2. Установите Обычный CLI.

* После того, как мы установили Node, мы можем использовать N ode Package M anager или NPM для установить сторонние библиотеки. *

Одна из библиотек, которые мы собираемся установить для этого проекта, - это Обычный CLI или регулярный C команда - L ine I интерфейс . Это инструмент командной строки, который мы используем для создания нового проекта Angular или генерации стандартного кода для запуска нового проекта.

Обычный CLI: Установка Angular CLI… | Откройте C команду P rompt или T erminal и введите следующую команду:

sudo npm install -g @angular/cli

(введите sudo, чтобы выполнить эту команду от имени администратора - для пользователей Mac / Linux и для пользователей Windows → командная строка поиска → щелкните правой кнопкой мыши и выберите "Запуск от имени администратора" ' | sudo не требуется для пользователей Windows) (-g означает глобальный) (@angular/cli - имя пакета) и (npm - N ода Пакет M anager устанавливает сторонние библиотеки, такие как @ angular / cli)

  • Если мы не укажем -g, angular cli будет установлен только в текущую папку и больше нигде не будет доступен.
  • Если ввести sudo или открыть "Командную строку" от имени администратора, нам будет предложено ввести системный пароль.

После завершения установки убедитесь, что установка прошла успешно - ›Откройте командную строку и введите: ng - version, чтобы убедиться, что интерфейс командной строки Angular установлен успешно.

ng --version

На моем компьютере Mac отображается версия CLI для Angular: 1.6.5 и версия узла: 10.10.0 👇

* Мы установили Node, NPM и Angular CLI. Теперь мы можем создать новый проект Angular *

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

Создание нового Angular проекта

1. Откройте командную строку и введите:

sudo ng new hello-world

(используется sudo, чтобы избежать ошибки разрешения - для пользователей Mac / Linux и пользователей Windows → командная строка поиска → щелкните правой кнопкой мыши, а затем нажмите "Запуск от имени администратора" | sudo не требуется для пользователей Windows) (ng new - это команда для запуска нового проекта Angular) (hello-world - это имя проекта)

  • Эта команда создаст кучу файлов и папок (см. верхнюю часть прикрепленного изображения 👇 ), а затем использует NPM для загрузки сторонних библиотек (см. нижнюю часть прикрепленного изображения 👇 ).

⭐️ Важное примечание: при выполнении вышеуказанной 👆 команды - вы можете столкнуться с ошибкой: 'git' is not recognized as an internal or external command

Чтобы избавиться от 'git' ошибки, вам необходимо установить git в вашей системе - используйте эту ссылку👇, чтобы загрузить и установить git в вашей системе, click here for git → https://git-scm.com/downloads

  • Наш проект успешно создан.
  • Теперь, чтобы начать кодировать, нам понадобится редактор кода. Мы будем использовать редактор V isual S tudio C ode или VS C ода

Посетите: https://code.visualstudio.com/ , чтобы загрузить и установить VS C оду.

(VS C ode - красивый, кроссплатформенный легкий редактор, вы можете свободно использовать Sublime, Atom или любой другой редактор)

  • Красиво смотрится проект в VS C оде. 👇👇

Нажмите здесь👇, чтобы перейти к Части 2
https://medium.com/@AnkitMaheshwariIn/what-angular-is-part-2-550954552d89

Если вы не против похлопать в ладоши 👏 👏 раз уж это помогло, я буду очень признателен :) Помогите другим найти статью, чтобы она могла им помочь!

Всегда хлопайте в ладоши…