CODEWITHSUNDEEP
javascriptangularjs
Devin Dixon
Devin Dixon

Reputation: 12383

AngularJS Error: Unknown provider

I'm getting the classic the classic Error: Unknown provider: UserModelProvider <- UserModel with angular JS. My code looks like this:

var ClabborApp = angular.module('clabbor', []);

ClabborApp.factory('UserModel', function() {
    var UserModel = {};

    var list = [];
    UserModel.getItem = function(index) {
        return list[index];
    }
    UserModel.addItem = function(item) {
        list.push(item);
    }
    UserModel.removeItem = function(item) {
        list.splice(list.indexOf(item), 1)
    }
    UserModel.size = function() {
        return list.length;
    }

    return UserModel;

});

function FollowersCtrl($scope, UserModel) {
    $scope.followers = [{
        text : 'learn angular',
        done : true,
        'name' : 'James'
    }, {
        text : 'build an angular app',
        done : false,
        'name' : 'John'
    }];
}

And my html looks like this:

<html lang="en" ng-app>
    <meta charset="utf-8">
    <body ng-app="clabbor">
      <div class="content follow" ng-controller="FollowersCtrl">
        <ul class="clearfix">
            <!-- Show max 12 followers -->
            <li ng-repeat="follower in followers">
                {{follower.name}}
            </li>
              </ul>
     </div>

    </body>

</html>

I thought I did it by the book but I am getting the error. Does anyone know what could it be?

Upvotes: 0

Views: 574

Answers (1)

Abdulsattar Mohammed
Abdulsattar Mohammed

Reputation: 10722

Remove the ng-app attribute from the html tag. Here's Jsfiddle that's working: http://jsfiddle.net/eA2xx/. You can't have more than one ng-app.

Upvotes: 3

Related Questions