ngRoute没有找到模板答案

【问题标题】：ngRoute not finding templatengRoute没有找到模板
【发布时间】：2016-05-14 03:53:43
【问题描述】：

我是 Angular 新手，很难让 ngRoute 获取我的模板文件。

这是我的 index.html：

<html ng-app="myApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-route.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script src="app.js"></script>
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<nav>
    <div>
        <ul>
             <li><a href="#/home">home</a></li>
        </ul>
    </div>
</nav>

<body>
    <div ng-view>
    </div>
</body>


</html>

这是我的 app.js：

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

myApp.controller('MainCtrl', function($scope) {
    $scope.message = 'Hello World';
});

myApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
    .when('/home', {
            templateUrl: 'pages/home.html',
            controller: 'MainCtrl'
        })
        .otherwise({
            redirectTo: '/home'
        });
}]);

这是我的页面/home.html：

<div ng-controller="MainCtrl">
    <p>Test</p>
    <p>{{ message }}</p>    
</div>

我可以看到它正在将 #/ 附加到根 url，所以这可能是部分工作；但是，它似乎没有在“pages/home.html”处呈现模板。

我已经检查了 cdn url 以确保没有任何版本不一致，但事实并非如此。

这几乎是我的第一个 Angular 项目，我刚刚离开文档，但肯定有一些我没有看到的东西。来自其他服务器端项目，缺乏堆栈跟踪让我很生气哈哈。

我在上面的代码中是否缺少某些东西，这会阻止我的模板在“/”中呈现？

谢谢！

【问题讨论】：

去掉#，需要使用html5Mode(true)或者也可以使用.htaccess来实现。
你能让它工作吗？
我仍然无法正常工作。 index.html 重定向到 /index.html#/ 并保持空白。当我修改为使用 html5Mode(true);
尝试将您的 jquery-min.js 包含在 angular js 脚本之上。您在控制台中遇到任何错误吗？
@chrisl0lz 你不需要添加任何位置服务和 html5Mode 路由。当您想删除 URL 中的 # 时，您只需要 html5mode 路由。你的问题不一样。看看我的解决方案

标签： javascript angularjs ngroute

【解决方案1】：

这是我的代码，它运行良好，您可以从中获得帮助。

var EventList = angular.module("EventList", ['ngRoute' ,'infinite-scroll']);
EventList.config(function($routeProvider) {
    //$locationProvider.html5Mode(true); 
    $routeProvider
        .when('/', {
            templateUrl: 'views/business/business_home_events.html',
            controller: 'EventListController'
         });
});

EventList.controller('EventListController', ['$scope',  '$http', '$route', function($scope,  $http, $route){

        // Do your work

}]);

【讨论】：

【解决方案2】：

问题在于您的when ('/')。由于您的网址有#/home - 它会在.when 中查找该路线。

改成

myApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
    .when('/home', {          // <-
            templateUrl: 'pages/home.html',
            controller: 'MainCtrl'
        })
        .otherwise({
            redirectTo: '/'
        });
}]);

【讨论】：

我也注意到了这一点，并将我的网址更改为“#/”，但没有成功。
@chrisl0lz 不要更改你的 URL，你的 url 应该是 #/home，将你的 .when('/') 更改为 .when('/home')

【解决方案3】：

这很烦人，但我想我想通了。

我在 Chrome 上进行本地测试（无 nodejs）时遇到了这个问题；但是，当我在 Safari 中打开它时，它确实可以正常工作。 ngRoute 似乎会阻塞 Chrome 中的本地文件。

我在这里找到了该问题的参考，该问题已关闭，~~所以我猜如果我更新到较新的版本，我不应该有这个问题。~~

https://github.com/angular/angular.js/issues/4680

设置一个网络服务器应该可以解决这个问题。

Why AngularJS routes are not working in local?

【讨论】：

【解决方案4】：

我已经执行了你的代码，并且在 mozilla 上运行良好。

但是，如果我们在不放入服务器的情况下运行文件，则跨源请求的 chrome 会出现问题。

但如果您将它放在服务器上（可能是 xampp/wampp）并运行文件，它在 chrome 上也可以正常工作。您正在使用的 Angular 库向另一台服务器发出 http 请求。

【讨论】：