CODEWITHSUNDEEP
angularjsangularjs-animation
Bojana Šekeljić
Bojana Šekeljić

Reputation: 1056

Error when injecting angular-animate.js

I am receiving the following error when injecting angular-animate.js: Unknown provider: $animateProvider from ngAnimate

Here is my app.js:

var MyApp = angular.module("MyApp", ["ui.bootstrap", "ngAnimate"])

Here is head of index.html:

<html lang="en" ng-app="MyApp">
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="angular.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript" src="angular-animate.js"></script>
    <script type="text/javascript" src="ui-bootstrap-tpls-0.6.0.min.js"></script>
    <script type="text/javascript" src="controllers.js"></script>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css" />
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
    <title>My App</title>
</head>
<body ng-controller="AppCtrl" style="padding-bottom: 70px">

Bootstrap alone is loaded fine.

What am I doing wrong?

Here is the plnkr

Upvotes: 2

Views: 9589

Answers (2)

KayakDave
KayakDave

Reputation: 24676

I got a different error with your code. I got a missing $routeProvider error.

As the first line of your app.js try this:

var MyApp = angular.module("MyApp", ["ngRoute", "ngAnimate", "ui.bootstrap"])

instead of 

var MyApp = angular.module("MyApp", ["ngAnimate", "ui.bootstrap"])

And add it your header:

<script  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-route.js"></script>

By the way, using the non-minified version of Angular in plnkr.co gives a more human readable error message in these cases.

Upvotes: 3

Fourth
Fourth

Reputation: 9351

You are declaring app.js before the angular-animate library. Try this:

<html lang="en" ng-app="MyApp">
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="angular.js"></script>
    <script type="text/javascript" src="angular-animate.js"></script>
    <script type="text/javascript" src="ui-bootstrap-tpls-0.6.0.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript" src="controllers.js"></script>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css" />
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
    <title>My App</title>
</head>
<body ng-controller="AppCtrl" style="padding-bottom: 70px">

Upvotes: 1

Related Questions