使用 AngularJS 和 MVC 进行路由答案

【问题标题】：Routing with AngularJS and MVC使用 AngularJS 和 MVC 进行路由
【发布时间】：2014-02-05 09:26:58
【问题描述】：

我一直在网上搜索解决方案，但找不到任何可以解决我的问题的方法。我正在尝试使用 AngularJS 和 MVC 进行客户端路由。

这是我用作指南的Plunker，但它对我没有帮助。我的 MVS2 Project 文件夹结构如下： $root/Views/Home/Home.html

我得到的错误是找不到页面。我在这里错过了什么？

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>

【问题讨论】：

您是否尝试过从浏览器请求 Home.html 以确定它是否真的被提供？
我已将 url 复制到浏览器中，但没有找到。我不确定如何构建路由以获得正确的页面？

标签： angularjs asp.net-mvc-routing

【解决方案1】：

MVC 阻止访问Views 文件夹！它将始终返回 HTTP 状态 404！

为什么？这样做是为了安全。它可以防止访问者查看您的源代码视图文件（ascx、cshtml、vbhtml 等）。

它是如何完成的？您会注意到Viewsfolder 有一个web.config。 Web.config 配置为返回 404。

这是web.config的sn-p

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

请注意，对于任何路径和任何 HTTP 方法，处理程序都是 HttpNotFoundHandler

解决方案：不要将View 文件夹用于您的AngularJS 模板或修改web.config，风险自负

【讨论】：

感谢您提供这些宝贵的信息，我根本不知道这一点。根据您的回答，我决定走一条不同的路线，并且效果很好。现在将发布答案

【解决方案2】：

LostInComputers 给我的答案我找到了将 html 页面注入我的 MVC 项目的解决方案。

.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: '/' });

});

我所做的是在我的根目录中创建一个 template 文件夹，并在其中添加我的 .html 页面。这对我来说非常有效。

【讨论】：