Что именно угловатое?

Angular - это клиентская среда с открытым исходным кодом JavaScript, которая создает реактивные одностраничные приложения (SPA) и была разработана разработчиками Google. Angular подтвердил широко распространенный контроль в Open Source JavaScript Frameworks, и он очень высоко ценится разработчиками и предприятиями за отличные методы работы. Angular - инновационная среда MVW на стороне клиента, широко используемая в настоящее время для разработки мобильных приложений и веб-приложений. Он был написан на Typescript с поддержкой стандартизации ES6 (ECMA Script 2015). Typescript разработан Microsoft и представляет собой расширенный набор JavaScript. Это перенесет код и преобразует в формат JavaScript или ES5. Typescript является строго типизированным, и ему разрешено писать функции OOPS, такие как операторы класса, интерфейса и модуля, такие как C # или Java, которые ускоряют выполнение и уменьшают ошибки времени выполнения.

Ниже приведены основные особенности Angular 2

  • Компоненты -

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

  • Модуль -

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

Например

  • Шаблон -

Шаблон - это ключевая роль, которая оправдывает просмотр компонента. Можно было бы объявить, что вид компонента идентифицируется с помощью шаблона. Он создан с помощью HTML, включает в себя обязательные и директивы.

Например

  • Метаданные -

Это особенно полезно для повышения эффективности класса. В Typescript для этой цели идентифицируется декорирование класса. Например, чтобы указать какой-либо компонент в приложении Angular, используйте метаданные класса (т.е. @Component decorator).

Декоратор - это функция, которая помещает метаданные в класс, является его членами или аргументами метода.

  • Привязка данных -

Наиболее эффективной функцией привязки данных является соединительный мост между моделью и представлением. Это делает автоматически синхронизированы. Angular поддерживает четыре типа привязки - привязка свойств, привязка событий, интерполяция и двусторонняя привязка.

  • Директива -

Директивы - это пользовательские атрибуты HTML, полезные для сохранения способности HTML. Чтобы создать директиву, декоратор @Directive используется для связанных метаданных класса. Три типа директив - Компонент, Декоратор и Шаблон.

  • Сервисы -

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

  • Внедрение зависимости -

Инъекция зависимости в угловую. Внедрение зависимостей (DI) является базовой концепцией Angular 2+ и позволяет классу собирать зависимости от другого класса. Обычно в Angular внедрение зависимостей выполняется путем внедрения класса обслуживания в класс раздела или модуля.

Например

Есть много текстовых редакторов, которые полностью поддерживают Typescript. Либо из коробки, либо с плагином, включая все это, как показано ниже.

  1. Visual Studio.
  2. Visual Studio Code.
  3. Атом.
  4. Затмение.
  5. WebStorm.

Visual Studio Code - лучший выбор, потому что он с открытым исходным кодом и работает в Linux, Windows и MacOS. Он предоставляет отличные функции, которые поддерживают Typescript, в том числе

  • Авто-завершение
  • IntelliSense
  • Проверка синтаксиса
  • Рефакторинг

Для загрузки кода Visual Studio посещает веб-сайт по адресу https://code.visualstudio.com/download.

Шаги для установки Angular 2

Теперь приступим к процессу установки Angular 2

Шаг 1. Чтобы установить Angular 2, сначала загрузите пакет node.js с сайта https://nodejs.org/en/download/.

Установите загруженный репозиторий npm (Node Package Manager) в вашей системе.

  • Если вы используете систему Windows, установите установщик Windows.
  • Если вы используете MacOS System, установите установщик MacOS.

Проверьте совместимые с вашей системой версии, такие как 32-битные или 64-битные.

Шаг 2: Установка узла,

Теперь дважды щелкните загруженный файл node-v10 15.3-x64.msi, чтобы запустить программу установки, и нажмите кнопку «Далее» на экране программы установки.

Шаг 3. Теперь установите флажок и примите условия лицензионного соглашения . Затем нажмите кнопку Далее.

Шаг 4: На следующем экране измените путь установки, если требуется, или нажмите кнопку Далее.

Шаг 5. На экране выбора следующей функции сохраните выбор по умолчанию и нажмите кнопку «Далее».

Шаг 6: Теперь, чтобы установить Node.js, нажмите кнопку «Установить».

Шаг 7: На следующем экране дождитесь окончания установки.

Шаг 8: Теперь нажмите кнопку Готово.

Шаг 9: Откройте командную строку на своем компьютере и введите следующую команду и проверьте версию nodejs и версию npm:

c:/>node -v

c:/>npm -v.

Шаг 10: После завершения установки. Посетите сайт по адресу https://cli.angular.io/ для Angular CLI (интерфейс командной строки).

Шаг 11: Откройте командную строку на своем компьютере, введите команду «npm install –g @ angular / cli» и нажмите Enter, чтобы установить Angular 2 CLI (интерфейс командной строки).

Примечание. Если вы используете MacOS / Linux, просто поставьте sudo перед npm: «sudo npm install –g @ angular / cli»

Шаг 12: Введите «ng new first-app» и нажмите Enter, чтобы создать первое приложение.

Шаг 13: При установке приложения Angular 2 Angular CLI задаст вам несколько вопросов.

  • Хотите добавить угловую маршрутизацию? (Да / Нет) -> Нет
  • Какой стандарт таблиц стилей хочет использовать? (Используйте клавиши со стрелками) -> CSS

Шаг 14: В First App добавьте все пакеты, используя Angular CLI

После установки всех пакетов это означает, что приложение создано на диске.

Шаг 15: Введите команду «ng –version» в командной строке и нажмите Enter, чтобы узнать угловую версию

Шаг 16. Теперь введите команду «cd first-app», чтобы войти в каталог или папку приложения.

Шаг 17: Наконец, создано угловое приложение «Первое приложение»; Теперь введите команду «ng serve».

Шаг 18: Теперь откройте браузер и введите http: // localhost: 4200 в адресной строке и нажмите Enter, чтобы запустить приложение First Application Angular в браузере.

Рекомендуемые статьи

Это было руководство по установке Angular 2. Здесь мы обсудили основные особенности Angular 2 и шаги по установке Angular 2. Вы также можете посмотреть следующие статьи, чтобы узнать больше -

  1. Угловой 2 Шпаргалка
  2. Angular 2 Интервью Вопросы
  3. Угловой 2 против Vue JS
  4. Угловые команды

Категория:

Разработка программного обеспечения