Extract Angular services in the frontend into individual files.

This is intended as a starter project for newer contributors. Many thanks to @shubha1593 for compiling this list.

As part of our ongoing frontend refactor, we want our frontend codebase to have one service per file. Each of the following files contains a list of services. The aim of this issue is to extract each service into a separate file, and also:

• Ensure that the name of the service follows UpperCamelCase, and ends with “Service”.
• Ensure that the name of the file is the same as that of the service.
• Find all places where this service is being referenced and rename them.
• Find all places where the file is being imported, and modify those paths accordingly.

For example, here is how the factory ‘trainingModalService’ in ‘core/templates/dev/head/pages/exploration_editor/editor_tab/StateEditor.js’ would be handled:

1. We extract the whole factory definition into a new file named ‘TrainingModalService.js’.
2. We rename the factory to ‘TrainingModalService’.
3. ‘trainingModalService’ is being referenced in the ‘StateStatistics’ controller in ‘core/templates/dev/head/pages/exploration_editor/editor_tab/StateStatistics.js’ and other places. Find all occurrences and rename them to ‘TrainingModalService’. You can use a command like grep trainingModalService . -r --exclude-dir=third_party --exclude-dir=build --exclude-dir=backend_prod_files.
4. The StateEditor.js script is included in ‘core/templates/dev/head/pages/exploration_editor/exploration_editor.html’. If the new service is used in these places, include it in the list of imports too in a similar way. (Some code analysis may be needed in order to figure out whether the new service is actually used or not.)
5. Manually test the affected pages to verify that everything works perfectly and that there are no console errors.

If you would like to help with this issue, please select a file from the list below, put your name in parentheses next to it, and submit a PR that addresses the services in that file. If you prefer, you can also submit partial PRs that only extract some of the services from a file – feel free to do whatever is manageable. Please add @shubha1593 as a reviewer for the PR. Once the PR is submitted, you can tick the checkboxes. Note that all filepaths should be assumed to start from core/templates/dev/head.

---

Completed

• app.js: move the following to core/templates/dev/head/services/

  • oppiaDatetimeFormatter → DateTimeFormatService @vibhor98 #4161

• app.js: move the following to core/templates/dev/head/services/ @jordancockles

  • extensionTagAssemblerService → ExtensionTagAssemblerService – #5711
  • siteAnalyticsService → SiteAnalyticsService – #5711

• i18n.js @jervis446 #4118

  • I18nFileHashLoader → TranslationFileHashLoaderService
  • i18nIdService → ConstructTranslationIdsService

• pages/exploration_editor/EditorServices.js

  • autosaveInfoModalsService → AutosaveInfoModalsService @ishucr7 #4414
  • editabilityService → EditabilityService @96mohitm #4331
  • explorationData → ExplorationDataService @bching #3970
  • editorContextService → EditorStateService @bching #3970
  • angularNameService → AngularNameService @bching #3970
  • explorationWarningsService → ExplorationWarningsService @nithusha21 #4106
  • editorFirstTimeEventsService → EditorFirstTimeEventsService @aks681 #4124
  • explorationRightsService → ExplorationRightsService @lunareve #4139
  • computeGraphService → ComputeGraphService @tjiang11 (#4149)
  • lostChangesService → ChangesInHumanReadableFormService @darthgera123 (#4194)
  • changeListService → ChangeListService @YimingPan (#4379)
  • stateEditorTutorialFirstTimeService → StateEditorTutorialFirstTimeService @GanitGenius (#4137)
  • graphDataService → GraphDataService @EvsChen (#4379)

• app.js: move the following to core/templates/dev/head/services/stateful/ (make a new directory if needed) (@Nix07)

  • focusService → FocusManagerService
  • BackgroundMaskService → BackgroundMaskService

• app.js: move the following to core/templates/dev/head/services/

  • oppiaDebouncer → DebouncerService (@rdrsadhu) #3917
  • IdGenerationService → IdGenerationService (@rdrsadhu) #3923
  • codeNormalizationService → CodeNormalizerService (@rdrsadhu) #3925

• app.js: move the following to core/templates/dev/head/services/contextual/ (make a new directory if needed) @shubha1593

  • windowDimensionsService → WindowDimensionsService
  • deviceInfoService → DeviceInfoService
  • urlService, currentLocationService → UrlService (merge both)

• pages/exploration_editor/editor_tab/StateEditor.js (@ishucr7)

  • trainingModalService → TrainingModalService #3920
  • trainingDataService → TrainingDataService

• pages/exploration_editor/editor_tab/StateResponses.js (@GaganSuneja)

  • responsesService → ResponsesService

• pages/exploration_editor/history_tab/HistoryServices.js (@GaganSuneja)

  • versionsTreeService → VersionTreeService
  • compareVersionsService → CompareVersionsService

• pages/exploration_editor/editor_tab/StateResponses.js

  • answerGroupsCache → AnswerGroupsCacheService (@rdrsadhu) #3826

• pages/exploration_editor/editor_tab/StateInteraction.js

  • interactionDetailsCache → InteractionDetailsCacheService (@GaganSuneja)

• app.js

  • validatorsService → ValidatorsService (@shubha1593)
  • oppiaHtmlEscaper → HtmlEscaperService (@shubha1593)
  • rteHelperService → RteHelperService @kunalgarg2100 (#4392)

• components/forms/FormBuilder.js @Kunalgarg2100 (#4457, #4476, #4518)

  • schemaDefaultValueService → SchemaDefaultValueService –@Kunalgarg2100

  • schemaUndefinedLastElementService → SchemaUndefinedLastElementService

  • recursionHelper → NestedDirectivesRecursionTimeoutPreventionService

  • Create one file, ExplorationPropertyService.js, for explorationPropertyService and its subclasses @Aashish683 (#4589)

    • explorationPropertyService → ExplorationPropertyService
    • explorationTitleService → ExplorationTitleService
    • explorationCategoryService → ExplorationCategoryService
    • explorationObjectiveService → ExplorationObjectiveService
    • explorationLanguageCodeService → ExplorationLanguageCodeService
    • explorationInitStateNameService → ExplorationInitStateNameService
    • explorationTagsService → ExplorationTagsService
    • explorationParamSpecsService → ExplorationParamSpecsService
    • explorationParamChangesService → ExplorationParamChangesService
    • explorationGadgetsService → ExplorationGadgetsService
    • explorationStatesService → ExplorationStatesService

  • Rename EditorServices.js to StatePropertyService.js @aks681

    • statePropertyService → StatePropertyService
    • stateContentService → StateContentService
    • stateParamChangesService → StateParamChangesService
    • stateInteractionIdService → StateInteractionIdService
    • stateCustomizationArgsService → StateCustomizationArgsService
    • stateFallbacksService → StateFallbacksService
    • stateHintsService → StateHintsService

[seanlip]

Hi @jordancockles, thanks! I just took a look, and the remaining tasks needed to close out this issue are pretty straightforward, so I just assigned you to all of them. Does that sound OK?

Thanks!

[seanlip]

OK, you’re assigned 😃 Have fun!