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:
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~!