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.