Build your first project with angularjs and typescript in Visual Studio

1. Create new ASP.Net Web Application, remember to select the empty template

2. Open Command Line window and go to your project folder

3.

npm init

4.

npm install typescript --save-dev

5.

npm install @types/angular --save

6.

npm install angular

7. Create a tsconfig.json like this:

{
        “compileOnSave”: true,
        “compilerOptions”: {
                  “noImplicitAny”: false,
                  “noEmitOnError”: true,
                  “removeComments”: true,
                  “sourceMap”: true,
                  “target”: “es5”
         },
         “include”: [
                  “Scripts/*”
         ]
}

8. Create a file “Index.html” in your root folder

<!DOCTYPE html>
<html>

<head>
         < script src=”/node_modules/angular/angular.js”></script>
         < script src=”scripts/script.js”></script>
</head>

<body>
         <myangularjs></myangularjs>
</body>

</html>

9. Create a folder “Scripts” and add a new ts file “script.ts” in it

var module = angular.module(“myAwesomeApp”, []);

module.component(“myangularjs”, {
         template: “This is my template”,
         controller: function myAngularJSController() { },
         controllerAs: “$ctrl”
});

angular.element(document).ready(function () {
         angular.bootstrap(document, [“myAwesomeApp”]);
});

Here is the completed structure, please press F5 to see what happen:

CompleteStructure.png

 

Advertisements