current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free.
up vote 1 down vote favorite

I'm trying to build a SPA with Asp.Net MVC. for this I'm using angularJs routing . This is my project hierarchy. enter image description here

My Layout.cshtl code

<html lang="en" ng-app="ProjectTrackingModule">
 <head>
   <script src="~/Scripts/jquery-2.1.0.min.js"></script>
   <script src="~/Scripts/angular.min.js"></script>
   <script src="~/Scripts/angular-route.min.js"></script>
   <script src="~/Scripts/app.js"></script>
</head>
<body>
<a href="#Home">Home</a>
<a href="#Projects">Projects</a>
   <div ng‐view style="margin‐left: 10%; margin‐right: 10%;">
    </div>
//... footer
</body>
</html>

My app.Js code is as follow:

var app = angular.module('ProjectTrackingModule', ['ngRoute', 'ui.bootstrap']);
app.config(function ($routeProvider) {
    $routeProvider
        .when("/Home", {
        templateUrl: "/Views/Home/Home.cshtml",
        controller:"HomeController"
    })
    .when("/Projects", {
        templateUrl: "/Views/ProjectManagement/ProjectDetails.cshtml",
    controller: "ProjectsController"
    })
    .otherwise({redirectTo:"/Home"})
});

I want to load my Home.Cshtml partial view inside ng-view. But when I run my application, It only showing Home partial view.

also when I click on Project, then it should render ProjectDetails.cshtml inside ng-view.

code inside ProjectDetails.cshtml

<div ng-controller="ProjectsController">
    <h2>ProjectDetails</h2>
</div>
share|improve this question
    
does not make sense, don't compare angular routing with mvc routing :( –  Ramesh Rajendran Apr 27 at 18:56
    
@RameshRajendran: How to use routing with mvc. I mean when i click on Home anchor link then it should show Home partial view. –  Amit Kumar Apr 27 at 18:57
    
@RameshRajendran: please see the updated question. –  Amit Kumar Apr 27 at 19:28
    
:--) i have update my answer –  Ramesh Rajendran Apr 27 at 19:31

2 Answers 2

up vote 0 down vote

I think you have some misonceptions about Angularjs routing concepts.

MVC Routing :

ASP.NET routing enables you to use URLs that do not have to map to specific files in a Web site. Because the URL does not have to map to a file, you can use URLs that are descriptive of the user's action and therefore are more easily understood by users.

Angular Routing :

Angular.js routing using MVC framework does not use MVC routing.

Comparable parts are:

Model ===== ng-module 
controller ===== ng-controller
view ===== ng-view

So you can't call the MVC Controller in your angularjs route config. Does this make sense?

Also please think about some of the differences between cshtml and html.

Angular routing and MVC routing are totally different because:

  • Angular routing is use client side
  • MVC routing is used server side

The above texts are for your understanding only.

I think this discussion will help you :

How to use ASP.NET MVC and AngularJS routing?

Update :

The href is wrong in Anchor tag.

Its should be href="#/Home", not href="#Home"

So please change your code 

 <a href="#/Home">Home</a>
    <a href="#/Projects">Projects</a>
share|improve this answer
    
I have changed my code. but nothing is happening. when I'm clicking on Project, it doesn't loading ProjectDetails.cshtml –  Amit Kumar Apr 27 at 19:35
up vote 0 down vote

Lets understand the routing in angular first. lets say your url says

www.example.com/Home/Index -- this points to your MVC HomeController and Index ActionMethod. Now what mvc does, it returns you the first View only.

say you have an anchor Load the New View. Clicking this will result in a new Url www.example.com/Home/Index#/angular-route. This url will still hit the same MVC HomeController and ActionMethod. But you have an additional route in angular 

`var app = angular.module('ProjectTrackingModule', ['ngRoute', 'ui.bootstrap']);
 app.config(function ($routeProvider) {
    $routeProvider
        .when("/angular-route", {
        templateUrl: "/Html/GetHtml?type=angular-route",
        controller:"AngularController"
    })   
    .otherwise({redirectTo:"/Home"})
});`

Here in the code section templateUrl: "/Html/GetHtml?type=angular-route",

Html is MVC Controller and GetHtml is ActionMethod. This ActionMethod returns you the new view that you want according to the angular route, that's why we are sending a parameter type too to help us decide.

controller:"AngularController" says that angular will call its controller after the page is returned from you mvc controller. It's Angular's Controller and it has nothing to do with your MVC controller.

you declare angular controller like this: 

 app.controller('AngularController',function($scope){
        alert("my js controller is called");
    });

Hope this helps you to find a solution.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.