Error: $injector:modulerr Module Error .Where is bug in code?

0
votes
<!DOCTYPE html>
<html>
<head>
    <title>Angullr</title>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp">
    <div ng-controller="newController">
        {{hello}}
        <div my-direcitve></div>
    </div>
</div>
</body>
<script type="text/javascript">
(function() {
    dir = angular.module('mydirective',[]);
    dir.directive('myDirecitve', function() {
      return {
        template: '<ul><li>No Hello</li></ul>'
      };
    });
}); 

    var app = angular.module('myApp',['mydirective']);
    app.controller('newController',function($scope,myDirecitve){
        $scope.hello = 'hello Wolrd';
    });

</script>

</html>

Failed to instantiate module myApp due to: Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=m...) at Error (native)

3
angularjsmodule
I don't think the initial function block is being executed. Seems like it's missing () to me? - Hopeful Llama
@Hopeful Llama is right. That block isn't executed now, so module "mydirective" is missing and make error when init "myApp" module . You can add () as above or move all logic outside . - Tan Le
@sp prajapati Have you tried this or not? - Hopeful Llama

3 Answers

1
votes

Your directive should use the same Module, change from 'mydirective' to 'myApp'

(function() {
    dir = angular.module('myApp');
    dir.directive('myDirecitve', function() {
      return {
        template: '<ul><li>No Hello</li></ul>'
      };
    });
});
0
votes

Your code totally mismatched, Why you have used multiple module? And where you call the 'mydirective' module in tour HTMl? and what is the use of this?

Your code should looks like this 

<script type="text/javascript">    
      var app = angular.module('myApp',[]);
      app.directive('myDirecitve', function() {
      return {
        template: '<ul><li>No Hello</li></ul>'
       };
     });
    app.controller('newController',function($scope,myDirecitve){
        $scope.hello = 'hello Wolrd';
    });    
</script>

0
votes

First, you don't need to add directive to your controller

Seconds, there are 2 ways you can try:

1 use directive as a module:

<script type="text/javascript">
    var dir = angular.module('mydirective',[]);
    dir.directive('myDirective', function() {
      return {
        template: '<ul><li>No Hello</li></ul>'
      };
    });

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

    app.controller('newController',['$scope',function($scope){
        $scope.hello = 'hello World';
    }]);
</script>

2 use in your myApp module:

  <script type="text/javascript">
     var app = angular.module('myApp',[]);

     app.controller('newController',['$scope',function($scope){
       $scope.hello = 'hello World';
     }]);

     app.directive('myDirective', function() {
       return {

         template: '<ul><li>No Hello</li></ul>'
       };
     });
 </script>

I tested and it works, Hope this help!