AngularJS in Visual Studio

By | January 12, 2014

AngularJS is open source Java Script framework, it will help you develop single page application with html pages. AngularJS lets you extend HTML vocabulary for your application and the resulting environment is extraordinarily expressive, readable, and quick to develop .  Its goal is to augment browser-based applications with model–view–controller (MVC) capability specially “angular-route” JS give you a feel of MVC route facility.

You can install required JS file using  Manage NuGet Packages  or download via given Link

Steps and Hello world application is given here

  • Open Visual Studio and create New Website.

AngularJS 1

  • Select ASP.Net Empty Website.

AngularJS 2

  • Right Click on Website Solution and select Manage NuGet Packages option, It will show given popup.
  • Search for AngularJS it will show you related package, Please click on install to add with your website

AngularJS 3

  • Install AngularJS Package

AngularJS 6

  • Install AngularJS core, route or animate according to your requirement.

AngularJS 7

  • Now you can see all JS files downloaded in your solution in Scripts folder

Screenshot (27)

  • Please insert a HTML file in your website form Add new items

Screenshot (28)

  • Add HTML page

Screenshot (29)

  • Edit HTML code for Hello World App

Here we will add a TEXT BOX when user will type his name in the text box it will simultaneously update with

Hello …..  on the website , you can get this feature by add one script file and two line in your HTML file.

<!DOCTYPE html>
<html ng-app>
<head>
<title></title>
<script src=”Scripts/angular.js”></script>
</head>
<body>
<input type=”text” ng-model=”name” />
<h2>Hello {{name}} !!!</h2>
</body>
</html>

Screenshot (30)

  • Run page on browser and check the change.

AngularJS 1