I'm new on AngularJs.
I have trouble injecting a service into a controller in AngularJS.
I read many tutorials and topics on stackoverflow, but I can't fix my issues because the controller & service use the same module like this:
var myModule = angular.module("myModule", []);
myModule.service("myService", MyService);
myModule.controller("MyController", function($scope, myService) {
myService.doIt();
});
My project works when the service & controller use the same module, but I want each one to use its own module because many controllers should use this service.
(I try to minimize the code)
index.html :
<!doctype html>
<html lang="en" ng-app="interfaceApp">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<head>
<meta charset="utf-8">
<title>Interface de consulation</title>
<link rel="stylesheet" href="resources/css/bootstrap.css">
<link rel="stylesheet" href="resources/css/app.css">
<link rel="stylesheet" href="resources/css/animations.css">
<script src="resources/vendors/jquery/jquery.js"></script>
<script src="resources/vendors/angular/angular.min.js"></script>
<script src="resources/vendors/angular/angular-animate.js"></script>
<script src="resources/vendors/angular/angular-route.js"></script>
<script src="resources/vendors/angular/angular-resource.js"></script>
<!--personal script-->
<script src="js/controllers/router.js"></script>
<script src="js/animations/animations.js"></script>
<script src="js/filters/filters.js"></script>
<script src="js/services/services.js"></script>
<script src="js/services/deserializer.js"></script>
<script src="js/directives/directives.js"></script>
<!-- load my controller -->
<script src="js/controllers/phoneController.js"></script>
<script src="js/controllers/specimenController.js"></script>
<script src="js/controllers/localisationController.js"></script>
</head>
<body>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div class="view-container">
<div ng-view class="view-frame"></div>
</div>
</body>
</html>
router.js:
'use strict';
/* App Module */
var interfaceApp = angular.module('interfaceApp', [
'ngRoute',
'phoneModules',
'localisationModules',
'specimenModules',
'interfaceFilters',
'interfaceDirectives',
'interfaceAnimations',
'interfaceServices',
// 'DeserializerService' // Error: [$injector:modulerr]
]);
interfaceApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/home.html',
controller: 'MainCtrl'
}).
when('/specimens', {
templateUrl: 'partials/specimen/list.html',
controller: 'specimenListeCtrl'
}).
when('/specimens/:specimensId', {
templateUrl: 'partials/specimen/detail.html',
controller: 'specimenDetailCtrl'
}).
otherwise({
redirectTo: '/'
});
}]);
js/controllers/specimenController.js :
'use strict';
/* Controllers */
var specimenModules = angular.module('specimenModules', ['ngRoute']);
...
var referencedTag={"mediasSet":"#mediasSet","determinations":"#determinationID"};
specimenModules.controller('specimenListeCtrl', ['$scope', '$http', 'DeserializerService',
function ($scope,$http,DeserializerService) {
var request = 'http://localhost:8888/ui/specimens?limit=10&r_medias=false&orderby=d_determinationid';
$http.get(request).success(function(data) {
DeserializerService.startDeserializer(data,referencedTag);
$scope.specimens=data;
});
}
]);
js/services/deserializer.js :
var deserializerModule = angular.module('DeserializerModule', []);
deserializerModule.service('DeserializerService', function() {
***//specimenModules.service('deserializerService', function() { // work but i dont want to use specimenModules her***
this.referencedTag= [];
this.startDeserializer= function(data,refTag) {
this.referencedTag=refTag;
this.deserializer(data);
}
this.deserializer= function(data) {
...
}
});
I tried many combinations, but all failed giving error like :
Error: [$injector:modulerr]
Error: [$injector:unpr]
but i don't see where it come from on firebug ( the error dont give a line or file )
ERROR:
Error: [$injector:unpr] http://errors.angularjs.org/1.2.17/$injector/unpr?p0=DeserializerServiceProvider%20%3C-%20DeserializerService
u/<#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:6:443
ec/l.$injector<#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:36:139
c#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:34:195
ec/p.$injector<#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:36:209
c#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:34:195
d#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:34:409
f/<.instantiate#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:35:101
Od/this.$get</<#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:66:463
ngViewFillContentFactory/<.link#http://localhost/rec-interface/resources/vendors/angular/angular-route.js:913:1
N#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:54:85
g#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:47:55
v/<#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:46:253
O/<#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:47:485
x#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:51:245
update#http://localhost/rec-interface/resources/vendors/angular/angular-route.js:871:1
Yd/this.$get</h.prototype.$broadcast#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:113:355
updateRoute/<#http://localhost/rec-interface/resources/vendors/angular/angular-route.js:552:15
ze/e/l.promise.then/D#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:99:243
ze/e/l.promise.then/D#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:99:243
ze/f/<.then/<#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:100:407
Yd/this.$get</h.prototype.$eval#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:111:110
Yd/this.$get</h.prototype.$digest#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:108:180
Yd/this.$get</h.prototype.$apply#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:111:449
g#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:72:113
x#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:76:463
ve/</v.onreadystatechange#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:78:1
<div ng-view="" class="view-frame ng-scope">
Thanks for your help, any advice or critics are welcomed.
many thank #jcubic you are right it work !!!
it need double "injection", one for module and one for service name:
var specimenModules = angular.module('specimenModules', ['ngRoute','DeserializerModule']);
...
specimenModules.controller('specimenListeCtrl', ['$scope', '$http', 'DeserializerService', function ($scope,$http,DeserializerService) { ... }])
thanks
Related
I have used angular and angular routing
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
In error this file
Indexcontroller.js
var app = angular.module('myapp', ['ngRoute']);
app.controller('myCtrl', ['$scope']);
app.config(["$routeProvider", function($routeProvider) {
$routeProvider
.when('/ui-login', {
templateUrl: 'ui-login.html',
controller: 'loginController'
})
.otherwise({
redirectTo: '/ui-login'
});
}]);
app.controller('loginController', function($scope) {
//Controller Here
$scope.submit = function() {
console.log("hi i m coming");
}
console.log("in controller");
});
Error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.9/$injector/modulerr?p0=myApp&p1=Error%3A%2…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A22%3A332)
Output:
enter image description here
I solved the issue
I have to put angular.min.js before angular-route.min.js and than it's solved
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
order matters here
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>
im fairly new to angular. im trying to understand why this doesnt work:
error recieved is:
Uncaught Error: [$injector:modulerr] Failed to instantiate module phonecatApp due to:
Error: [$injector:modulerr] Failed to instantiate module phoneList due to:
TypeError: Cannot read property 'controller' of undefined
angular.
module('phoneList').
component(name, component);
var name = 'phoneList';
var component = {
templateUrl: 'phone-list/phone-list.template.html',
controller: ['$http', function PhoneListController($http) {
var self = this;
self.orderProp = 'age';
$http.get('phones/phones.json').then(function(response) {
self.phones = response.data;
});
}]
};
how can i fix this ?
i know i can do this but i prefer decomposing the object as above. please advise
angular.
module('phoneList').
component('phoneList', {
templateUrl: 'phone-list/phone-list.template.html',
controller: ['$http', function PhoneListController($http) {
var self = this;
self.orderProp = 'age';
$http.get('phones/phones.json').then(function(response) {
self.phones = response.data;
});
}]
});
Have you tried to define the name and component vars before using them in .component(name, component) ? Like:
var name = 'phoneList';
var component = {
templateUrl: 'phone-list/phone-list.template.html',
controller: ['$http', function PhoneListController($http) {
var self = this;
self.orderProp = 'age';
$http.get('phones/phones.json').then(function(response) {
self.phones = response.data;
});
}]
};
angular.
module('phoneList').
component(name, component);
this is the index.html. i already have app.module.js defining this
'use strict';
// Define the `phonecatApp` module
angular.module('phonecatApp', [
'ngRoute',
'phoneDetail',
'phoneList'
]);
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title>Google Phone Gallery</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="app.css" />
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.module.js"></script>
<script src="app.config.js"></script>
<script src="phone-list/phone-list.module.js"></script>
<script src="phone-list/phone-list.component.js"></script>
<script src="phone-detail/phone-detail.module.js"></script>
<script src="phone-detail/phone-detail.component.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
this is not the issue. my example is straight from the angularjs tutorial with the above only difference of separating the component object from the component itself.
This is in app.js:
var angular = angular.module('ngApp', ['ngRoute']);
angular.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '../templates/companies.html',
controller: 'companies'
})
.........
});
This is in companies.js:
angular.module('ngApp').controller('companies', ['$scope', function($scope) {
.........
}]);
This is in index.html:
<head>
<title>Basic demo</title>
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script src="js/app.js" type="text/javascript"></script>
<script src="js/Controllers/companies.js" type="text/javascript" ></script>
</head>
I keep getting this error:
Uncaught TypeError: angular.module is not a function
at companies.js:1
What am I doing wrong?
You are trying to use a variable called angular. Think what causes that variable to exist. That is found in the angular.js script which must then be included first.
At the time your angular code runs, angular does not exist yet. This is an error (see your console window of Dev Tools ). Kindly use same version of Angular file and angular-route !
Your problem is that you've overwritten angular object in app.js file:
var angular = angular.module('ngApp', ...
Try renaming angular variable to something else, like app.
Here is a plunker example of it:
http://plnkr.co/edit/t9KoqROnfWda8XsThOPE
Use same version of Angular and AngularRoute
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
(function () {
'use strict';
var myApp = angular.module('ngApp', ['ngRoute']);
myApp.config(function($routeProvider) {
$routeProvider
.when('/', {
//....
})
})();
I've started learning Angular JS and I'm having a problem with injecting a service into a controller. I'm trying to put the ThreadFactory service into ThreadController, but I'm getting an undefined error when calling it. Any advice would be great. The error I'm getting is:
Unknown provider: $scopeProvider <- $scope <- ThreadService
app.js
angular.module('threadsApp', ['ngRoute']);
angular.module('threadsApp')
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/index.html',
})
.when('/selected/:topicName', {
templateUrl: 'views/threads.html',
controller: 'ThreadController',
})
.otherwise({
redirectTo: "/"
});
$locationProvider.html5Mode(true);
});
ThreadController.js
angular.module('threadsApp').controller("ThreadController",
["$scope", "$route", "$routeParams", "ThreadService", function ($scope, $route, $routeParams, ThreadService) {
$scope.test = "Hello!";
$scope.test2 = ThreadService.get();
}]);
ThreadService.js
angular.module('threadsApp').service("ThreadService", ["$scope", function ($scope) {
return {
get: function() {
return "Hello";
}
}
}]);
Order of Imports
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="components/app.js"></script>
<script src="components/bodyController.js"></script>
<script src="components/TopicController.js"></script>
<script src="components/ThreadService.js"></script>
<script src="components/ThreadController.js"></script>
You can't actually inject $scope into your ThreadService the way you're trying to. $scope isn't a typical service when you inject it into a controller. If you remove the $scope injection from Threadservice.js, I would bet the error will go away.
In the interest of not being redundant, a fuller explanation can be found here:
Injecting $scope into an angular service function()
I just followed a tutorial about angular on youtube but i'm not able to execute the code due to an routeProvider problem. I tried to include the good link for angular-route.js but it's still doesn't work...
I show you the code:
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<title>Tuto Angular</title>
</head>
<body>
<div>
<div ng-view=""></div>
</div>
<script src="angular.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.js"></script>
<script type="text/javascript">
var demoApp = angular.module('demoApp', ['ng-route']);
demoApp.config(function ($routeProvider){
$routeProvider
.when('/',
{
controller: 'SimpleController',
templateUrl: 'Partials/View1.html'
})
.when('/view2',{
controller: 'SimpleController',
templateUrl: 'Partials/View2.html'
})
.otherwise({ redirectTo: '/' });
});
demoApp.controller('SimpleController', function ($scope){
$scope.customers = [
{name:'John Smith', city:'Phoenix'},
{name:'John Doe', city:'New York'},
{name:'Jane Doe', city:'Chicago'}
];
$scope.addCustomer = function (){
$scope.customers.push(
{
name: $scope.newCustomer.name,
city: $scope.newCustomer.city
});
};
});
</script>
</body>
When i look into the console it returns me that:
Uncaught Error: [$injector:modulerr]
If you have any idea you're welcome !
change:
var demoApp = angular.module('demoApp', ['ng-route']);
to
var demoApp = angular.module('demoApp', ['ngRoute']);
When injecting a dependency into our app module,use camelCase and not snake-case
Here, use ngRoute and not ng-route
See: https://stackoverflow.com/a/11934258/1177295
In Angular we need to use camelCase for Dependency injection and Directive definition in java Scripts files and snake-case in the HTML pages where directive is used
Lets take if you have directive myFirstDirective in Directive defination you will use
demoApp.directive(myFirstDirective, function () {
return{}
});
In the HTMl you will use
<my-first-directive></my-first-directive>
You have only included it inside the function. You have to inject the serivce into the config method and make sure the ng-route is included in the app references