模板未在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