AngularJS Setup in Visual Studio


        In this tutorial lets see how to setup AngularJS in Visual Studio. I am using Visual Studio 2012 Professional edition for this purpose. Actually speaking, configuring AngularJS in visual studio is a simple process.


Step 1 : Install Visual Studio

      Make sure you have Visual Studio installed before proceeding further. If you already have this installed then its pretty fine..

Step 2: Create Empty Web Application in Visual Studio
       Now create ASP.NET Empty Web Application as follows, and Name the Application.

Select File - New - Project ->

Create Empty Web Application

Step 3: Add New Web Form
       Next Add New web form to your application as follows, and name it..

Right click Project - Add - Web Form ->

Add New Web Form

Step 4 : Configure AngularJS for your project
      Here comes the final step and there are two ways to achieve this : Basically these methods deals about how to configure AngularJS library within your application.

  • Configure through CDN (Content Delivery Network)
  • Configure through Nuget package
Configure through CDN
     If you are not sure what is CDN check this link. So in CDN we point to link recommended by AngularJS. So that we need not download and save the library locally.

So after creating Web form as discussed about copy paste the below HTML part into the form and RUN the application


<html ng-app>   
   <head>
      <script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
   </head>
   
   <body>
      
       <div>
         <input type ="text" ng-model ="text" placeholder ="Enter a name here">
         <hr />
         
         <h1>Hello {{text}}</h1>
      </div>
      
   </body>
</html>

As you can see we have pointed to CDN recommended by Angularjs.org


<script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

Now type something in the textbox and below my screenshot of the output.

Output
Configure through Nuget Package
    Alternatively you can configure as follows :

Goto Tools - Library Package Manager - Manage Nuget Packages for Solution - >

Download from NuGet
Search for AngularJS library online

Find AngularJS
Install the required packages

Install AngularJS package

Now AngularJS packages will get added to your solution and you can point AngularJS script to your local version by dragging and dropping the script path from solution. Code will look like the below..


<html ng-app>   
   <head>
       <script src="Scripts/angular.min.js"></script>
   </head>
   
   <body>
      
       <div>
         <input type ="text" ng-model ="text" placeholder ="Enter a name here">
         <hr />         
         <h1>Hello {{text}}</h1>
      </div>
      
   </body>
</html>

As you can see the only change here is script is pointing to your local path


<script src="Scripts/angular.min.js"></script>

Now RUN the program to see the output. Its same as above...

Hope this tutorial helps you to understand the below stuff :

  • Configure AngularJS in Visual studio through CDN
  • Configure AngularJS in Visual Studio through NuGet package






Reactions:

0 comments :

Post a Comment