在AngularJS中保存和使用配置设置的最佳方式
在AngularJS中保存和使用配置设置的最佳方式
提问于 2014-06-18 06:06:25
我是AngularJS的新手，正在构建一个学习它的应用程序。我的应用程序调用REST API，现在我将主机名硬编码到应用程序中。我想在应用程序设置中设置它(也许以后可以在某个地方配置它)。我想我应该从一个常量开始。它应该像这样放到我的app.js中吗？如果是这样，我也不确定使用$routeProvider将其添加到.config设置的语法
(function () {
// Define module and add dependencies inside []
var app = angular.module("haClient", ["ngRoute"]);
app.constant('hostname', 'http://192.192.192.192:8176');
app.config(function ($routeProvider) {
$routeProvider
// Register routes
// Main route
.when("/main", {
templateUrl: "main.html",
controller: "MainController"//,
//activeTab: 'home'
})
// Device List
.when("/devices", {
templateUrl: "devicelist.html",
controller: "DeviceListController"
})
// Device details (param is device name)
.when("/device/:devicename", {
templateUrl: "device.html",
controller: "DeviceController"
})
// Invalid URL's get sent back to main route
.otherwise({ redirectTo: "/main" });
}); // End App Config
}());这是需要使用它的模块(从控制器调用)：
(function () {
var deviceCtrl = function ($http) {
var getDevices = function () {
return $http.get("http://192.192.192.192:8176/devices.json/")
.then(function (response) {
return response.data;
});
};
// get details and return a promise
var getDeviceDetails = function (deviceName) {
return $http.get("http://192.192.192.192:8176/devices/" + deviceName + ".json/")
.then(function (response) {
return response.data;
});
};
// Public API
return {
getDeviceDetails: getDeviceDetails,
getDevices: getDevices
};
};
var module = angular.module("haClient");
}());有没有人能告诉他们设置和获取它的最佳方法？
谢谢
回答 4
Stack Overflow用户
发布于 2014-06-18 06:15:41
目前，我通过使用模板在后端构建根.html文件来做到这一点。例如，在node.js中使用doT模板，我将其放在我的其他js下面，包括：
<!-- load any templated constants -->
<script>
angular.module('mymod').constant('globals', {
api: '{{=it.api}}'
});
</script>这样，我的后端就可以计算出客户端需要指向的逻辑。为了在另一个服务或控制器中使用该值，您只需按名称注入常量：
angular.module('somemod', []).factory('myservice', ['globals', function(globals){
// use globals.api or what ever you set here for example
}]);Stack Overflow用户
发布于 2014-06-18 11:50:22
进行配置的最佳位置是在提供程序和配置块中。
提供者公开了一个API，它允许您在将服务注入到控制器和指令之前对其进行配置。
假设您有一个名为myService的服务，您希望将其注入到控制器函数中，如下所示：
app.controller('ctrl', function($scope, myService) { ...});myService负责通过web调用检索数据。让我们进一步假设您希望使用根URL htt://servername/配置您的服务，因为所有调用都将共享相同的主机名。
您可以这样定义您的myServiceProvider：
app.provider('myService', function(){
var webapiurl;
this.setWebServiceUrl = function (url) {
webapiurl = url;
}
// the injector will call the $get function to create the singleton service that will be injected
this.$get = function( /*injectables*/) {
return {
getData: function() {... Use webapiurl ...}
}
}
});然后在您的配置函数中，配置您的提供者：
app.config(function(myServiceProvider){
myServiceProvider.setWebServiceUrl('htt://servername');
});最后，您可以将服务注入到可以注入的任何位置：
app.controller('ctrl', function($scope, myService) {
$scope.data = myService.getData();
});Stack Overflow用户
发布于 2014-06-19 03:28:26
我无法获得所提供的答案来工作(没有理由认为它们不会)。这是我所做的。
我的主app.js (常量部分)
(function () {
// Define module and add dependencies inside []
var app = angular.module("haClient", ["ngRoute"]);
//constants
app.constant('mySettings', {
baseURL: 'http://192.192.192.192:8176',
otherSetting: 'XYZ'
});
app.config(function ($routeProvider) {
$routeProvider
// Register routes
// Main route
.when("/main", {
templateUrl: "main.html",
controller: "MainController"//,
//activeTab: 'home'
})
// Device List
.when("/devices", {
templateUrl: "devicelist.html",
controller: "DeviceListController"
})
// Device details (param is device name)
.when("/device/:devicename", {
templateUrl: "device.html",
controller: "DeviceController"
})
// Invalid URL's get sent back to main route
.otherwise({ redirectTo: "/main" });
}); // End App Config
}());在我的服务中(添加mySettings作为依赖项，然后使用mySettings.baseURL)：
(function () {
var deviceCtrl = function ($http, $log, mySettings) {
$log.info("DeviceCtrl - baseURL: " + mySettings.baseURL);
// get device list and return a promise
var getDevices = function () {
return $http.get(mySettings.baseURL + "/devices.json")
.then(function (response) {
return response.data;
});
};
// get details and return a promise
var getDeviceDetails = function (deviceName) {
$log.info("DeviceCtrl - Getting device info for " + deviceName);
return $http.get(mySettings.baseURL + "/devices/" + deviceName + ".json")
.then(function (response) {
return response.data;
});
};
// Public API
return {
getDeviceDetails: getDeviceDetails,
getDevices: getDevices
};
};
var module = angular.module("haClient");
module.factory("deviceCtrl", deviceCtrl);
}());我当然不是专家(因为无法得到有效的答案)，我也不确定这种方法是否有任何缺点。它让我可以继续我的项目，并学习更多关于Angular的知识，所以我继续使用它。
问候
标记
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24274070
复制相关文章
相似问题
腾讯云开发者
