AngularJS \ TypeScript簡單控制器連接

我想在AngularJS開發中使用TypeScript。我是新人，只是想要獲得一些基本的積木。我開始使用本教程：http://angularfirst.com/your-first-angular-project-in-visual-studio/AngularJS TypeScript簡單控制器連接

使用它之後，我嘗試將它轉換爲TypeScript，這是我無法建立連接的地方。

我想要做的是創建一個可用作控制器的TypeScript類，目前我只是使用一個簡單的屬性包。一旦我明白如何讓課程被閱讀，我將擴展我的控制器。

我的類看起來是這樣的：

class main { 
    "use strict"; 
    public food: string; 
    constructor() { 
     var vm = this; 
     vm.food = "pizza"; 
    } 
}

我的控制器調用如下：

(function() { 

    angular 
     .module("app") 
     .controller("Main", 
     ["$scope", main]); 
});

和我的HTML：

<!DOCTYPE html> 
<html ng-app="app"> 
<head> 
    <title>Index</title> 
    <meta charset="utf-8"/> 

</head> 
<body ng-controller="Main as vm"> 

    <input type="text" ng-model="vm.food" placeholder="Enter food" /> 

    <p ng-show="food">Sriracha sauce is great with {{vm.food}}!</p> 

    <script src="Scripts/angular.min.js"></script> 
    <script src="app/app.module.js"></script> 
    <script src="app/main.js"></script> 

</body> 
</html>

我的結果是：

Sriracha sauce is great with {{vm.food}}!

我想到的是：

Sriracha sauce is great with pizza!

我曾嘗試通過$範圍到構造函數，並試圖瞭解是什麼$注入做，但還沒有得到這個工作。

任何援助將不勝感激。我陷入困境，無法在幾個晚上的搜索和播放中找到答案或示例。

感謝

編輯：我試圖從金的意見和basarat單獨和在一起，既解決方案改變了結果。

我試過在Chrome中進行調試，它沒有觸及構造函數。

通過這些例子，嘗試了一些我自己的想法和改變，這裏是我的。

class main { 
"use strict"; 
public food: string; 
constructor() { 
    this.food = "pizza"; 
    //$scope.vm = this; 

} 
} 


(function() { 

angular 
    .module("app",[]) 
    .controller("Main", function ($scope) { 
     $scope.vm = new main(); 
    }); 
});

來源

2015-09-10 OgedeiSechen

你嘗試：angular.module（「應用程序」，[]）？ –

我認爲你沒有正確地構建你的模塊。它應該有[]這樣的：

angular.module("app", []).controller("Main", function ($scope) { 
    $scope.vm = new main(); 
});

此外，您還需要通過一個功能控制器，而不是你的類。在你的範圍內，你實例化你的班級。

來源

2015-09-10 03:26:04

他也實際上沒有調用該函數。 –

把當前實例上$scope：

class main { 
    "use strict"; 
    public food: string; 
    constructor($scope) { 
     $scope.vm = this; 
     this.food = "pizza"; 
    } 
}

來源

2015-09-10 03:44:21 basarat

AngularJS \ TypeScript簡單控制器連接

回答

相關問題