AngularJS in .NET

Saturday, March 8, 2014

Fire up IIS and add a new web site


Enter sitename, physical path and provide a port number


Set the application pool to .NET 4


Open the site in windows explorer


Add an html page, reference angular from the cdn, angular directive in body and angular expression in double curly braces, the calculation


Open the page in the browser, view that calculation has been processed, this is a functioning angular page


File new project, asp.net web application


Select mvc template


Add the project to source control


Select location to store solution


In iis make the angular web site point to the new mvc location


Add a new,empty controller to the controllers folder


Name it hellongcontroller


Add a view for the index action method


Paste in the angular html


Run the project and view the angular page in the view


Modify the view to pass in a model


In the controller pass in the view and a model object into the constructor of the view


Build and view the results in the browser


Update the layout file, paste in html of view and add renderbody()


Update the view


Build and view the result in the browser


Insert the ng-app into html tag and add angular expression


Build and view results in browser


Rename the controller to coursescontroller


In the layout file update the title and reference bootstrap


Download a theme from bootswatch


Reference the bootswatch superhero theme, jquery and bootstrap js files


Rebuild and view the results in the browser


Add some divs with bootstrap styling, notice the ng-repeat directive, it instantiates a template once per item from a collection


Add an array to the ng-init directive, allows evaluation of an expression in the current scope


View the data rendered in the browser


Pass the model into the course object in the view


In the controller, create the object array, convert it to json and pass it to the view


Run the application and view the results in the browser


In layout file add a rendersection in head


In the section pass in the model into a global variable and add a console.log()


View console.log output an array with course data in it


Add a registration module to the scripts folder


Add a courses folder to the scripts folder and create a controller, it's a best practice to organize the javascript code by features


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