在AngularJs中引用控制器中的本地json对象

Question

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

我有一个对象想要从控制器中移动，它最初被定义到某个对象文件中，然后我想把这个对象重新导入到控制器中，这样我就可以使用它的值了。

​

​

所以从本质上讲，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对象中有一些额外的数据。如何导入此文件并从其他一些文件访问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那样在构造器中注入整个对象？

此服务在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用来注册不同的东西。那么我应该为object使用什么呢？

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

Answer 1

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

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

在控制器中，您可以传递依赖项，然后使用来自服务的值。

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

Answer 2

这里有几种方法：

角常量

如果对象根本不会改变，你可以定义一个Angular constant。我假设，由于这些是时区，您不太可能更改它们。

    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)
.constant("TimeZones", {
    timeZones: [
        { 
          value: "Dateline Summer Time", 
          name: "UTC-12", offset: "+1200"
        }
        // and other time zones
   ]
)
.name;

一旦定义了常量，您只需通过控制器函数中的参数引用它

function NewTestSessionController($http, TimeZones) {
    // do something with TimeZones here
}

使用常量的好处是，可以将常量注入到其他控制器和服务中，并在代码试图修改常量的值时清除错误

异步调用

这更难，但更灵活。如果这是一个可以随时更新的配置文件，您可以使用$http从您的后端异步拉入配置文件。您的控制器将使用$http.get调用来获取时区对象。这使您可以独立于代码进行更改，还可以调用第三方API在将来提供相同的数据。缺点是，一旦获得配置文件，您现在就必须将所有后续功能包装到promise结果中。随着应用程序的扩展，如果您的配置文件需要灵活更改，这可能是更好的方法。