Javascript 模板未按角度路线加载_Javascript_Angularjs_Angular Routing

Javascript 模板未按角度路线加载

javascript angularjs

Javascript 模板未按角度路线加载,javascript,angularjs,angular-routing,Javascript,Angularjs,Angular Routing,问题很简单。我已经尝试了几个小时了，但就是无法通过angularJS客户端路由加载模板。不使用任何服务器端路由因此，使用了各种路径组合。如果我在href按钮中使用“/home”，它会立即给出找不到“/home”的错误。但是使用“#/home”时，我没有得到该错误，但它仍然无法加载模板任何帮助都将不胜感激创建了一个新的plunker：模板目录： Project --- | | CSS |

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

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

任何帮助都将不胜感激

创建了一个新的plunker：

模板目录：

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

JS:

HTML:

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

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

除了在每个href上加载相同的模板之外，您是否只看到了与声明相同的页面

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

$routeProvider
.when（“/home”{
templateUrl:'templates/home.html'，我可以在代码中看到一些错误，如果您可以添加控制台中看到的错误，这将非常有用（如果您使用的是Google Chrome，右键单击页面的任何部分，检查元素，然后转到控制台选项卡）。在那里，您可以找到有关生成错误的更多详细信息，可能是路径问题，也可能是其他问题。事实上，我在控制台中没有看到任何错误。签出。为此问题创建了一个新的plunker。您的plunkr中对AngularJS的引用已断开。在我的控制台中工作。再次检查1）我只是做了一个简单的路由作为一个POC，所以我想加载home.html点击一些锚标记指向/home。2）忽略控制器和编辑部分。这只是虚拟控制器。主要的一点是我想路由home.html到ng视图时，锚标记被点击。签出。创建了一个新的plunker的问题。感谢尝试。但这项工作s在plunker中，但不在我的系统中。我会让你放弃尝试。我在你的plunker上做了一点工作，我让它按照我相信你希望的方式工作。由于我无法保存它，我用工作代码更新了我的plunker。（我在那里也留下了一些评论）事实上，我已经开始处理您之前提供的模板。只是复制粘贴了它。可能是我的旧代码存在未知问题。因此必须清理它并重新粘贴整个模板（再次粘贴旧代码）转换为您的格式。所以它现在正在工作。谢谢。但我仍然非常困惑如何在锚定标记中使用URL。是否将#与URL一起使用。
<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>

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