在TypeScript中注入角度常量

时间:2015-11-30 22:31:01

标签: angularjs typescript

我已将我的第一个角度工厂转换为我项目中的TypeScript。我现在正试图从一个新的打字稿文件中引入常量。

这是最终将包含多个常量值的打字稿文件

module app.config {
     export class Constants {
         static get Default(): any {
             return {
                 apiServer: 'http://localhost/MyApplication'
             }
         }

     }

     angular
         .module('app');
 }

以下是新的TypeScript文件,我试图提取以前在apiServer文件中的constants.config.js的值

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);
 }

当我在此服务中对apiServer的值进行硬编码时,它运行正常。我收到的错误是:

  

无法读取未定义的'常量'的属性。

我需要对app.config文件做些什么才能在app.services文件中访问它?

旁注:似乎很奇怪,有一个空白controller我确定没有正确使用。

2 个答案:

答案 0 :(得分:3)

有两个问题。

予。语法

首先是如何使用上述Constant声明。有一个完全working adjusted example (点击右上角的运行以查看结果)

最重要的是我们不能使用它:

var constant = new app.config.Constants.Default();

因为我们使用静态getter。语法必须是

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。脚本加载到页面

的顺序

以下是broken example,运行时会返回此错误:

  

TypeError:无法读取未定义

的属性“常量”

原因是 - 我们必须以正确的顺序加载所有相关的东西。以下案例显示app.config声明太晚了:

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...
}

答案 1 :(得分:0)

  

我收到的错误是它无法读取'常数'未定义的

命名空间(module关键字)和使用out的常见问题:https://github.com/TypeStrong/atom-typescript/blob/master/docs/out.md

修复:使用外部模块和构建工具,如webpack / browserify。