Как запустить проект Angular [Пошаговое объяснение]

AngularJS является обязательным для любого разработчика полного стека. Это имеет решающее значение для разработки интерфейса, поскольку упрощает использование директив HTML. Разработка веб-приложения становится намного проще, когда вы используете Angular. Итак, в этой статье мы обсудим, как вы можете начать работу с Angular. Мы обсудим, как установить Angular и как запустить проект Angular.

Angular CLI: краткое введение

Если вы хотите работать над проектами Angular, у вас должен быть Angular CLI. Это официальный инструмент Angular для работы с проектами Angular и их инициализации. Angular CLI упрощает процесс инициализации. Вам не нужно выполнять несколько настроек и создавать инструменты для запуска проекта, если вы используете Angular CLI.

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

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

Как установить Ангуляр?

Первый шаг

Перед установкой Angular в вашей системе у вас должны быть установлены Node и npm. Вы можете использовать Node Version Manager для его установки или использовать официальный менеджер пакетов вашей ОС. У вас также есть возможность установить Node с его веб-сайта. Мы рекомендуем установить его с веб-сайта, так как это быстро и просто. Вам нужно всего лишь перейти на страницу загрузки node.js.

Второй шаг

Когда вы окажетесь на странице загрузки node.js, выберите нужную версию в соответствии с вашей операционной системой, а затем выполните шаги, указанные в мастере установки. Если вы уже устанавливали node.js в своей системе ранее, вы можете пропустить этот шаг (и предыдущий).

Третий шаг:

Чтобы проверить, установлен ли Node на вашем устройстве или нет, откройте командную строку и выполните следующую команду:

$ узел -v

Он покажет текущую установленную версию Node в вашей системе.

Третий шаг

Убедившись, что Node установлен в вашей системе, вы можете установить Angular на свое устройство, выполнив следующую команду в командной строке:

$ npm установить @angular/cli

После выполнения приведенной выше команды Angular CLI будет установлен на вашем устройстве. Вы завершили часть «Как установить Angular».

Узнайте: Зарплата разработчиков Angular в Индии: для новичков и опытных

Как запустить проект Angular?

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

Первый шаг

Мы создадим рабочую область и начальное приложение, выполнив следующую команду:

новый угловой тур по героям

Мы добавили angular-tour-of-heroes в качестве имени для нашего рабочего пространства. Команда «ng new» подскажет вам, какие функции вы хотите добавить в стартовое приложение. Поскольку это учебник, мы выберем значения по умолчанию и продолжим, нажав клавишу «Ввод» или «Ввод».

Второй шаг

Теперь Angular CLI установил необходимые пакеты и зависимости npm. У вас будет готовое к использованию приложение «Добро пожаловать» и новое рабочее пространство. У вас также будет корневая папка с тем же именем, что и у приложения (angular-tour-of-heroes), и каркас проекта приложения.

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

компакт-диск angular-тур-героев

нг служить – открыть

Команда 'ng serve' создаст приложение, запустит сервер разработки, позаботится об исходных файлах вашего проекта и перестроит ваше приложение по мере изменения необходимых файлов.

Третий шаг

Если вы хотите изменить приложение, вам нужно перейти в папку src/app в вашей среде IDE или редакторе. Мы отредактируем наше приложение, изменив компоненты этого проекта. Компоненты — это строительные блоки приложений Angular. Они выполняют почти все основные функции проекта Angular, такие как отображение данных, ответ на ввод и т. д.

На этом шаге откройте IDE, перейдите в каталог проекта и найдите файлы компонентов вашего проекта:

• app.component.ts
• app.component.html
• app.component.css

Первый файл представляет собой код класса и основан на TypeScript, второй файл представляет собой шаблон в формате HTML, а последний файл содержит частные стили CSS.

Четвертый шаг

Наш проект настроен, и у нас есть все файлы. На этом этапе мы персонализируем его, добавив к нему заголовок. Чтобы изменить название проекта Angular, перейдите в файл app.component.ts и удалите существующий шаблон по умолчанию. Angular CLI автоматически генерирует шаблон генерации. Вы можете заменить его следующим:

<h1>{{ваше название}}</h1>

Фигурные скобки — это синтаксис привязки интерполяции. Вы можете заменить «ваш заголовок» на желаемый заголовок. После того, как вы ввели нужный заголовок, обновите браузер, и ваше приложение будет иметь новый заголовок.

Пятый шаг

Персонализация приложения была бы неполной без стилизации. Итак, на этом этапе мы изменим стиль нашего приложения Angular. Angular CLI генерирует пустой файл styles.css для вашего приложения при создании нового проекта. Здесь вы можете ввести желаемые стили.

Откройте файл src/styles.css в вашей среде IDE и начните изменять стиль приложения. Измените стили приложения и сохраните изменения. Когда вы обновите браузер, вы увидите изменения в своем приложении.

Оформление заказа: как реализовать разбиение на страницы в Angular JS?

Узнайте больше об Angular и разработке полного стека

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

Если вы хотите узнать больше об Angular и интерфейсной веб-разработке, вот несколько дополнительных ресурсов:

• Руководство по резюме Front-end разработчика
• 10 лучших навыков, чтобы стать фронтенд-разработчиком
• Идеи фронтенд-проекта

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

Если вам интересно узнать больше о разработке программного обеспечения с полным стеком, ознакомьтесь с дипломом PG upGrad & IIIT-B по разработке программного обеспечения с полным стеком, который предназначен для работающих профессионалов и предлагает более 500 часов интенсивного обучения, более 9 проектов и заданий. , статус выпускника IIIT-B, практические практические проекты и помощь в трудоустройстве в ведущих фирмах.