Быстрое руководство, которое поможет вам понять и создавать угловые 6 приложений

Автор оригинала: FreeCodeCamp Community Member.

Этот пост разделен на две части:

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

Вторая часть объясняет существующий код, который я опубликовал в Github. Этот код демонстрирует использование компонентов, услуг, HTTP-клиента и связь между компонентами.

Часть 1.

Установите Node.js, если еще не присутствовать

Вам нужен Node.js, поскольку библиотеки, необходимые для угловых лиц, загружаются с использованием управляющего узла пакета (NPM). Обратитесь к https://nodejs.org/en/ Чтобы установить Node.js.

Установите угловую CLI

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

npm install -g @angular/cli

Создать проект

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

ng new simple-angular6-app

Простое Angular6-App это название проекта. Теперь вы заметите, что вы видите папку с именем Простое Angular6-приложение. Папка – это проект, который был создан. Чтобы проверить, если все было установлено правильно, перейдите в папку Project и запустите приложение, используя следующие команды:

cd simple-angular6-app
npm start

Перейдите в свой браузер и пройдите следующий URL: localhost: 4200. Вы должны быть в состоянии увидеть, что ваше приложение работает.

Приложение будет выглядеть так:

Базовая структура папки объяснила

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

Package.json: Этот файл имеет список зависимостей узла, которые необходимы.
SRC/styles.css : Этот файл имеет глобальные CSS, доступные на протяжении всего приложения.
SRC/Main.ts : Это основной файл, который запускает угловое приложение (AppModule Bootstrapped здесь, как видно в коде). Здесь расширение .ts означает teartcript.
SRC/index.html : Это первый файл, который выполняет наряду с Main.ts, когда страница нагрузки.
SRC/App/app.module.ts : Это файл, где все компоненты, провайдеры и модули определены. Не определяя их здесь, их нельзя использовать в другом месте в коде.
SRC/App/app.component.html: Это основной компонент углового приложения, и все остальные компоненты обычно присутствуют в этом компоненте. SRC/App/app.component.ts Логика для этого компонента и SRC/App/app.component.css это CSS для этого компонента. Сам этот компонент не делает никакой важной логики, а действует как контейнер для других компонентов.
Dist : Эта папка – это то, где присутствуют встроенные файлы. Typeyctry в основном преобразуется в JavaScript, а полученные файлы хранятся здесь после объединения и зачисления. (Эта папка появляется только в том случае, если приложение будет построено. Простой «NPM Start» не будет создавать эту папку.) Поскольку веб-браузеры понимают только JavaScript (по крайней мере, на данный момент), поэтому необходимо преобразовать приведенные в JavaScript, прежде чем развертывать код Отказ Чтобы увидеть эту папку, вы можете ввести следующее в командной строке:

npm run build

Есть несколько других файлов, но зная, что эти основные хорошие для начала

Машинопись

Угловые 6 используют Teadercript для реализации логики. Те из вас, кто работал в Java, найдет Teamingcript очень легко. TypeScript – это язык, построенный на вершине JavaScript, но который является безопасным типом, а в Typlection в свою очередь компилируется на JavaScript

Создание компонентов и услуг

Компонент : Компонент в угловом угловании делает определенную функцию. Угловое приложение построено с использованием различных компонентов. Угловые CLI можно легко использовать для создания компонентов. Синтаксис NG генерирует компонент [Имя]. Используйте следующую команду для создания компонента под названием «клиенты».

ng generate component customers

2. Вышеуказанная команда создает папку под названием Клиенты внутри SRC/приложение Отказ Созданный компонент имеет:

А Customers.Component.html Файл для решения шаблона (как компонент UI должен выглядеть)
А Customers.Component.ts Файл, где логика присутствует
А Customers.Component.css Файл, имеющий содержание CSS
и а Customers.Component.spec.ts Файл, который используется для тестирования подразделения (SPET не будет объяснен в этом посте).

3. Сервис : Услуга в основном обеспечивает функциональность, которые могут быть использованы любым компонентом. Сервис может быть передан всем компонентам, или он может быть ограничен определенным компонентом (любая многоразовая логика может быть помещена в обслуживание). Угловой CLI может быть использован для создания услуг. Синтаксис NG генерирует службу [Имя]. Используйте следующую команду для создания службы под названием «Данные»:

ng generate service data

4. Сервис создан внутри SRC/приложение. Созданная услуга имеет data.service.ts Файл, который имеет логику и data.service.spec.ts Файл для тестирования подразделения.

Поздравляю ?

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

Часть 2

Код

Этот код Объясняется здесь, поэтому клонирует репо на локальную машину. REPO имеет инструкции о том, как клонировать его и установить его.

URL-адрес приложений

Чтобы увидеть, как выглядит окончательное приложение, вы можете нажать на этот URL Отказ Это даст вам хорошую идею относительно того, что приложение пытается сделать.

Приложение будет выглядеть так на экране мобильного телефона:

Что делает это приложение?

Целью приложения является отображение списка клиентов в виде карт. Когда данные клиента нажат, то приложение переключается на новую страницу, которая затем отображает детали выбранного клиента.

Объяснение структуры приложений

Созданные компоненты:

CommerComponent : Это соответствует SRC/App/Клиенты папка. Этот компонент должен отобразить список клиентов. Customers.Component.ts Файл имеет функцию под названием Ngoninit () Отказ Эта функция вызывается всякий раз, когда компонент загружен. Таким образом, эта функция может быть использована для загрузки данных для компонента. Что данные загружаются путем вызова GetCustomerList () функция. GetCustomerList () В свою очередь вызывает службу данных, чтобы получить необходимые данные.
CustomerDetailsComponent : Это соответствует SRC/App/CuditualDetails папка. Этот компонент отображает детали для одного выбранного клиента. CustomerDetails.comPonent.ts файл имеет Ngoninit () Функция, которая может быть использована для загрузки данных. Загрузить данные, getcustomerdetails () Функция называется. Эта функция обращается к службе данных, чтобы получить необходимые данные. Но здесь вы также заметите использование rustprams.id который отправляется на сервис. Routeparams используется для получения параметров из URL-адреса приложения и ID Параметр используется для выявления, для которого клиент необходимо загрузить детали. Это станет более ясным, когда я доберусь до маршрутизации.
DisplayComponent : Это соответствует SRC/App/Display папка. Этот компонент отображает имя клиента, щелкнувшись в ComeratersComponent. (Вся точка для этого компонента – продемонстрировать родителя к коммуникации для детей.) Это дочерний компонент CommerComponent Отказ В Customers.Component.html Вы заметите, что Отказ Это делает DisplayComponent дочерней компонентом CommerComponent Отказ Данные передаются из CustomerComponent к DisplayComponent используя [Клиент] атрибут.

Данные образца

Данные образца присутствуют в SRC/Активы/Samberjjson папка.

Созданные услуги:

DataService : Это соответствует src/app/data.service.ts Отказ Все JSON, используемые в приложении, хранятся в SRC/Активы/Samberjjson папка. DataService помогает в том, чтобы получить JSON из SRC/Активы/Samberjjson папка с использованием HTTP-запроса. В реальных приложениях сервис помогает получить данные из API для отдыха или любой другой API, сделав HTTP-запрос. Эта услуга используется как CommerComponent и CustomerDetailsComponent.

Используемые модели используются:

Клиент : Это соответствует SRC/App/Customer.ts Отказ Это класс модели, используемый для CommerComponent Чтобы определить структуру каждого клиента в списке.
CustomerDetails : Это соответствует SRC/App/CustomerDetails.ts Отказ Это модель модель, используемого для CustomerDetailsComponent Чтобы определить структуру, содержащую все детали клиента.

Модуль маршрутизации

Модуль маршрутизации определен в SRC/App/app-marring.module.ts Отказ Этот модуль затем применяется к приложению с помощью Add <Маршрутизатор-розетка> в app.component.html.

В приложении есть 2 пути:

/Клиенты : Этот URL отображает список клиентов и указывает на ComeratersComponent.
/customerdetails/: id : Этот URL отображает детали для каждого клиента и указывает на CustomerDetailsComponent Отказ ID Что присутствует в этом URL, это Routeparam. Это ID В свою очередь используется CustomerDetailsComponent знать, какие данные клиента отображаются. Например /CULLUSUREDETALS/1 Понадобится детали первого клиента, /publementdetails/3 Понадобится детали 3-го клиента и так далее.

Поздравляю снова?

Теперь вы знаете, как использовать компоненты и услуги. Также вы знаете, как сделать HTTP-вызовы, как использовать маршрутизацию и как пройти маршрут.

Основные концепции были покрыты в этом посте и надеемся, что это было полезно.