Question

i'll show all my code:

<!doctype html>
<html lang="en" ng-app='myapp'>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.css">
</head>
<body ng-controller="myCtrl">
    <input type="text" ng-model="testforie">
    <h1>{{testforie}}</h1>

<button type="button" class="btn btn-lg btn-primary" data-placement="top-right" data-container="body" data-duration="3" bs-alert="alert">Click to toggle alert
  <br>
  <small>(using an object)</small>
</button>
    <div>
        <button  data-template="popoverTpl.html" bs-popover>angular strap popover</button>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-route.min.js"></script>
    <script src="bower_components/angular-strap/dist/angular-strap.min.js"></script>
    <script src="bower_components/angular-strap/dist/angular-strap.tpl.min.js"></script>
    <script src="app.js"></script>
</body>
</html>

my controller:

angular.module('myapp',['ngAnimate', 'ngSanitize', 'mgcrea.ngStrap'])
.controller('myCtrl', ['$scope','$alert', function ($scope,$alert) {
    $scope.alert = {
      "title": "Holy guacamole!",
      "content": "Best check yo self, you're not looking too good.",
      "type": "info"
    };
     var myAlert = $alert({title: 'Holy guacamole!', content: 'Best check yo self, you\'re not looking too good.', placement: 'top', type: 'info', show: true});
}])

the error is :

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.9/$injector/modulerr?p0=myapp&p1=Error%3A%2…org%2F1.2.9%2F%24injector%2Fmodulerr%3Fp0%3DngAnimate%26p1%3DError%253A%25......5)

this is a very easy demo, i just want to start use angular strap, but there always some errors show up indicate my miss some files, this really freak me out!

Where is my problem? How could i start my angular strap app?

Was it helpful?

Solution

You've defined ngSanitize as a dependency in your myapp module, but not included angular-sanitize.min.js in the HTML.

Add <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-sanitize.min.js"></script> and you should be fine :)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top