AngularJS + Web Api Magic

Saturday, February 1, 2014

File new project asp.net web application


Select the empty template


Right click the project node and add an html page


Name it default and click ok


Add this markup


Right click references node and select manage nuget packages


Install bootstrap, this will bring in jquery


Install the angularjs core prerelease package


Pull in the bootstrap and angular files on the page


Right click the page and select view in browser


View the results rendered in chrome


Add this div structure to the markup


Add these folders to the solution


Add this javascript file to the folder


Add this anonymous function action and register the app


Add this to the markup


Refresh the browser and view the result of the calculation 2 + 2 = 4


Add this controller to the controllers folder


Reference the script and add the controllers directive


Add this code to the controller


In the markup add the number variable in double curly braces


Refresh the browser and view the correct result rendered


Load 2 marathons in the controller


Add the ng-repeat directive and some zen coding enabled by web essentials 2013


Add this angualr expression to grab the value of the city object


Refresh the browser and view the cities displayed


Move the repeat down one div for a two column layout


Refresh the browser and view the result


Bind to these fields


Refresh the browser and view the output


Add this object literal to the object


Add this to the markup


Refresh the browser web page and view the results


Add this class to the card div


Add a style sheet to the content folder


Add these styling rules to the class selector


Add a reference to the css file in the head section


Refresh the browser and view the result


Add this div and give it the card class


Add some margin and padding to the css class


Default Success Warning Important Info Inverse
B S W I ? O