Angular Basics

Step by step guide to your first angular application

We will cover how we can create a simple Angular application, we will start with basics and going forward will see how we can use it with .net MVC. We will be using VS 2013 throughout the tutorial.

Let’s start with basics.

  1.  Open Visual Studio File->New Project->Web->Visual Studio and choose ASP.NET MVC 4 Web Application

Project

2. Post we select the project on next screen we will get the Project template screen, select Internet Application, We will use Razor and our View engine

ProjectTemplate

 

3. Once project structure is ready lets go add the reference to angular, we will be using nuGet package manager for this. Right click on your application and select Manage Nuget Packages, after selection you will get below screen

PackageManager

4.  Search for Angular, we will get list of all modules available for Angular, select Angular Js, It will add all Angular Js related files to your projects Scripts folder.

AngularPackageManager

5. Now as we have all required files imported in our application, let’s run our application and check if its working. The page will be loaded with default MVC template.

6. Let’s start the angular implementation now. If you are aware of basic structure of MVC, the _Layout file is similar to your master page in MVC, open _Layout file from View->Shared folder. We will see if angular is injected or not here

In head section add the below line:

http://~/Scripts/angular.min.js

and on top of your html tag edit to this :

<html lang=”en” ng-app>

ng-app is the directive which loads the angular so if in any case your angular expression is not working please check if you are not missing the ng-app directive.

now to see if angular expression is working or not lets add one angular expression on the default page/view.

7. Lets go to Index view in Home folder and add below line

<h1>
Is Angular Working {{1==1}}
</h1>

Result

We should get the above result,  {{1==1}} this block is called angular expression as we can do operations here as well. as shown in above code.

Now our Angular is loaded, in next section we will have more detailed tutorial on angular controller, directives and services.

36 Comments


  1. I’ve been surfing on-line more than three hours today,
    but I by no means found any attention-grabbing article like yours.

    It is pretty value sufficient for me. In my opinion, if all web owners
    and bloggers made just right content as you did, the internet will likely be much more useful than ever
    before.

    Reply

  2. Ahaa, its nice discussion regarding this post at this place at this webpage, I have read all that,
    so now me also commenting at this place.

    Reply

  3. hi,
    Nice article.
    I am not an expert client side developer but really want to learn the same.
    will you please add more stuffs related to angularJS / do you have any references step by step guide for angularJS?

    Reply

    1. Hi Amit,
      There are some tutorials on YouTube you can refer.

      Regards,
      Santosh

      Reply

    2. Thanks Amit, sure will be writing more on it in future.

      Regards,
      Santosh

      Reply

  4. Hi! Someone in my Myspace group shared this website with us so I came to take a look.
    I’m definitely loving the information. I’m bookmarking and will be tweeting this to my followers!
    Terrific blog and excellent design. http://bing.net

    Reply

  5. I really like what you guys are up too. This sort of clever work and reporting!
    Keep up the great works guys I’ve added you guys to my blogroll. http://yahoo.org

    Reply

  6. Really very Nice blog…Very simple and easy to understand ….!!!

    Reply

  7. I truly love your web site.. Good colors & theme. Do you make this website yourself?

    Please reply back as I’m attempting to create my personal website and would desire to know that you got this from or
    exactly what the theme is known as. Cheers!

    Reply

  8. Excellent items on your part, man. I have remember your stuff before and you’re simply extremely excellent.
    I actually like what you might have got right here, really
    like what you will be stating and the manner in which during which you are saying it.
    You will make it enjoyable and you carry on and
    deal with to keep it smart. I cannot wait to read considerably more from you.

    That is really a wonderful site.

    Reply

  9. Oh my goodness! Amazing article dude! Thank you so much, However I am having
    difficulties with your RSS. I don’t know why I am not able to join it.
    Will there be anybody having identical RSS
    problems? Anybody who knows the best solution is it possible to kindly respond?
    Thanks!!

    Reply

  10. Do you mind basically if i quote a few of your
    posts so long as I provide credit and sources back to your blog?

    My website is incorporated in the identical niche as
    yours and my visitors would certainly reap the benefits
    of the vast majority of information you provide here.

    Please let me know if this type of okay with you. Many thanks!

    Reply

  11. I really like what you guys are up to. Such smart work and exposure!
    Keep up the very good works guys I’ve included you guys to my own blogroll.

    Reply

  12. Please let me know if you’re looking for a author for your blog. You have some really good articles and I feel I would be a good asset. If you ever want to take some of the load off, I’d love to write some articles for your blog in exchange for a link back to mine. Please blast me an e-mail if interested. Kudos!

    Reply

    1. please share your mail id.

      Reply

Leave a Reply to eebest8 michael Cancel reply

Your email address will not be published. Required fields are marked *