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.
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.
And the bootstrap css in the head section
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
- 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
- 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.
- 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.
- Add a directory to your root folder called Scripts and another one inside it called app
- In the Scripts folder add a tsconfig.json file (TypeScript JSON Configuration File)
- In the tsconfig.json, add “outDir” : “../wwwroot/app” to the compilerOptions section
What is all this?
Let's write some TypeScript code
- 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. )
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
- 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
- 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
- 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.
- 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 🙂
- 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.
- To use the mallApp in index.html we need to include the app.js script
And also change the ng-app directive on the html tag to ng-app=”mallApp”
- 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”
- 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”
- Right-click on the “TheMallApp” project in Visual Studio, select properties and set the Launch URL: to index.html
- 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 🙂