Routing with AngularJS and MVC

Question

I have been searching the web for solutions but cant't find any that will solve my problem. I am trying to do client side routing with AngularJS and MVC.

This is the Plunker that I am using for guide lines but it does not help me. My MVS2 Project folder structure is as follows: $root/Views/Home/Home.html

The error I get that the page could not be found. What am I missing here?

AngularJS

// create the module and name it myApp
var myApp= angular.module('myApp', ['ngRoute']);

// configure our routes
myApp.config(function ($routeProvider) {
    $routeProvider.when('/', {templateUrl: 'Home.html',controller: 'mainController'})
});

// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function ($scope) {
// create a message to display in our view
    $scope.message = 'Home Page should appear here';
});

HTML

<html data-ng-app="myApp">
<head runat="server">
    <title>
       <asp:ContentPlaceHolder ID="TitleContent" runat="server" />
     </title>
</head
<body data-ng-controller="mainController">
    <div id="Div1">
        <div data-ng-view></div>
    </div>
</body>
</html>

Have you tried requesting Home.html from the browser just to be sure if it is really being served? — idursun
– idursun ♦, Commented Jan 16, 2014 at 13:01
I have copied the url to my browser and does not find it. I am not sure how to structure my routing to get the correct page? — Gericke
– Gericke, Commented Jan 16, 2014 at 13:03

LostInComputer · Accepted Answer · 2014-01-16 13:20:07Z

4

MVC blocks the Views folder from being accessed! It will always return HTTP status 404!

Why? This is done for security. It prevents visitor from looking at your view files (ascx, cshtml, vbhtml, etc) which is source code.

How it's done? You will notice that Viewsfolder has a web.config. Web.config is configured to return 404.

Here is a snippet of the web.config

  <add name="BlockViewHandler" path="*" verb="*" preCondition="integratedMode" type="System.Web.HttpNotFoundHandler" />

Notice that for any path and any HTTP method, the handler is HttpNotFoundHandler

Solution: don't use the View folder for your AngularJS templates or modify web.config at your own risk

edited Jan 16, 2014 at 13:20

answered Jan 16, 2014 at 13:15

LostInComputer

15.5k4 gold badges43 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gericke Over a year ago

Thank you for this valuable information I did not know this at all. From your answer I decided to go a different route and it works perfectly. will post answer now

Gericke · Accepted Answer · 2014-01-16 13:35:14Z

The answer that LostInComputers gave me I have found a solution to inject html pages to my MVC project.

.js

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(function ($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: '/templates/Home.html',
            controller: 'mainController'
        })
.when('/about', {
    templateUrl: '/templates/About.html',
    controller: 'mainController'
})

$routeProvider.otherwise({ redirectTo: '/' });

});

What I did was to create a template folder in my root directory and added my .html pages in there. This works perfectly for me.

Collectives™ on Stack Overflow

Routing with AngularJS and MVC

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related