[Гайд]Изменение динамических данных в шаблоне личной страницы на AngularJS

Изменение списка разделов на главной странице

Список разделов хранится в файле topics/topics.json. Данный файл представляет из себя json-массив, элементы которого описывают отдельные разделы.

[
    {
        "id": 1,
        "title": "UML Use Case",
        "description": "Диаграмма прецедента",
        "preview": "img/use-case-diagram.png"
    },
    {
        "id": 2,
        "title": "UML Class",
        "description": "Диаграмма классов",
        "preview": "img/class-diagram.png"
    }
]

Как можно заметить, каждый элемент состоит из следующих полей:

• id - идентификатор раздела
• title - заголовок
• description - краткое описание
• preview - ссылка на картинку-превью

Чтобы добавить новый раздел, достаточно добавить новый элемент в этот массив со всеми необходимыми полями:

[
    {
        "id": 1,
        "title": "UML Use Case",
        "description": "Диаграмма прецедента",
        "preview": "img/use-case-diagram.png"
    },
    {
        "id": 2,
        "title": "UML Class",
        "description": "Диаграмма классов",
        "preview": "img/class-diagram.png"
    },
    {
        "id": 3,
        "title": "Новый раздел",
        "description": "Описание нового раздела",
        "preview": "img/new-diagram.png"
    }
]

В качестве preview можно указывать ссылку на картинку, находящуюся в папке img проекта или ссылку на любую картинку в сети, например https://img.youtube.com/vi/dQw4w9WgXcQ/1.jpg

Изменение содержимого раздела

Содержимое каждого раздела хранится в файле topics/id.json, где id - идентификатор раздела, используемый в topics/topics.json Например, содержимое раздела с id: 1 хранится в файле 1.json.

Внутри файла с содержимым находится объект, содержащий поля title и items.

{
    "title": "UML Class",
    "items": [
        
    ]
}

Массив items содержит элементы, из которых формируется тело раздела. Каждый элемент содержит следующий поля:

• type - тип элемента
• data - содержимое, структура различается в зависимости от типа

{
    "type": "text",
    "data": []
}

В настоящий момент реализовано 3 вида элементов:

• текст - "type": "text"
• картинка - "type": "image"
• список - "type": "list"

Текст

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

Содержимое отдельного элемента с текстом:

{ 
    "text": "Разработка диаграммы", 
    "class": "md-title",
    "style": {
        "font-style": "italic",
        "color": "red"
    },
    "link": "https://plantuml.com"
}

• text - непосредственно сам фрагмент текста
• class - опциональное поле. css класс, который будет использован для применения стиля к фрагменту текста. можно создать свой класс в файле style.css и использовать его или же использовать существующие классы для текста из библиотеки AngularJS Material: md-subhead, md-title, md-headline, md-display-1, md-display-2, md-display-3.
• style - опциональное поле. объект со стилем, в котором можно использовать стили css для дополнительной стилизации текста.
• link - опциональное поле. здесь задается любая ссылка. если поле присутствует, то фрагмент текста становится кликабельным.

Изображение

Для элемента с типом image поле data представляет собой строку, содержащую ссылку на изображение. Изображения рекомендуется загружать в папку img.

{
    "type": "image",
    "data": "img/use-case-diagram.png"
}

Список

Для элемента с типом list поле data представляет собой массив, содержащий пункты списка. Каждый пункт также в свою очередь представляет собой массив, содержащий фрагменты текста для отображения в этом пункте. Фрагмент текста содержит следующую структуру (аналогичную описанной в разделе "текст"):

{ 
    "text": "Разработка диаграммы", 
    "class": "md-title",
    "style": {
        "font-style": "italic",
        "color": "red"
    },
    "link": "https://plantuml.com"
}

• text - непосредственно сам фрагмент текста
• class - опциональное поле. css класс, который будет использован для применения стиля к фрагменту текста. можно создать свой класс в файле style.css и использовать его или же использовать существующие классы для текста из библиотеки AngularJS Material: md-subhead, md-title, md-headline, md-display-1, md-display-2, md-display-3.
• style - опциональное поле. объект со стилем, в котором можно использовать стили css для дополнительной стилизации текста.
• link - опциональное поле. здесь задается любая ссылка. если поле присутствует, то фрагмент текста становится кликабельным.

Таблица

Представляет собой элемент с типом table. Поле data представляет собой объект, содержащий следующие поля:

• columns - массив, содержащий колонки таблицы. каждая колонка представляет собой объект с полями id - идентификатор колонки (любая строка, уникальный) и name - отображаемое имя колонки:

"columns": [
     {
        "id": "member",
         "name": "Участник"
     },
     {
         "id": "action",
         "name": "Действие"
     },
     {
         "id": "result",
         "name": "Ожидаемый результат"
     }
]

• rows - массив, содержащий строки таблицы. каждая строка представляет собой объект вида ключ-значение (идентификатор колонки - значение колонки). Т.к. в данном примере есть 3 колонки с идентификаторами member, action, result, объекты из массива строк содержат 3 соответствующих поля:

"rows": [
    {"member": "Студент", "action": "Формирует личную веб-страницу", "result": "Личная веб-страница на хостинге <имя>.github.io"},
    {"member": "Студент", "action": "Описывает выбранный прецедент", "result": "Описание прецедента на хостинге <имя>.github.io"},
    {"member": "Студент", "action": "Формирует диаграмму Use Case", "result": "Диаграмма прецедента на хостинге <имя>.github.io"}
]