In the first part we just configured angular JS application in ASP.NET MVC. You may have noticed that we accessed the scope variables of DemoController using $ sign. This time we will use the $route variable to route and open different views in a single page container where ng-view will be defined.

$ is a prefix that could be a property, method, variable that part of the core of AngularJS. When naming services controllers etc. it is recommended to not use $ prefix with your custom object names to avoid conflicting issues.

In this exercise we will add routing module in the MyApp.js, configure routing statements and open the ASP.NET MVC views inside a div on a single page container.

1. First of all add the Angular Route package from NuGet Manager.
2. Add a reference using NuGet Package Manager and search angular js route. You will see the AngularJS Route package in the Manage NuGet Packages windows. Just add it.
3. Now in the MyApp add ngRoute module
4. Add the Angular-route.min.js in the BundleConfig.cs file under App_Start folder
5. 
6. Edit the MyApp.js file and add ngRoute as belo
7. This tells the angular app to use the routing module.
8. Let’s add three actions in HomeController namely Test1, Test2 and Test3
9. Add views to these actions, Note: all view should be partial
10. In order to add view, just right click the Test1 function and select Add View
11. It opens up the window where you can specify the name Test1 and check on “Create as partial view”
12. Once added, do these steps for ou can specify the name Test1 and check on foldera div on a single page container. d confilcting rest two methods as well namely Test2 and Test3.
13. Now, inorder to open these view from angular we have to add a routing.
14. In the MainApp.js we can add a routing as below
15. After adding this, we need to add a div on our landing page. In last post, Home/Index was our landing page (that acts as a single page container)
16. Now add a div with ng-view attribute on it. Angular automatically opens up the page on all the containers like div, body etc where the ng-view is defined on the landing page container.
17. Now add, these links that opens up the page inside div
18. You can put any content in the partial view
19. Let’s build and run. Click on link1 and it opens up the page inside div where ng-view is defined.
20. Click on second link
21. 
22. At last, Click on third link 

This covers up our second part where we used the routing feature of Angular JS. In the next post we will create factories to access database using Web API and Entity Framework as data access persistence.

This is the first part from the series of posts I have planned for AngularJS in which I will provide an in-depth knowledge about AngularJS and how to use that in developing business applications with ASP.NET MVC, WEB API and Entity framework

In this post we will discuss about the core features of AngularJS and bootstrap with ASP .NET MVC using Visual Studio. I assume that the readers should have an in depth knowledge of ASP.NET MVC and Web APIs as I would mostly focus on the AngularJS features.

What is AngularJS

AngularJS is a web framework developed by Google tp provide responsive UI on web. It is supported for Single Page Applications where the landing page remains the same and single or multiple view can render inside it with usage of server side functions asynchronously and updating the model and control values dynamically.

You can check out the complete tutorial over here https://angularjs.org

Step by Step exercise of configuring Angular JS in ASP.NET MVC application

1. Start Visual Studio
2. Select ASP.NET Web Application and then MVC as project template
3. Add references to AngularJS through NuGet
4. Search AngularJS on the Package Manager console
5. And then Select AngularJS Core and install

6. After adding AngularJS Core, add the bundle

bundles.Add(new ScriptBundle(“~/bundles/angular”)

.Include(“~/Scripts/angular.js”));

7.  Now add these bundles in the HTML head section of _Layout.cshtml

@Scripts.Render(“~/bundles/angular”)

8. Now In order to bootstrap angular JS in our MVC app we have to define the ngApp on the page body or html tag. ngApp reference to the application JS file where you can define routing, controllers etc. ngApp is a directive to auto-bootstrap an AngularJS application. Also, note that only one ngApp can be used per HTML document.

9. Let’s create two JavaScript files, one MyApp.js and the other DemoController.js

10.  Create an app folder under root in MVC project

11. Add a new JavaScript file named as MyApp.js

12. Inside MyApp.js write following snippet

var MyApp = angular.module(‘MyApp’,[]);

13. This line initialize the application level global object of angular app and a central point where you can add modules like routing, ui etc. Through this object you can add controllers, directives etc and access it globally.

14. Now specify “MyApp” to the ng-App attribute in html tag.

<html ng-app=”MyApp”>

15. Now, let’s add a DemoController.js file in your project under app folder.

16. Add following snippet in DemoController.js

MyApp.controller(‘DemoController’, [‘$scope’,

function DemoController($scope) {

$scope.Name = “ovais mehboob”;

}]);

17. Now add a div tag inside Home/Index.cshtml file and specify ng-controller as DemoController

<div ng-controller=”DemoController”>

<h1>{{Name}}</h1>

<input type=”text” ng-model=”Name” />

</div>

18. In the above code, I have specified DemoController in div tag and access scope varialbes that were defined under DemoController. Using “double curly braces” {{ }} you can access the scope variables throughout controller.

19. In order to bind the values of scope variables with input fields like textbox etc you can use ng-model and ng-bind to bind with other controls like span etc.

20. Add MyApp.js and DemoController.js inside BundleConfig.cs

bundles.Add(new ScriptBundle(“~/bundles/angular”)

.Include(“~/Scripts/jquery-1.10.2.js”,

“~/Scripts/angular.js”,

“~/app/MyApp.js”,

“~/app/DemoController.js”));

21. Let’s build and run the application

In the next post I will discuss about routing and rendering views inside a single page application.