Angular подключить json файл

Обновлено: 06.07.2024

JSON это лёгкий формат для обмена данными. Простой для людей, чтобы его читать и писать. Простой для машин для разбора и генерации. JSON — это текстовый формат, который полностью зависит от языка, но использует соглашения, которые знакомы программистам.

JSON построен на двух структурах:

Коллекция пар имя/значение. В различных языках это реализовано как объект, запись, структура, словарь, хэш-таблица, список ключей или ассоциативный массив.
Упорядоченный список значений. В большинстве языков это реализовано как массив, вектор, список или последовательность.

Идея примера

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

Файл JSON

Я уже подготовил JSON-файл со странами, в котором хранятся кодовые имена и данные о населении нескольких стран.

Само приложение

Итак, какой план?

Извлекаете JSON.
Отображаете JSON удобочитаемым способом.

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

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

Вот как выглядит простой запрос GET:

Мы только используем success и угадайте что?! После успешного вызова/выполнения сервиса мы хотим загрузить наш JSON-файл в глобальную переменную, доступную всем приложениям, и да, ваше предположение было верно, $scope является глобальной переменной, которую мы ищем!

Пример

Время для действий!

Загрузка JSON в $scope

В соответствии с упомянутыми выше замечаниями мы должны загрузить наш JSON-файл в переменную $scope , скажем countries :

Очевидно, что этот вызов сервиса должен быть частью определения контроллера приложения Angular, поэтому предполагая, что мы назвали наше приложение countryApp , вот обновлённый формат вызова сервиса:

Если вам нужна дополнительная помощь по контроллеру, пожалуйста, взгляните на этот раздел.

Отображение данных JSON в таблице

Теперь, когда мы загрузили все данные JSON в $scope.countries давайте покажем их в таблице с тремя колонками: код, название, население. Это обстоятельство переводится в два требования:

Мы должны найти способ повторно анализировать все данные из переменной $scope (поскольку мы, очевидно, не хотим, руками вводить более 70 отдельных стран).
Мы хотим разделить данные каждой страны на её код, название и население, чтобы отображать их в соответствующей колонке таблицы.

Определить заголовок таблицы очень просто:

Теперь, чтобы полностью выполнить первое требование, мы будем использовать директиву ngRepeat , которая создаёт экземпляр шаблона за раз из коллекции. Каждый экземпляр шаблона получает собственную область видимости, где переменная цикла установлена на текущее положение элемента, а $index устанавливается на индекс или ключ элемента.

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

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

Для начала работы установите на свой компьютер node.js не ниже 8 версии.

Далее установите глобально в системе @angular/cli :

@angular/cli - это интерфейс командной строки для работы с Angular, его использование значительно облегчает процесс разработки. Например, одной командой можно сгенерировать полностью сконфигурированное работающее приложение или создать новую сущность (модуль, сервис, компонент и т. д.) в существующем приложении. Более подробно здесь.

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

Для создания нового проекта просто нужно выполнить:

Запуск команды ng new создает базовое приложение в папке my-app .

e2e - директория с интеграционными тестами;
node_modules - установленные npm-модули;
src - исходные файлы;
angular.json - описание конфигурации;
package.json - метаинформация и список необходимых npm-модулей;
README.md - описание ПО;
tsconfig.json - общая конфигурация typescript;
tslint.json - настройка tslint.

app - модули, компоненты, сервисы, директивы и т. д.;
assets - статический контент (изображения, аудио);
environments - конфигурации для каждой среды запуска;
favicon.ico - иконка, отображаемая в верхней части вкладки браузера;
index.html ;
karma.conf.js - конфигурация protractor (для e2e-тестов);
main.ts - необходим для запуска в режиме разработки, использует JIT-компиляцию;
polyfills.ts - список модулей, подключаемых для поддержки кроссбраузерности;
styles.css - описание действующих глобально стилей;
test.ts - отвечает за поиск и загрузку тестов при их запуске;
tsconfig.app.json - настройка typescript;
tsconfig.spec.json - настройка typescript при запуске unit-тестов.

angular.json¶

Следующий шаг после установки Angular и изучения структуры "скелета" приложения - настройка. angular.json - главный конфигурационный файл так называемого Angular Workspace (директория my-app), сгенерированного с использованием @angular/cli и объединяющего в себе множество проектов (само приложение и созданные библиотеки для него).

version - версия Angular Workspace;
newProjectRoot - указывает, где будут располагаться внутренние приложения и библиотеки, по умолчанию projects;
projects - описание конфигураций для каждого из элементов Angular Workspace. По умолчанию вместе с основным генерируется проект с интеграционными тестами. Опции:
root - определяет директорию с файлами, включая конфигурационные, всего проекта;
sourceRoot - определяет директорию с исходными файлами;
projectType - тип проекта, может быть только application или library ;
prefix - префикс, который будет использоваться при именовании компонентов и директив;
schematics - позволяет задавать отличную от по умолчанию конфигурацию сущностей Angular, например, можно для всех создаваемых компонентов переопределить работу механизма Change Detection;
architect - используется для настройки запуска или сборки.
defaultProject - имя проекта, который будет использоваться при использовании команд Angular CLI (по умолчанию основной).

Рассмотрим подробно в angular.json параметр build свойства architect . Здесь нас интересуют options и configurations .

В options указываются следующие опции:

outputPath - путь, где будет находиться "собранный" проект (подробно о сборке здесь);
index - путь к index.html ;
main - путь к main.ts ;
polyfills - путь к polyfills.ts ;
tsConfig - путь к tsconfig.app.json ;
assets - массив с указанием путей к статическому контенту, могут быть папки или отдельные файлы;
styles - массив с указанием путей к стилям, причем стили распространяются на все приложение;
scripts - массив с указанием путей к javascript-файлам, обычно здесь подключаются сторонние библиотеки, не являющиеся модулями Angular, например, jQuery.

Всегда подключайте сторонние скрипты и стили не в index.html , а в angular.json .

В configurations указываются настройки, связанные со средой окружения (environment, далее СО) работы приложения.

Каждое свойство объекта configurations - название СО с объектом настроек среды в качестве значения.

СО указывается при запуске (сборке) в качестве параметра --configuration (краткая запись -c ).

В объекте настроек СО множество параметров, назначение большинства которых понятно из их названия. Остановимся на fileReplacements .

В директории environments по умолчанию находятся два файла: environment.ts и environment.prod.ts . В них указываются параметры, зависящие от СО, например, адрес сервера, с которого будут запрашиваться данные. По умолчанию используется environment.ts .

Объект, используемый в качестве значения fileReplacements , позволяет переопределить источник для указанной СО.

Можете открыть angular.json и найти соответствующий код.

Директория app¶

Теперь разберем подробно содержимое src/app .

Минимально каждое приложение должно состоять из одного корневого модуля, содержащего обособленные функциональные части - компоненты. Также корневой модуль может обращаться к компонентам других модулей.

Архитектура детально описана в следующей главе.

Объявление корневого модуля находится в src/app/app.module.ts .

Здесь импортируются все модули и компоненты приложения.

Декоратор @NgModule() создает корневой модуль, которому передается объект конфигурации со свойствами:

imports - используемые второстепенные модули Angular;
declarations - все компоненты приложения;
bootstrap - основной компонент, отвечающий за загрузку.

Название может быть любым, но общепринято использовать AppModule .

Основной компонент приложения - AppComponent .

За объявление компонента отвечает декоратор @Component() из @angular/core . Принимаемый объект:

selector - название компонента;
template ( templateUrl ) - HTML-разметка в виде строки (путь к HTML-файлу);
styles - массив путей к CSS-файлам, содержащим стили для создаваемого компонента.

Это не все свойства декоратора @Component() , полное описание здесь.

Хорошей практикой считается вынесение HTML-разметки в отдельные файлы.

Чтобы убедиться в работоспособности происходящего, из папки my-app необходимо выполнить:

Мой локальный файл JSON выглядит следующим образом:

В консоли нет ошибок, я просто получаю такой вывод:

В моем HTML-шаблоне я хотел бы зациклить элементы следующим образом:

Я сделал это с помощью решения, которое я нашел здесь, в стеке, но я понятия не имею, почему оно не работает?

МОЕ СОБСТВЕННОЕ РЕШЕНИЕ

Я создал новый component с именем test в этой папке:

Я также создал макет с именем test.json в папке assests , созданный angular cli (важно):

Этот макет выглядит так:

В контроллере моего компонента test import следуйте rxjs следующим образом

Это важно, потому что вам нужно map своего response из вызова http get , чтобы вы получили json и могли зациклить его в своем ngFor . Вот мой код, как я загружаю фиктивные данные. Я использовал http get и назвал свой путь к макету с этим путем this.http.get("/assets/mock/test/test.json") . После этого я map ответ и subscribe его. Затем я назначаю его моей переменной items и зацикливаю его с ngFor в моем template . Я также экспортирую тип. Вот весь код моего контроллера:

И мой цикл в этом template :

Вы должны изменить

console.log показывает вам наблюдаемое, что правильно, потому что navItems содержит Observable<Response> .

Чтобы правильно получить данные в шаблоне, вы должны использовать async канал.

Если вы используете Angular CLI: 7.3.3 , я сделал следующее: в папке «Мои активы» я разместил свои поддельные данные json, а затем на своих сервисах я только что сделал это.

const API_URL = './assets/data/db.json';

Для угловых 5 + только предварительные шаги 1 и 4

Чтобы получить локальный доступ к вашему файлу в Angular 2 + , вам необходимо сделать следующее (4 шага):

[1] В папке ресурсов создайте файл .json , например: data.json .

[2] Перейдите в свой angular.cli.json (angular.json в Angular 6+) внутри своего проекта и внутри массива assets . другой объект (после объекта package.json ), подобный этому:

полный пример из angular.cli.json

Помните, data.json - это просто пример файла, который мы ранее добавили в папку ресурсов (вы можете назвать свой файл как хотите)

[4] Теперь выполните запрос GET, чтобы получить файл .json (у вас есть полный URL-адрес .json , и он должен быть просто)

Всем привет, меня зовут Сергей и я web разработчик. Да простит меня Дмитрий Карловский за заимствованное вступление, но именно его публикации вдохновили меня написание этой статьи.

Сегодня хотелось бы поговорить о работе с данными в Angular приложениях в целом и о моделях предметной области в частности.

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

а отобразить его нужно как на картинке

Выглядит несложно — давайте попробуем. Разумеется для получения этого списка у нас будет сервис UserService примерно следующего вида. Обратите внимание, что ссылка на аватарку пользователя не приходит сразу в ответе, а формируется на основе id пользователя.

За отображения списка пользователей будет отвечать компонент UserListComponent .

И вот тут у нас уже наметилась определенная проблема. Обратите внимание на ответ сервера. Поле last_name может быть пустым и если мы оставим компонент в таком виде, то будем получать нежелательные пробелы перед запятой. Какие есть варианты решения?

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

Вынести код из шаблона в класс компоненты, добавив метод типа

Уже получше, но скорее всего полное имя пользователя будет отображаться не в одном месте приложения, и нам придется дублировать этот код. Можно вынести этот метод из компоненты в сервис. Таким образом мы избавимся от возможного дублирования кода, но такой вариант мне тоже не очень нравится. А не нравится потому, что получается, что некоторая более общая сущность ( UserService ) должна знать о структуре передаваемой в нее более мелкой сущности User . Не ее уровень ответственности, как мне кажется.

На мой взгляд проблема в первую очередь возникает из-за того, что мы относимся к ответу сервера исключительно как к набору данных. Хотя ведь на самом деле он представляет собой список сущностей из предметной области нашего приложения — список пользователей. А если мы говорим о работе с сущностями, то стоит применять наиболее подходящий для этого инструментарий — методы объектно-ориентированного программирования.

Начнем с того, что создадим класс User

Конструктор класса представляет собой десериализатор ответа сервера. Логика определения полного имени пользователя естественным образом превращается в метод объекта класса User равно как и логика получения аватарки. Теперь переделаем UserService так, чтоб он возвращал нам объекты класса User как результат обработки ответа сервера

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

Давайте теперь расширим возможности нашей модели. По идее (в данном контексте мне нравится аналогия с паттерном ActiveRecord ) объекты модели пользователя должны быть ответственны не только за получение данных о себе, но и за их изменение. Например, у нас может быть возможность сменить аватарку пользователя. Как будет выглядеть расширенная такой функциональностью модель пользователя?

Таким образом мы переместили метод создания пользователя в UserService , который уместнее теперь называть фабрикой, и переложили всю работу по внедрению зависимостей на плечи Ангуляра — нам необходимо только подключить UserService в конструкторе.

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

А в компонент UserFactory предлагается внедрять под именем User

В этом случае объект класса UserFactory внешне выглядит как класс User со статическими методами для получения списка пользователей и специальным методом создания новых сущностей, а его объекты содержат все необходимые методы бизнес-логики, связанные с конкретной сущностью.

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

Update

Хотел выразить огромную благодарность всем комментирующим. Вы справедливо заметили, что для решения задачи с отображением имени стоило бы использовать Pipe . Я совершенно согласен и сам удивляюсь, почему я не привел это решение. Тем не менее основная цель статьи — показать пример создания модели предметной области (в данном случае это User ), которая могла бы в удобной форме инкапсулировать в себе всю бизнес-логику, связанную со своей сущностью. Параллельно попытался решить сопутствующую проблему с внедрением зависимостей.

Читайте также: