Question

我是棱角分明的新手，我很难让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>

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

我已经检查了cdn网址，以确保没有任何版本不一致，什么不是，但似乎并非如此。

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

上面的代码中是否有我遗漏的内容，这会阻止我的模板在'/'中呈现？

谢谢！

Answer 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

}]);

Answer 2

问题在于您的when ('/')。由于您的网址为#/home，因此会在.when中查找该网址。

将其更改为

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

Answer 3

我已经执行了你的代码并且在mozilla上工作正常。

但是，如果我们在没有放入服务器的情况下运行文件，则在交叉原始请求的chrome中存在问题。

但是如果你将它放在服务器上（可能是xampp / wampp）并运行该文件，它在chrome上工作正常。您正在使用的角度库具有对另一台服务器的http请求。

Answer 4

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

我在Chrome上进行本地测试（没有nodejs）时遇到了这个问题;但是，当我在Safari中打开它时它确实有效。似乎ngRoute在Chrome中的本地文件上窒息。

我在这里找到了对这个问题的引用，这是关闭的，~~所以我猜测如果我更新到新版本我不应该有这个问题。~~

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

设置网络服务器应解决此问题。

Why AngularJS routes are not working in local?

ngRoute找不到模板

4 个答案: