首页 > 解决方案 > angularjs 模块不可用,即使我有它

问题描述

我正在学习 AngularJS 并遇到问题。这是我的文件结构,

project
  |-index.html
  |-todoitems.html
  |-lib
     |-script.js
     |-directives.js
<!-- index.html -->
<!DOCTYPE html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css" />
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
      crossorigin="anonymous"
    />
    <script src="lib/script.js"></script>
    <script src="lib/directives.js"></script>
 
  </head>

  <body ng-app="todo" ng-cloak>
    <div ng-controller="TodoCtrl">
      <div class="container">

      <h1>Hello {{name}}</h1>
      <todo-items></todo-items>
      </div>
    </div>
  </body>
</html>
// script.js
import angular from 'angular';

var app = angular.module('todo', []);

app.controller('TodoCtrl', ['$scope', function($scope){
  $scope.name = 'World'
}])
// directives.js
import angular from 'angular';

var app = angular.module('todo', []);

app.directive('todoItems', [
  function(){
    return {
      template: '<h3> hello</h3>'
    }
  }
])

但是我收到了这个错误,

Error: [$injector:nomod] Module 'todo' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

有什么我错过或做错了吗?

标签: angularjs

解决方案


推荐阅读