Angular 路线中未加载模板

Question

问题很简单。我已经尝试了几个小时，但就是无法通过 angularJS 客户端路由加载模板。不使用任何服务器端路由。

因此，使用了各种路径组合。如果我在按钮 href 中使用“/home”，它会立即给出找不到“/home”的错误。但是使用“#/home”，我没有得到那个错误，但它仍然不会加载模板。

如有任何帮助，我们将不胜感激。

创建了一个新的 plunker：http://plnkr.co/edit/F7KoWbBuwsXOQLRPF0CN?p=preview

模板目录：

Project ---
           |
           |
          CSS
           |
           |
          JS
           |
           |
       templates---
                  |
                  |
                home.html

JS:

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


myApp.controller('appController',function($scope,$http){
//mytext = 0; instantiating variables without using var gives referencing error due to "use strict";
      $scope.angular = angular;
      $scope.mytext = "Harsh";
      $scope.formSuccess = false;


    $http({method:"GET", url:"JS/carousel-data.json"}).
    success(function(data) {
    $scope.carouselData = angular.fromJson(data);   
    }).
    error(function(data) {
        console.log("Error loading images");
    });

myApp.config(function($routeProvider, $locationProvider) {

  $routeProvider
   .when('/home', {
    templateUrl: 'templates/home.html',
    controller: 'appController'
  })
  .when('/edit', {
    templateUrl: 'templates/home.html',
    controller: 'appController'
  });

});

HTML:

<body ng-controller="appController">
    <header id="pageHeader" class="col-md-12 col-sm-12 col-xs-12 header">


                <nav class="col-md-5 col-sm-6  col-xs-10 menu">
                    <ul class="nav nav-pills" id="menuLinks">

                        <li class="dropdown visible-xs">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Sapient <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                            <li><a href="#/home">Home</a></li>
                            <li><a href="#/edit">Edit</a></li>
                          </ul>
                        </li>

                        <li role="presentation" class="hidden-xs" ><a href="#/home">Home</a></li>
                        <li role="presentation" class="hidden-xs" ><a href="#/edit">Edit</a></li>
                    </ul>

                 </nav>

            </header>

<div ng-view></div>

</body>

Answer 1

不太清楚您是如何设置的？ HTML 是你的索引还是你的 home.html?

其次，您已经将页面的控制器声明为 appController，无需再使用 ng-controller 指令定义它。

除此之外，您在每个 href 上都加载了相同的模板，难道您只是看到了与声明的页面相同的页面吗？

  $routeProvider
   .when('/home', {
    templateUrl: 'templates/home.html', <---
    controller: 'appController' <---
  })
  .when('/edit', {
    templateUrl: 'templates/home.html', <---
    controller: '**appController'<--
  });

值得注意的是，有一个更广泛的路由模块。您可以在 ui-router.

找到它

Angular 路线中未加载模板

Template not loading in Angular route

javascript

angularjs

angular-routing