I have looked at a lot of examples related to setting up the app, and everything I'm doing seems correct but I'm still getting the error above. Here's my setup.
_Layout.cshtml
<!DOCTYPE html>
<html data-ng-app="homePricesApp">
<head>
<script src="libs/angular.1.0.8.min.js"></script>
<script src="controllers.js"></script>
<title></title>
</head>
<body >
<div data-ng-controller="PricesController"></div>
</body>
</html>
controllers.js
var app = angular.module("homePricesApp", []);
app.controller('PricesController', ['$scope', function ($scope) {
$scope.items = [];
} ]);
So what I'm doing is creating a new homePricesApp module, and when the page is loaded, because I have data-ng-app="homePricesApp", it initializes the homePricesApp module. I then create the controller. But when the page loads I get the error:
"Argument 'PricesController' is not a function, got undefined".
Any ideas would be greatly welcome.
UPDATE
After much reading I came across the idea of manually bootstrapping the app using the code below, which worked, as in it now hits my controller, but the error is being thrown by angular.js before it hits the controller code.
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById('pricesResults'), ['homePricesApp']);
});
Your code works for me.
Your angular is loaded correctly? try this
https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js
Related
This has been frustrating me a bit. I have a restful services giving JSON data running on the link:
http://localhost:51133/API/SalesSystem/
So its running locally on my computer. I can get the data from this service with no problem using my WPF based interface.
Another service I am testing with is this one:
http://rest-service.guides.spring.io/greeting
But from my own service something seems to go wrong somehow and I cannot figure out what goes wrong. I have even tried just taking the full response and printing it. With the second service, I get a long list of data regarding the response, but with my own I still get nothing. As if the function was not used at all.
This is my Angular code:
angular.module('demo', [])
.controller('Hello', function ($scope, $http) {
$http.get('http://localhost:51133/api/salessystem/').
//http://rest-service.guides.spring.io/greeting
//http://localhost:51133/API/SalesSystem/
then(function (response) {
$scope.hello = 'hello';
$scope.district = response;
});
});
and this is my html code:
<!doctype html>
<html ng-app="demo">
<head>
<title>Hello AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="Scripts/hello.js"></script>
</head>
<body>
<div ng-controller="Hello">
<li>Id: <button>{{hello}}</button></li>
<li>Area: {{district}}</li>
<ul ng-repeat="obj in hello">
<li>Area: {{obj.area}}</li>
</ul>
<p>The ID is {{hello.Id}}</p>
<p>The content is {{hello.Area}}</p>
</div>
</body>
</html>
Can anyone see the problem? The spring rest service shows all kinds of data about the response and it also shows the button with "hello" inside it. But when I use my own service link it seems there is no $scope returned at all.
Oh, and this is the json returned when I just visit the link directly in the browser: (its an array of 3 districts)
[{"Id":1,"Area":"North Denmark","PrimarySalespersonID":1,"PrimarySalesperson":{"Id":1,"Name":"Tom B. Erichsen"},"SecondarySalespersons":null,"Stores":null},{"Id":2,"Area":"Southern Denmark","PrimarySalespersonID":2,"PrimarySalesperson":{"Id":2,"Name":"Eric B. Thomsen"},"SecondarySalespersons":null,"Stores":null},{"Id":3,"Area":"Eastern Denmark","PrimarySalespersonID":3,"PrimarySalesperson":{"Id":3,"Name":"Ben Anderson"},"SecondarySalespersons":null,"Stores":null}]
I was just going through the code of a online reppositoty using angular.js and came across the following example:
<!DOCTYPE html>
<html ng-app="demoapp">
<head>
<script src="js/ol.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-sanitize.min.js"></script>
<script src="js/angular-openlayers-directive.js"></script>
<link rel="stylesheet" href="css/ol.css" />
<link rel="stylesheet" href="css/angular-openlayers-directive.css" />
<script>
var app = angular.module('demoapp', ['openlayers-directive']);
</script>
</head>
<body>
<openlayers lat="39.92" lon="116.38" zoom="10" height="400" custom-layers="true">
<ol-marker lat="39.92" lon="116.38" message="Here is Beijing. Dreamful place.">
</ol-marker>
</openlayers>
<h1>Adding a layer with markers with no javascript example</h1>
</body>
</html>
Now there is the below part:
var app = angular.module('demoapp', ['openlayers-directive']);
I am not quite sure about, the above line, I read about dependency injection HERE. But i am not quite sure what is the purpose of the above line ? what is it really doing ?
I have gone though a few online examples that have code like the below:
// Define a new module for our app. The array holds the names of dependencies if any.
var app = angular.module("instantSearch", []);
(See the comment) , Ok but i still don't get what ['openlayers-directive'] , is doing ?
It declares a module named 'demoapp' that is dependant on a module named 'openlayers-directive'. This, basically, means that all the angular components (directives, services, filters, controllers, constants, etc.) defined in the module 'openlayers-directive' will be usable in your angular application.
Read the documentation.
openlayers-directive is an angular module. When you are creating your demo app module, you are including a reference to the openlayers module.
So if you wanted to use other modules in your demo app module you would also include them here, where you are declaring your module for the first time.
For example:
var app = angular.module('demoapp', ['openlayers-directive', 'anotherModule', 'yetAnotherModule']);
In your code you can then pass in any services from these modules by simply including them as parameters.
So if you have a demoController you could pass in a service from one of the included modules and use it.
For example
angular.module('demoApp').controller('demoContoller', function($scope, anotherModuleService)
{
$scope.someFunctionFiredFromController = function()
{
//I have access to this service because the module it
//belongs to was referenced by the demoApp module, and the
//service was injected into the controller
anotherModuleService.doSomethingRelevant();
}
});
I'm getting this error when I try to attach a service to a controller:
[$injector:unpr] ... webSocketServiceProvider <- webSocketService <- videoMenuCtrl
I have a plunker defined with a fairly minimal setup that reproduces the problem:
http://plnkr.co/edit/ptaIaOhzOIG1mSi4bPyF?p=preview
Here are the main culprit files:
index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app="videoApp">
<section class="menu" ng-controller="videoMenuCtrl">
</section>
<script src="webSocketService.js"></script>
<script src="videoMenu.js"></script>
<script src="ngDialog.min.js"></script>
<script src="ngPopup.min.js"></script>
</body>
</html>
webSocketService.js:
(function(angular) {
'use strict';
angular.module('videoApp')
.factory('webSocketService', function($q) {
return{};
});
});
videoMenu.js:
'use strict';
var app = angular.module('videoApp', ['ngDialog', 'ngPopup']);
app.controller('videoMenuCtrl', function($scope, $window, $location, ngDialog, webSocketService) {
});
I don't get an error if I remove the webSocketService from the controller, but the point is to have the controller be able to access the webSocketService. Any ideas? Thanks!
Edit: Changed file name typo.
I got your code working. Two things I noticed:
In you webSocketService.js you were re-declaring the videoApp module.
You were declaring the module inside a function expression that was not being invoked.
I re-declared your service in a properly namespaced module and wrapped it in an immediately invoked function expression.
I also removed your var app = declaration from your videoMenuCtrl and wrapped it in an IIFE as well. This is to avoid cluttering the global namespace. Here is a working plunk:
http://plnkr.co/edit/A8BcATiaqhXCA7BZDXWx?p=preview
EDIT (clarification) The IIFEs are not strictly necessary in my example plunk because the var app = declaration was removed from the code. That was the only variable that was being declared on the global namespace in the original example. However, wrapping the code in IIFEs has no negative effects as far as I know.
Still finding my way with angular and I'm getting "Uncaught ReferenceError: y is not defined" on the line ".directive('y',[y,function(y){" . It's like it hasn't loaded the service. I also tried moving the scripts from the bod to the head but nothing do.
angular.module('fofApp', ['appRoutes'])
.factory('y',['$rootscope',function($rootScope) {
return {val: "he"};
}])
.directive('yow',[y,function(y){
return {
restrict: "E",
template: "<h1>aaaaah</h1>"
};
}]);
My html is
<!doctype html>
<html>
<head>
</head>
<body ng-app="fofApp">
<yow></yow>
<script src="libs/angular/angular.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Minification protection when using dependency injection requires strings as the first arguments (to match the order/number of the parameters passing into the function), which is always the last argument.
Change that y in your directive to a string. Like so:
.directive('yow',['y',function(y){
Here's a fiddle: http://jsfiddle.net/u4v4cafm/ (no errors in console)
Not sure if this is the problem, but factory expects you to return an object. Try changing it to:
angular.module('fofApp', ['appRoutes'])
.factory('y',['$rootscope',function($rootScope) {
return { value :"he" }
}])
Now that I have my script files referenced in my view template, I am having trouble injecting the first one into the second one.
If I unplumb the dependency that LearnerService has on SCORMService, everything displays according to plan, but is of course nonfunctional because LearnerService relies on SCORMService to accomplish its purpose. When I try to actually use my SCORMService within my LearnerService, I get Michael Bay explosions and sad trombones.
So, I'm using ngRoute. That might be important; maybe not.
I'll list my app.js, my script ordering in index.html, learnerServices.js, SCORMServices.js, and controllers.js
app.js
'use strict';
var app = angular.module('client', [
'ngRoute'
,'controllers'
,'services.proxy.scorm'
,'services.proxy.lms'
]);
index.html
...
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/SCORMService.js"></script>
<script src="js/LearnerServices.js"></script>
</head>
<body>
<div class="view-container">
<div ng-view class="view-frame"></div>
</div>
</body>
</html>
LearnerServices.js
'use strict';
var learnerServices = angular.module('services.proxy.lms',['scorm-service']);
learnerServices.factory('LearnerService', [ 'scorm-service', function(){
return true;
}]);
SCORMService.js
'use strict';
var services = angular.module('services.proxy.scorm', []);
services.factory('scorm-service',function(){
var foo = {};
foo.bar = "snazzy jazzy";
return foo;
});
I seem to be attempting to corner the market on stupid mistakes today. Can anyone see what stupid mistake I did this time?
This line should be:
var learnerServices = angular.module('services.proxy.lms',['services.proxy.scorm']);
Notice in your code you are saying the module has a dependency on scorm-service however the dependency for the module is on services.proxy.scorm
Load your dependencies first in your html. That'll help.