Angular for strongly typed people – setup


This is part of a blog series – please read the intro part and install the prerequisites if you want to follow along.

The starter project from https://github.com/TessFerrandez/TheMall is an ASP.NET 5 Web Web API where I have just added a few html pages to the wwwroot directory and templates directory.

I have also added a bower.json file for the Bower package manager, so that we can import client libraries. For now I am importing just the base angular and bootstrap libraries.

{
  "name": "ASP.NET",
  "private": true,
  "dependencies": {
    "angular": "1.4.6",
    "bootstrap": "3.3.5"
  }
}

Note that by default the .bowerrc file points out that the libraries should be copied to the wwwroot/lib folder so we can include the scripts in index.html like this.

<!-- library scripts -->
<script src="lib/angular/angular.js"></script>

And the bootstrap css in the head section

<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css" />

Preferably, you should grab the angular scripts and bootstrap css from a CDN in production and use the minified version. You can find more info about that in the ASP.NET/Angular docs.

In index.html I have added a few angular items to get started

  1. An ng-app directive on the html tag to mark the whole document as an angular app – for now just ignore this, we’ll get to it later
  2. An ng-include tag that includes the header.html file. This is similar to old school asp includes – i.e. the contents of header.html are just copied in between the ng-include tags when you browse to the page. This is a nice technique to modularize content and clean things up.
  3. Another ng-include tag that includes the templates/storeListView.html. This is our main content area, and in the routing post we’ll dynamically switch HTML between store listing and store details.

Note: remember both the “ and the ‘ in the src tag, I’ve lost some time troubleshooting why the included content wasn’t showing up.

A little less conversation, a little more action please…

Ok, we have all the basic stuff in place, it’s time to write our first piece of angular code.

  1. Add a directory to your root folder called Scripts and another one inside it called app
  2. In the Scripts folder add a tsconfig.json file (TypeScript JSON Configuration File)
  3. In the tsconfig.json, add “outDir” : “../wwwroot/app” to the compilerOptions section
{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "outDir": "../wwwroot/app"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

What is all this?

The app folder is where we’ll put all our typescript code. We don’t want/need users to be able to access the typescript code but we do need to make the javascript files public so we’ll have the transpiler output the javascript to the wwwroot/app folder. Transpiling is essentially the act of compiling typescript to javascript and the tsconfig.json tells the VS transpiler how to do this.

Let’s write some TypeScript code

  1. Create a new typescript file in the app folder called app.ts and add the following code to create an angular module that we’ll use as our main angular app (A module in angular is like a container for your controllers, services, directives etc. )
    angular.module("mallApp", []);
    

    Note: you won’t be able to save this because you’ll get an error “Cannot find name ‘angular’” because the TypeScript transpiler has no clue about Angular but we can fix that next assuming that you installed tsd globally

  2. Open the Package Manager Console (View/Other Windows) and cd your way to the Scripts folder (very important) – this is where we’ll add the files that will make the transpiler understand angularian
  3. Run the command tsd init – this will create a tsd.json file as well as a typings directory under the Scripts directory with an empty tsd.d.ts file
  4. Import the angular typescript definitions by running the command tsd install angular –save to get the type definitions for angularjs as well as jquery since angular depends on jquery. Note: the –save is to save it to the tsd.json fileNote also that the tsd.d.ts file now contains references to the angular and jquery definition files so that the transpiler knows the types inside them.
  5. Return to the app.ts file and save it. If all is ok you should now have an app.js file in wwwroot/app with the more or less the same contents as the ts file + a comment about the source mapping – so so far, much todo about nothing 🙂
    Typically when you write javascript code you’ll have an IIFE (immediately invoked function expression) around your code. To make that happen with typescript we will encapsulate the code in a typescript module (which by the way is much more like the type of module c# people are used to – with name spacing etc.)
  6. Change the contents of app.ts to the following and save the file
    Notice that you now get intellisense for angular, and if you hover over the word angular you get type information.
    module app {
        var main = angular.module("mallApp", []);
        main.run(Runner);
    
        function Runner(): void {
            console.log("we are up and running");
        }
    }
    

    TypeScript is a superset of JavaScript so technically you could just continue to write everything in JavaScript but the big benefit of TypeScript is its strong typing like you see with the Runner function above that we define to return void for example

    Btw, take some time and check out the resulting app.js file to see the resulting JavaScript

  7. To use the mallApp in index.html we need to include the app.js script
    <!-- app scripts -->
    <script src="app/app.js"></script>
    

    And also change the ng-app directive on the html tag to ng-app=”mallApp” 

    <html ng-app="mallApp">
    
  8. Right-click on the index.html file and select View in Browser – you should see a store listing with 10 stores all named “Store name”
  9. In the browser press F12 to bring up the developer tools and select the console section, and then refresh the page. If everything is working al-right you should see a message “we are up and running”
  10. Right-click on the “TheMallApp” project in Visual Studio, select properties and set the Launch URL: to index.html
  11. Set a breakpoint on the console.log and run the app (in Internet Explorer) If everything is set up as it should, you should now be stopping at the breakpoint just like with any ol’ c# code 🙂

Next: Controllers

Comments (4)

  1. foxjazz says:

    this doesn’t work

    1. Can you be more specific?

  2. ibrahim says:

    i navigate to the scripts folder then run tsd init command but i get the error below:

    The term ‘tsd-init’ is not recognized as the name of a cmdlet, function

    1. Sounds from the error like tsd might not be installed.
      The intro article https://blogs.msdn.microsoft.com/tess/2015/12/08/getting-started-with-angularjs-typescript-and-asp-net-web-api-intro/ lists the things that need to be installed.

Skip to main content