我是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");
}());
有人可以通过最佳方式设置并获取它吗?
由于
答案 0 :(得分:0)
我目前通过使用模板在后端构建根.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
}]);
答案 1 :(得分:0)
进行配置的最佳位置是在提供程序中和配置块中。
提供商公开了一个API,允许您在将服务注入控制器和指令之前对其进行配置。
假设您有一个名为myService的服务,您希望将其注入控制器函数,如下所示:
app.controller('ctrl', function($scope, myService) { ...});
myService负责通过Web API调用检索数据。让我们进一步假设您希望使用根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();
});
答案 2 :(得分:0)
我无法得到所提供的工作答案(没有理由认为他们不会)。这就是我所做的。
我的主要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,所以我选择了它。
此致
标记
答案 3 :(得分:0)
我已经使用了另一个模块并将其注入app模块,如此
创建constant.js并将其包含在index.html&amp;在
中添加以下代码 angular.module('constantsModule', []).constant('BASEURL', 'http://google.com');
在app.js中,注入'constantsModule',使其中的所有常量都可用于'haClient'
angular.module('haClient', [
'constantsModule'
])
.config(function ($routeProvider) {
.when('/', {
templateUrl: 'views/landing.html',
controller: 'landingCtrl'
})
});
在landingCtrl中,由于它在'haClient'的范围内,我们可以从'constantsModule'中注入BASEURL常量
angular.module('haClient').controller('landingCtrl', function ($scope, BASEURL) {
// just to show, how to access it inside controller
$scope.baseurl = BASEURL;
});