ngRoute找不到模板

ngRoute not finding template

本文关键字：找不到 ngRoute      更新时间：2023-09-26

我是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项目，我刚刚离开文档，但肯定有一些东西我没有看到。来自其他服务器端项目，缺少堆栈跟踪让我很头疼哈哈。

上面的代码中是否缺少一些东西，阻止了我的模板在"/"中呈现？

谢谢！

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

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
}]);

问题出在when ('/')上。由于你的url有#/home，它会在.when中查找该路由。

将其更改为

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

这是一个令人讨厌的问题，但我想我已经解决了。

我在Chrome上本地测试（没有nodejs）时遇到了这个问题；然而，当我在Safari中打开它时，它确实有效。ngRoute似乎阻塞了Chrome中的本地文件。

我在这里找到了一个关于这个问题的参考，它已经关闭了，，所以我猜如果我更新到一个新版本，我就不会有这个问题

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

设置web服务器可以解决此问题

为什么AngularJS路由在本地不起作用？

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

然而，如果我们在没有放入服务器的情况下运行文件，那么跨源请求的chrome就会出现问题。

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

相关文章：