模板未在Angular路線中加載

Question

問題很簡單。 我已經嘗試了幾個小時，但是無法通過angularJS客戶端路由來加載模板。 不使用任何服務器端路由。

因此，使用了各種路徑組合。 如果我在按鈕href中使用“ / home”，則會立即顯示找不到“ / home”的錯誤。 但是，使用“＃/ home”，我不會收到該錯誤，但仍然不會加載模板。

任何幫助將不勝感激。

創建了一個新的插件： 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 個解決方案

解決方案1
2 已采納 2015-06-17 13:27:41

模板未在Angular路線中加載

問題描述

1 個解決方案

解決方案1 2 已采納 2015-06-17 13:27:41

解決方案1
2 已采納 2015-06-17 13:27:41