404错误与Angularjs TemplateUrl路由 [英] 404 Error with Angularjs TemplateUrl Routing

问题描述

我下面<一个href=\"http://scotch.io/tutorials/javascript/single-page-apps-with-angularjs-routing-and-templating\">this教程，试图让我MVC3应用程序中的SPA水疗浴场由控制器调用，DemoController.cs。

我收到404错误当应用程序试图通过导航栏加载不同的模板，（about.html，contact.html和home.html做为）。

这是我的目录结构（不包括MVC3应用程序的其余部分）：

 脚本
-script.js
意见
-demo
--pages
--- about.html
--- contact.html
--- home.html做为
--Index.cshtml
--_ ViewStart.cshtml
 

这是我的script.js文件，在那里我定义的路由。

  //创建模块并将其命名为scotchApp
VAR scotchApp = angular.module（'scotchApp'，[]）;//配置我们的路线
scotchApp.config（函数（$ routeProvider）{
$ routeProvider    //为主页路线
    。什么时候（'/'， {
        templateUrl：'页/ home.html做为'，
        控制器：'mainController
    }）    对于关于页面//路线
    。当（'/约'，{
        templateUrl：'页/ about.html'，
        控制器：'aboutController
    }）    //联系人页面路径
    。当（'/接触'，{
        templateUrl：'页/ contact.html'，
        控制器：'的ContactController
    }）;
}）;//创建控制器并注入角的范围$
scotchApp.controller（'mainController'，函数（$范围）{
    //创建一个消息在我们的视图中显示
    $ scope.message =每个人都过来看我怎么好好看看！;
}）;scotchApp.controller（'aboutController'，函数（$范围）{
    $ scope.message ='看！我是一个对页。
}）;scotchApp.controller（'的ContactController'，函数（$范围）{
    $ scope.message ='联系我们！ JK。这只是一个演示。
}）;
 

这是我的index.html code：

 ＆LT; D​​IV NG-应用=scotchApp＆GT;
    ＆LT;！ - 头和导航条 - ＆GT;
    ＆LT; D​​IV NG控制器=mainController＆GT;
        ＆LT;导航类=导航栏导航栏默认＆GT;
            ＆LT; D​​IV CLASS =容器＆GT;
                ＆LT; D​​IV CLASS =导航栏头＆GT;
                    ＆LT;一类=导航栏品牌的href =/＆GT;角路由示例＆LT; / A＆GT;
                ＆LT; / DIV＆GT;                ＆LT; UL类=NAV导航栏，导航栏导航右＆GT;
                    ＆LT;李＆GT;＆LT; A HREF =＃＆GT;＆LT; I类=发发回家＆GT;＆LT; / I＆GT;首页＆LT; / A＆GT;＆LT; /李＆GT;
                    ＆LT;李＆GT;＆LT; A HREF =＃关于＆GT;＆LT; I类=发发盾＆GT;＆LT; /我＆gt;关于＆LT; / A＆GT;＆LT; /李＆GT;
                    ＆LT;李＆GT;＆LT; A HREF =＃接触＆GT;＆LT; I类=发发注释＆GT;＆LT; / I＆GT;联系与LT; / A＆GT;＆LT; /李＆GT;
                ＆LT; / UL＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / NAV＆GT;        ＆LT;！ - 主要内容，并注入视图 - ＆GT;
        ＆LT; D​​IV ID =主＆GT;
            ＆所述;！ - 角模板 - ＆GT;
            ＆LT;！ - 这就是内容将被注入 - ＆GT;
            ＆LT; D​​IV NG-视图＆gt;＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

解决方案

从谷歌集团AngularJS，我强烈建议大家谁需要angularjs帮帮忙，我现在才知道出了什么问题，以及如何更好地解决这些类型的问题。

下面是我从它的成员之一收到提示：

  

我不能说这个问题是专门针对你的情况是什么，但在
  一般来说，你会解决它的方法是检查以下内容：

  
  

配置为返回模板为静态HTML服务器？
  通过手动构造URL并直接加载它验证此
  用浏览器（不涉及角度在所有）。你应该能够
  看到静态HTML。这是一个pre-必要为别的
  加工。如果这不起作用，那么问题是正确配置
  .NET和服务器端的路由。

  
  

如果该你能得到的第一步
  工作，然后开始你的角度应用程序，并开拓网络选项卡您
  浏览器的开发工具。如果你看到404请​​求记录URL。怎么样
  它比你上面所用的工作URL不同？

  
  

如果该URL
  不同，相应地修改templateUrl参数，以便它
  匹配正确的URL。如果您仍然有问题，张贴
  工作URL的例子和浏览器是什么网址为例
  请求时，它得到一个404。

与事实结合这一点，我没能拉起模板用静态URL我发现了另一个SO问题，直接解决了这个问题。在ASP.NET MVC 请求静态HTML文件

回答我的问题：结果
所以，我创建了一个〜/静态文件夹，以容纳我所有的模板和现在我的角度应用程序完美的作品，因为当我要求我tempate可以给它一个直接的网址，从得到它。

I am following this tutorial, trying to have a SPA inside my MVC3 application where the SPA is called by a controller, DemoController.cs.

I am getting 404 errors when the app tries to load the different Templates, (about.html, contact.html, and home.html) via a nav bar.

This is my directory structure (not including the rest of the MVC3 app):

Scripts
-script.js 
Views
-Demo
--pages
---about.html
---contact.html
---home.html
--Index.cshtml
--_ViewStart.cshtml

This is my script.js file where i define the routes.

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

// configure our routes
scotchApp.config(function ($routeProvider) {
$routeProvider

    // route for the home page
    .when('/', {
        templateUrl: 'pages/home.html',
        controller: 'mainController'
    })

    // route for the about page
    .when('/about', {
        templateUrl: 'pages/about.html',
        controller: 'aboutController'
    })

    // route for the contact page
    .when('/contact', {
        templateUrl: 'pages/contact.html',
        controller: 'contactController'
    });
});

// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function ($scope) {
    // create a message to display in our view
    $scope.message = 'Everyone come and see how good I look!';
});

scotchApp.controller('aboutController', function ($scope) {
    $scope.message = 'Look! I am an about page.';
});

scotchApp.controller('contactController', function ($scope) {
    $scope.message = 'Contact us! JK. This is just a demo.';
});

This is my index.html code:

    <div ng-app="scotchApp">
    <!-- HEADER AND NAVBAR -->
    <div ng-controller="mainController">
        <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/">Angular Routing Example</a>
                </div>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><i class="fa fa-home"></i>Home</a></li>
                    <li><a href="#about"><i class="fa fa-shield"></i>About</a></li>
                    <li><a href="#contact"><i class="fa fa-comment"></i>Contact</a></li>
                </ul>
            </div>
        </nav>

        <!-- MAIN CONTENT AND INJECTED VIEWS -->
        <div id="main">
            <!-- angular templating -->
            <!-- this is where content will be injected -->
            <div ng-view></div>
        </div>
    </div>
</div>

解决方案

With help from the Google Group for AngularJS, which I highly recommend to everyone who needs angularjs help, I now know what went wrong and how to better troubleshoot these kinds of issues.

Here is the tips that I recieved from one of its members:

I can’t say what the issue is specifically in your situation, but in general the way you would troubleshoot it is to check the following:

Is the server configured to return the templates as static html? Verify this by constructing a url manually and loading it directly with a browser (not involving angular at all). You should be able to see the static html. This is a pre-requisite for anything else working. If this doesn't work then the problem is properly configuring .NET and server-side routing.

If the you can get the first step to work, then start your angular app and open up the network tab of your browser’s development tool. If you see 404 requests note the URL. How is it different than the working URL you used above?

If the URL is different, modify the templateUrl parameter accordingly so that it matches the correct URL. If you are still having issues, post an example of the working URL and an example of what URL the browser is requesting when it gets a 404.

Combine this with the fact that I wasn't able to pull up the templates with a static url I found another SO question that directly fixed this issue. Request static .html files in ASP.NET MVC

Answer to my question:
So I created a ~/Static folder to house all of my templates and now my angular app works perfectly because when i request a tempate i can give it a direct url to get it from.

这篇关于404错误与Angularjs TemplateUrl路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！