Angular JS模板文件todo.tpl.html无法加载，如何修复？

兄弟，我来帮你搞定这个模板加载失败的问题，结合你给出的代码，大概率是这几个常见坑导致的，咱们一步步排查解决：

1. 模板路径或文件名错误 #

• 先确认todo.tpl.html和index.html是否在同一目录下？如果模板放在子文件夹（比如templates/）里，那指令里的templateUrl必须写对相对路径，比如'templates/todo.tpl.html'。
• 仔细检查文件名拼写：有没有把todo写成to-do？后缀是不是.html？另外注意大小写（Linux/Mac系统区分文件名大小写，Windows不区分）。

2. 指令定义中模板引用错误 #

你肯定在script.js里定义了my-todo指令对吧？要确保用的是templateUrl而不是template来引用外部模板，而且路径要正确。给你一个标准的指令示例参考：

angular.module('myApp', [])
  .controller('main', function($scope) {
    // 这里填你的待办数据
    $scope.todo = [
      {text: '学习AngularJS', done: false},
      {text: '修复模板问题', done: false}
    ];
  })
  .directive('myTodo', function() {
    return {
      restrict: 'E', // 元素型指令，对应<my-todo>标签
      scope: {
        list: '=', // 双向绑定父作用域的todo数据
        title: '@' // 单向绑定父作用域的title属性
      },
      templateUrl: 'todo.tpl.html' // 这里的路径必须和实际文件位置匹配
    };
  });

3. 本地文件跨域限制问题 #

如果直接用浏览器打开本地的index.html（URL是以file://开头），AngularJS会因为浏览器的跨域安全限制，无法加载本地的模板文件。解决方法很简单：用本地服务器来运行项目：

• Python用户：在项目目录打开终端，运行python -m http.server 8000（Python3）或python -m SimpleHTTPServer 8000（Python2），然后访问http://localhost:8000/index.html。
• Node.js用户：先全局安装http-server：npm install -g http-server，然后在项目目录运行http-server，访问终端给出的本地地址即可。

4. 模板文件内容不完整或有语法错误 #

你给出的todo.tpl.html内容是截断的：<h1>{{title}}</h1><div n...，要确保模板是完整的合法HTML，比如闭合所有标签，没有语法错误。比如一个完整的待办模板可以是：

<h1>{{title}}</h1>
<div ng-repeat="item in list">
  <input type="checkbox" ng-model="item.done">
  <span ng-class="{'done': item.done}">{{item.text}}</span>
</div>
<style>
  .done { text-decoration: line-through; color: #999; }
</style>

按照上面的步骤排查，应该就能解决模板加载失败的问题了！

内容的提问来源于stack exchange，提问作者T J