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.
- Open Visual Studio File->New Project->Web->Visual Studio and choose ASP.NET MVC 4 Web Application
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
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
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.
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>
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.
santoshyadavblog 