5/13/2015

My First #AngularJS Web Project in Visual Studio 2013 Loaded in #Azure

I've been trying to get familiar with AngularJS language using Visual Studio 2013.

My Azure site is located here: http://webangularjs1.azurewebsites.net/

To get started, I first opened Visual Studio 2013, connected to my Visual Studio Online Account:


Next, I installed the Angular framework using NuGet through PowerShell:

Then I downloaded a sample project from the web for AngularJS, and loaded into Visual Studio, naming the project WebAngularJS1:


Then clicked Build, then run, and the web browser opened to the following:


However, the hyperlink to the "Contacts" tab was broken.  So I copied the About.cshtml and renamed it to Contacts.cshtml:

And then added it to the project under the Views folder:


Then, I remembered that with MVS, you have to wire the thing together with Controllers, Apps, Routes, etc.  So I  looked at the existing code and modified it:

So first I added code in the Controller.js for "Contacts":
And the Controller.Spec.js:

And the app.js file:

And then I ran the project locally and the changes did not appear.  So I fiddled with it a bit and wasn't able to figure it out.  So I decided to deploy the project to Microsoft Azure under my BloomConsulting Azure account.

I clicked Publish from within Visual Studio 2013 project:






Then clicked the URL to view the live site in Azure:


And the About Page:


And finally, the new Contacts page:


The changes in the code apparently were recognized during the deployment, still need to figure out why they aren't locally.

And finally the Login Page:


Again, the URL to view the code is: http://webangularjs1.azurewebsites.net/

Lastly, we uploaded the source code to Visual Studio Online Team Foundation Server:






And the source code is now stored on the web:

And here's the web created in Azure:




And that's the complete post on how to work with a sample AngularJS Javascript project in Visual Studio 2013, add a "Contacts" page, hook it into the MVS framework, deploy, run and store off the code to Team Foundation Server in Visual Studio Online.

PS. As a follow up, I had another developer troubleshoot the contacts page locally, and it was in Cache, so it eventually worked on Localhost:8080/Contacts.

Thanks for reading~!

No comments:

Post a Comment