Reputation: 3500
I'm trying to create a small note-taking application using AngularJS, but I stumbled at the very beginning. Here's my .js file:
var app = angular.module("app", ['ngResource']);
app.factory("note", ['$resource', function($resource){
return $resource("/api/notes/:id", {id:'@id'}, {
query: {method: "GET", isArray: true}});
}
]
);
app.controller("NotesController", function($scope, $note){
console.log("I am being constructed");
$scope.notes = $note.query();
});
And here's the html file:
<html>
<head>
<title>Jotted</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="js/controllers/controllers.js"></script>
<script src="http://code.angularjs.org/1.0.6/angular-resource.js"></script>
<link href='style/main.css' rel='stylesheet'>
</head>
<body ng-app="app" >
<div ng-controller="NotesController">
<div ng-repeat="note in notes">
{{note.title}}
</div>
</div>
</body>
</html>
I've tried adding
NotesController.$inject("$scope", "Note");
but it only gave ma an error saying that NotesController does not have a method named "$inject".
Nothing is displayed and the browser returns an error: "Error: Unknown provider: $noteProvider <- $note". Certainly I am missing something obvious, but I can't put my finger on it. Where does the problem lie?
Upvotes: 1
Views: 561
Reputation: 1165
Remove the $ Sign before your $note. The dollar Sign is only a convention of the Framework to identify internal Providers,... .
For example try:
var app = angular.module("app", ['ngResource']);
app.factory("note", ['$resource', function($resource){
return $resource("/api/notes/:id", {id:'@id'}, {
query: {method: "GET", isArray: true}});
}
]
);
app.controller("NotesController", function($scope, note){
console.log("I am being constructed");
$scope.notes = note.query();
});
Upvotes: 4