Sanjay Yadav Sanjay Yadav - 6 months ago 64
AngularJS Question

Angular Uncaught Error: [$injector:modulerr]

I am troubling with angular js error
angular.js:36 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.19/$injector/modulerr?p0=app&p1=Error%3A%20…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.19%2Fangular.min.js%3A18%3A139)

index.php code is

<!DOCTYPE html>
<html ng-app="app">

<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.17/angular-animate.js"></script>
<link rel="stylesheet" href="<?php bloginfo('template_url')?>/style.css" />
<script src="<?php bloginfo('template_url')?>/angular-animate.js"></script >
<script src="<?php bloginfo('template_url')?>/script.js"></script>
</head>

<body ng-controller="Ctrll">
<p style="color:#000;margin:0"><span>slide:</span>{{slide}} </p>


<button ng-click="showAlerts()" style="float:left">
click to toggle panel
</button>
<!--sliding panel directive-->
<alerts-center ng-if="parentslide"></alerts-center>


</body>

</html>


js code is

angular.module("app",["ngAnimate"])
.controller("Ctrll",function($scope, $timeout){
$scope.parentslide =false;
$scope.showAlerts = function($event) {
$scope.parentslide =true;
$timeout(function(){
$scope.$broadcast('openAlerts');
},1)
}
})
.controller('alertsCtrl', function ($scope) {
$scope.$on('openAlerts', function(event, args) {
$scope.slide = !$scope.slide;
});
})
.directive('alertsCenter', function () {
return {
templateUrl: 'alerts.php',
replace:true,
restrict: 'E',
controller:'alertsCtrl'
};
});

Answer

If you working in plunker its fine. If not then the error may be due to

<script data-require="angular.js@1.2.20" data-semver="1.2.19" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script data-require="angular-animate@1.2.17" data-semver="1.2.17" src="http://code.angularjs.org/1.2.17/angular-animate.js"></script>

data-require and data-semver are actually specific implementations by Plunker.

Better to use: bower install angular-animate and add the script tag

< script src="/bower_components/angular-animate/angular-animate.js"></script >

finally Dependency injection

angular.module('myApp', ['ngAnimate']);