Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

February 18, 2014

The World’s Simplest AngularJS Example in Visual Studio

Filed under: AngularJS,Visual Studio @ 7:11 pm

AngularJS is a new client-side framework for building rich Web applications using HTML and JavaScript.

Instead of starting with "this is everything it does", I thought I would start with a simple step-by-step example. This example is the world’s simplest Angular application. By starting simple, we can build on the concepts one by one.

1) Start with a Web project.

I started with an empty Web project to minimize the extra "stuff" generated when selecting any of the other templates:

  • Select Add | New Project to add a project to an existing solution. OR Select File | New Project to create a new solution and new project.
  • Select your desired language from the Add New Project dialog (Visual Basic or Visual C#).
  • Select the ASP.NET Web Application template. There is now only one project template defined in the Add Project dialog … all of ASP is now under the umbrella of "One ASP".
  • Then selected the desired template from the second dialog. I selected the Empty template.

2) Download AngularJS.

A NuGet package is the easiest way to get AngularJS if you are using Visual Studio:

  • In Visual Studio, select the new Web project in Solution Explorer.
  • Then select Project | Manage NuGet Packages… from the Visual Studio menu.
  • Search for AngularJS.
  • Click Install.
  • When it is finished installing, click Close.

image

The installation process adds a Scripts folder with many "angular-" scripts in it.

3) Build your first HTML page using Angular.

By convention, the main file of an application is Index.html:

  • Right-click on the Web project and select Add | HTML Page.
  • Name the item Index. This adds an Index.html file to your project and opens it.

Visual Studio adds the basic HTML tags for you. So when you first view the contents of the file, it will look like this:

<!DOCTYPE html>
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

</body>
</html>

  • Optionally, give the page a title.
  • In the body of the page, add a script tag to include the angular.js or angular.min.js script file.
    Note that it is often easier to debug using the angular.js file. Replace it with the angular.min.js file before deploying.
  • In any tag that encloses all Angular code, specify an ng-app directive. In this case, I put it in the body tag. Be sure to remove any attributes for this directive that Visual Studio may attempt to add for you.
  • Add any desired code.
  • Use double curly braces to define a placeholder, called a "binding", for any Angular expression.

The resulting code could look something like this:

<!DOCTYPE html>
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
    <title>Acme Customer Management</title>
</head>
<body ng-app>
    <h1>{{4*2}} Orders as of {{ "2014-01-31" }} </h1>
    <script src="Scripts/angular.min.js"></script>
</body>
</html>

Run. The result of the world’s simplest Angular application is:

image

When Angular processes the page, it evaluates the expressions. so 4*2 = 8 and it displays "8 orders". The date is simply a string literal, which is just displayed as is.

There, we did it! The world’s simplest Angular application!

To summarize:

1) Download the AngularJS JavaScript files (which we did using NuGet).

2) Include a script tag for the angular.js file.

3) Add an ng-app directive in a tag above any usage of Angular (we added it to the body tag).

4) Enclose any Angular expressions in placeholders (called bindings) defined with double curly braces.

Enjoy!

Check out my Pluralsight courses!

6 Comments

  1.   Dipak Pandey — March 4, 2014 @ 11:46 am    Reply

    Can we use Angularjs along with Razor Engine. If yes then How?

    Can we say that it is an alternative of Razor Engine.

  2.   DeborahK — March 4, 2014 @ 1:35 pm    Reply

    I have not used Angular with Razor, but found some interesting posts on the topic:

    http://www.dematte.org/2014/01/08/MixingAngularJSAndASPNETMVC.aspx

    http://www.dematte.org/2014/01/09/IntegrationOfRazorAndAngularJS.aspx

    http://www.dematte.org/2014/01/12/IntegrationOfRazorAndAngularJS2.aspx

  3.   Joe — March 8, 2014 @ 8:32 am    Reply

    {{4*2}} Orders as of {{ “2014-01-31″ }}

    I followed your instructions and got this on my web page.
    What did I miss?

  4.   DeborahK — March 8, 2014 @ 7:09 pm    Reply

    Do you have the body tag attribute set?

  5.   Rahul Mehta — March 28, 2014 @ 11:22 am    Reply

    cool…following ur post…

  6.   Peter Drinnan — June 25, 2014 @ 9:15 am    Reply

    You saved my day! Thanks so much. Just one little thing I noticed was the path to angularjs should be “Scripts/vendor/angular.min.js” in the sample index.html page.

RSS feed for comments on this post. TrackBack URI

Leave a comment

© 2014 Deborah's Developer MindScape   Provided by WPMU DEV -The WordPress Experts   Hosted by Microsoft MVPs