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.


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="">


  • 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="">
    <title>Acme Customer Management</title>
<body ng-app>
    <h1>{{4*2}} Orders as of {{ "2014-01-31" }} </h1>
    <script src="Scripts/angular.min.js"></script>

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


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.


Check out my Pluralsight courses!


  1.   一部予約販売 100%品質保障 — September 10, 2015 @ 7:16 pm    Reply

    思考情報あなたを共有するための| おかげで、ありがとうございました。私は本当にあなたの努力に感謝し、私はされます | ライトアップ あなたに感謝もう一度、あなたの更に次を待ちます。
    一部予約販売 100%品質保障

  2.   人気超格安 一部予約販売 — September 10, 2015 @ 7:16 pm    Reply

    あなた|あなたのウェブサイト|ウェブサイト|あなたのウェブサイト| |あなたのインターネットサイトをあなたのサイト閲覧 I のように楽しみます Webサイト。 おかげのthnx!
    人気超格安 一部予約販売

  3.   大量入库人気ランキング メール便送料無料 — September 10, 2015 @ 7:17 pm    Reply

    ありがとうございました共有するためのあなた よく一緒に入れ インターネットサイト。
    大量入库人気ランキング メール便送料無料

  4.   安心査定 メール便送料無料 — September 10, 2015 @ 7:17 pm    Reply

    私はに行っていますお知らせこのブログ ニュース} {最新の更新入手取るために定期的にサイト。
    安心査定 メール便送料無料

  5.   メール便送料無料 共同購入海外セール — September 10, 2015 @ 7:17 pm    Reply

    うわーためこれは非常に 役立つ偉大 仕事!おめでとうとそれを維持します。
    メール便送料無料 共同購入海外セール

  6.   Malaysian body wave — September 10, 2015 @ 11:11 pm    Reply

    These are ideal. Definitely stick to your manuals together with structure a good measurement smaller than your common size. My most popular Malaysian body wave EVER!

  7.   Christy — November 10, 2015 @ 2:20 am    Reply

    El presente Tutorial ha sido inspirado en el aporte realizado, vía e-mail, de uno de nuestros recurrentes
    Visitantes: NEFTALI R.B.

RSS feed for comments on this post. TrackBack URI

Leave a comment

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