CODEWITHSUNDEEP
angularjsasp.net-mvc-routing
Gericke
Gericke

Reputation: 2241

Routing with AngularJS and MVC

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>

Upvotes: 1

Views: 660

Answers (2)

Gericke
Gericke

Reputation: 2241

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.

Upvotes: 1

LostInComputer
LostInComputer

Reputation: 15420

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

Upvotes: 4

Related Questions