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, 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