Question

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

因此，使用了各种路径组合。如果我使用＆＃34; / home＆＃34;在按钮href它直接给出错误，它无法找到＆＃34; / home＆＃34;。但是使用＆＃34;＃/ home＆＃34;，我没有收到该错误，但仍然无法加载模板。

非常感谢任何帮助。

创建了一个新的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路线中加载

1 个答案: