javascript - 在 AngularJs 的 Controller 中引用本地 json 对象

Question

这可能是一件微不足道的事情，但我对 AngularJs 太陌生了，以至于我无法找到正确的答案。

我想从 Controller 移动一个对象，它最初被定义到某个对象文件中，然后我想将该对象导入回 Controller ，以便我可以使用它的值。

所以基本上 UTCTimeZones.js 是内部具有此值的对象容器:

export default {
    timeZones: [{ value: "Dateline Summer Time", name: "UTC-12", offset: "+1200" }, { value: "UTC-11", name: "UTC-11", offset: "+1100" },
                { value: "Aleutian Standard Time", name: "UTC-10", offset: "+1000" }, { value: "Marquesas Standard Time", name: "UTC-9:30", offset: "+0930" },
                { value: "Alaskan Standard Time", name: "UTC-9", offset: "+0900" }, { value: "Pacific Standard Time", name: "UTC-8", offset: "+0800" },
                { value: "US Mountain Standard Time", name: "UTC-7", offset: "+0700" }, { value: "Central America Standard Time", name: "UTC-6", offset: "+0600" },
                { value: "Haiti Standard Time", name: "UTC-5", offset: "+0500" }, { value: "Pacific S.A. Standard Time", name: "UTC-4", offset: "+0400" },
                { value: "Newfoundland Standard Time", name: "UTC-3:30", offset: "+0330" }, { value: "E. South America Standard Time", name: "UTC-3", offset: "+0300" },
                { value: "UTC-02", name: "UTC-2", offset: "+0200" }, { value: "Azores Standard Time", name: "UTC-1", offset: "+0100" },
                { value: "UTC", name: "UTC", offset: "+0000" }, { value: "Central Europe Standard Time", name: "UTC+1", offset: "-0100" },
                { value: "GTB Standard Time", name: "UTC+2", offset: "-0200" }, { value: "Belarus Standard Time", name: "UTC+3", offset: "-0300" },
                { value: "Iran Standard Time", name: "UTC+3:30", offset: "-0330" }, { value: "Arabian Standard Time", name: "UTC+4", offset: "-0400" },
                { value: "Afghanistan Standard Time", name: "UTC:4:30", offset: "-0430" }, { value: "West Asia Standard Time", name: "UTC+5", offset: "-0500" },
                { value: "India Standard Time", name: "UTC+5:30", offset: "-0530" }, { value: "Nepal Standard Time", name: "UTC+5:45", offset: "-0545" },
                { value: "Central Asia Standard Time", name: "UTC+6", offset: "-0600" }, { value: "Myanmar Standard Time", name: "UTC+6:30", offset: "-0630" },
                { value: "SE Asia Standard Time", name: "UTC+7", offset: "-0700" }, { value: "W. Australia Standard Time", name: "UTC+8", offset: "-0800" },
                { value: "North Korea Standard Time", name: "UTC+8:30", offset: "-0830" }, { value: "Aus Central W. Standard Time", name: "UTC+8:45", offset: "-0845" },
                { value: "Tokyo Standard Time", name: "UTC+9", offset: "-0900" }, { value: "AUS Central Standard Time", name: "UTC+9:30", offset: "-0930" },
                { value: "E. Australia Standard Time", name: "UTC+10", offset: "-1000" }, { value: "Lord Howe Standard Time", name: "UTC+10:30", offset: "-1030" },
                { value: "Russia Time Zone 10", name: "UTC+11", offset: "-1100" }, { value: "New Zealand Standard Time", name: "UTC+12", offset: "-1200" },
                { value: "Chatham Islands Standard Time", name: "UTC+12:45", offset: "-1245" }, { value: "Tonga Standard Time", name: "UTC+13", offset: "-1300" },
                { value: "Line Islands Standard Time", name: "UTC+14", offset: "-1400" }]
};

所有时区，以及 timeZones 对象内的一些附加数据。如何导入此文件并从其他文件访问时区，例如从 NewTestSessionController.js 中，如下所示:

import toastr from "toastr";

    class NewTestSessionController {
        constructor($rootScope, $scope, $state, resources, NewTestSessionService) {
            this.$rootScope = $rootScope;
            this.$scope = $scope;
            this.$state = $state;
            this.resources = resources;
            this.NewTestSessionService = NewTestSessionService;

            this.clientDateTimeZone = null;
            this.sessionDate = {
                opened: false,
                dateOptions: {
                    maxDate: new Date(2020, 5, 22),
                    minDate: new Date(),
                    startingDay: 1
                },
                format: "dd.MM.yyyy"
            };

            this.viewData = {
                events: [],
                locations: [],
                sessionStarTimeIntervals: this.generateTimeIntervalArray(15),
                timeZones: //reference json UTCTimeZones object here, ...

最好的方法是什么？我是否像使用 toastr 那样导入它，或者像使用 NewTestSessionService 那样将整个对象注入(inject)到构造函数中？

该服务在index.js中定义:

import NewTestSessionController from "./NewTestSessionController";
import AddNewPersonDirective from "./AddNewPersonDirective";
import NewTestSessionService from "./NewTestSessionService";
import UTCTimeZones from "./UTCTimeZones";

export default angular.module("examino.hrTesting.newTestSession", ["ui.router", "examino.constants"])
    .config(function($stateProvider, config) {
        $stateProvider
            .state("hrTesting.newTestSession", {
                url: "/new-test-session",
                controller: "NewTestSessionController",
                templateUrl: config.getTemplateLocation("new-test-session.html"),
                controllerAs: "newTestSessionCtrl"
            });
    })
    .controller("NewTestSessionController", NewTestSessionController)
    .service("NewTestSessionService", NewTestSessionService)
    .directive("xmAddNewPerson", AddNewPersonDirective)
    .name;

这里我有 .controller、.service、.directive 用于注册不同的东西。那么我会用什么作为对象呢？

获取本地对象时，您建议的最佳方案是什么？

Answer 1

最好的方法是使用服务来传递值。“Angular 服务是:

延迟实例化——Angular 仅在应用程序组件依赖于服务时才实例化该服务。单例 – 每个依赖于服务的组件都会获得对服务工厂生成的单个实例的引用。”

在 Controller 中，您可以传递依赖项，然后使用服务中的该值。

请阅读 https://docs.angularjs.org/guide/services