I am trying to use TypeScript in AngularJS development. I am new and just trying to get some basic building blocks. I started with this tutorial: http://angularfirst.com/your-first-angular-project-in-visual-studio/
After getting it to work I tried to convert it to TypeScript and this is where I have not been able to make the connection.
What I am trying to do is to create a TypeScript class that can be used as a controller, currently I am just using a simple property bag. Once I understand how to get the class to be read then I will expand my controller.
My class looks like this:
class main {
"use strict";
public food: string;
constructor() {
var vm = this;
vm.food = "pizza";
}
}
My controller call looks like this:
(function() {
angular
.module("app")
.controller("Main",
["$scope", main]);
});
and my 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>
My result is:
Sriracha sauce is great with {{vm.food}}!
What I expect is:
Sriracha sauce is great with pizza!
I have tried passing $scope into the constructor and have tried to understand what the $inject does but have not gotten this to work.
Any assistance would be appreciated. I am stuck and have not been able to locate an answer or example in a couple nights of search and play.
Thanks
EDIT: I have tried the comments from Kim and basarat singularly and together and neither solution changed the results.
I tried debugging in Chrome and it is not hitting the constructor.
After working through the examples and trying a few of my own thoughts and changes here is what I have.
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();
});
});
