在注射角打字稿的常量 [英] Inject Angular Constants in TypeScript
问题描述
我已经转换我的第一个角厂打字稿在我的项目。现在我想在常量带来从一个新的打字稿文件。
I have converted my first angular factory to TypeScript in my project. I'm now trying to bring in the constants from a new typescript file.
下面是打字稿文件，最终将容纳超过一个恒定值
Here is the typescript file that will eventually hold more than one constant value
module app.config {
export class Constants {
static get Default(): any {
return {
apiServer: 'http://localhost/MyApplication'
}
}
}
angular
.module('app');
}
这里就是我想在这曾经是在 constants.config 文件 API服务器的值来拉动新的打字稿文件。 JS
Here is the new TypeScript file where I'm trying to pull in the value of apiServer that used to be in a constants.config.js file
module app.services {
interface IStoreFactory {
apiServer: string;
}
var constant = new app.config.Constants.Default();
export class StoreFactory implements IStoreFactory {
static $inject = ['$http', '$log']
constructor(private $http, $log) {
}
apiServer = constant.apiServer;
getRegisters() {
return this.$http.get(this.apiServer + 'stores/1/registers');
}
}
angular
.module('app.services')
.service('storeFactory', StoreFactory);
}
当我辛苦codeD API服务器在此服务的价值它工作得很好。我得到的错误，即：
When I hard coded the value of apiServer in this service it worked fine. I'm getting the error that it:
无法读取的不确定'常量'的属性。
cannot read property of 'Constants' of undefined.
什么我需要做的的app.config 文件，以使其在访问的 app.services 文件？
What do I need to do to the app.config file to make it accessible in the app.services file?
的边注：此外，它似乎很奇怪，有一个空白控制器我敢肯定，没有被正确使用的
Side note: Also it seems odd that there is a blank controller I'm sure that isn't being used correctly.
推荐答案
有两个问题。
首先是如何消费上面恒声明。这里是一个完全<一个href=\"http://www.typescriptlang.org/Playground#src=module%20app.config%20%7B%0A%20%20%20%20%20export%20class%20Constants%20%7B%0A%20%20%20%20%20%20%20%20%20static%20get%20Default()%3A%20any%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20return%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20apiServer%3A%20'http%3A%2F%2Flocalhost%2FMyApplication'%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%7D%0A%2F%2F%20%20%20%20%20angular%0A%2F%2F%20%20%20%20%20%20%20.module('app')%3B%0A%7D%0A%0Amodule%20app.services%20%7B%0A%20%20%20%20interface%20IStoreFactory%20%7B%0A%20%20%20%20%20%20%20%20apiServer%3A%20string%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20%2F%2F%20wrong%20statement%0A%20%20%20%20%2F%2Fvar%20constant%20%3D%20new%20app.config.Constants.Default()%3B%0A%09%2F%2F%20Constants%20is%20a%20property%20not%20method%2C%20and%20is%20NOT%20instance%20member%0A%20%20%20%20var%20constant%20%3D%20app.config.Constants.Default%3B%0A%09%0A%09%2F%2F%20just%20to%20be%20able%20to%20run%20this%20(click%20Run%20on%20the%20top-right)%0A%09var%20div%20%3D%20document.createElement(%22DIV%22)%3B%0A%09div.innerText%20%3D%20constant.apiServer%0A%09document.body.appendChild(div)%3B%09%0A%09%0A%20%20%20%20export%20class%20StoreFactory%20implements%20IStoreFactory%20%7B%0A%0A%20%20%20%20%20%20%20%20static%20%24inject%20%3D%20%5B'%24http'%2C%20'%24log'%5D%0A%20%20%20%20%20%20%20%20constructor(private%20%24http%2C%20%24log)%20%7B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20apiServer%20%3D%20constant.apiServer%3B%0A%0A%20%20%20%20%20%20%20%20getRegisters()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20this.%24http.get(this.apiServer%20%2B%20'stores%2F1%2Fregisters')%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%2F%2F%20%20%20%20angular%0A%2F%2F%20%20%20%20%20%20.module('app.services')%0A%2F%2F%20%20%20%20%20%20.service('storeFactory'%2C%20StoreFactory)%3B%0A%7D%0A%20\"相对=nofollow>工作调整例如的（点击运行在右上角看到的结果）的
The first is how to consume the above Constant declaration. There is a fully working adjusted example (click run in top right corner to see the result)
最重要的是，我们不能用这样的：
The most important is that we cannot use this:
var constant = new app.config.Constants.Default();
由于我们静态的getter工作。语法必须
because we work with static getter. The syntax must be
var constant = app.config.Constants.Default;
完整的例子：
module app.config {
export class Constants {
static get Default(): any {
return {
apiServer: 'http://localhost/MyApplication'
}
}
}
// angular...
}
module app.services {
interface IStoreFactory {
apiServer: string;
}
// wrong statement
//var constant = new app.config.Constants.Default();
// Constants is a property not method, and is NOT instance member
var constant = app.config.Constants.Default;
// just to be able to run this (click Run on the top-right)
var div = document.createElement("DIV");
div.innerText = constant.apiServer
document.body.appendChild(div);
export class StoreFactory implements IStoreFactory {
static $inject = ['$http', '$log']
constructor(private $http, $log) {
}
apiServer = constant.apiServer;
getRegisters() {
return this.$http.get(this.apiServer + 'stores/1/registers');
}
}
// angular...
}
二。脚本的顺序加载到页面
II. order of scripts loaded into page
下面是<一个href=\"http://www.typescriptlang.org/Playground#src=%0A%0Amodule%20app.services%20%7B%0A%20%20%20%20interface%20IStoreFactory%20%7B%0A%20%20%20%20%20%20%20%20apiServer%3A%20string%3B%0A%20%20%20%20%7D%0A%20%20%20%20try%20%7B%0A%20%20%20%20%09var%20constant%20%3D%20app.config.Constants.Default%3B%0A%09%7D%0A%09catch(ex)%7B%0A%09%20%20%20%20%2F%2F%20just%20to%20be%20able%20to%20run%20this%20(click%20Run%20on%20the%20top-right)%0A%09%20%20%20%20var%20div%20%3D%20document.createElement(%22DIV%22)%3B%0A%09%20%20%20%20div.innerText%20%3D%20ex%3B%0A%09%20%20%20%20document.body.appendChild(div)%3B%0A%09%7D%09%0A%09%0A%20%20%20%20export%20class%20StoreFactory%20implements%20IStoreFactory%20%7B%0A%0A%20%20%20%20%20%20%20%20static%20%24inject%20%3D%20%5B'%24http'%2C%20'%24log'%5D%0A%20%20%20%20%20%20%20%20constructor(private%20%24http%2C%20%24log)%20%7B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20apiServer%20%3D%20constant.apiServer%3B%0A%0A%20%20%20%20%20%20%20%20getRegisters()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20this.%24http.get(this.apiServer%20%2B%20'stores%2F1%2Fregisters')%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%2F%2F%20%20%20%20angular%0A%2F%2F%20%20%20%20%20%20.module('app.services')%0A%2F%2F%20%20%20%20%20%20.service('storeFactory'%2C%20StoreFactory)%3B%0A%7D%0A%0A%0Amodule%20app.config%20%7B%0A%20%20%20%20%20export%20class%20Constants%20%7B%0A%20%20%20%20%20%20%20%20%20static%20get%20Default()%3A%20any%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20return%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20apiServer%3A%20'http%3A%2F%2Flocalhost%2FMyApplication'%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%7D%0A%2F%2F%20%20%20%20%20angular%0A%2F%2F%20%20%20%20%20%20%20.module('app')%3B%0A%7D\"相对=nofollow>破例如，这在运行时 - 将返回这个错误：
Here is the broken example, which when run - will return this error:
类型错误：无法读取的未定义的属性'常量'
TypeError: Cannot read property 'Constants' of undefined
原因是 - 我们必须装入所有相关的东西，在正确的顺序。下面的案例表明，app.config中声明太晚了：
The reason is - we must load all the related stuff in correct order. The below case shows that app.config is declared too late:
module app.services {
interface IStoreFactory {
apiServer: string;
}
try {
var constant = app.config.Constants.Default;
}
catch(ex){
// just to be able to run this (click Run on the top-right)
var div = document.createElement("DIV");
div.innerText = ex;
document.body.appendChild(div);
}
export class StoreFactory implements IStoreFactory {
static $inject = ['$http', '$log']
constructor(private $http, $log) {
}
apiServer = constant.apiServer;
getRegisters() {
return this.$http.get(this.apiServer + 'stores/1/registers');
}
}
// angular...
}
// TOO late
module app.config {
export class Constants {
static get Default(): any {
return {
apiServer: 'http://localhost/MyApplication'
}
}
}
// angular...
}
这篇关于在注射角打字稿的常量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
