I've setup an angular seed project with some services and a factory. companyService depends on a factory called company. Injecting company into companyService fails with this error. I can't seem to figure out what I'm doing wrong.
var module = angular.module('project.services', []);
module.factory('company', ['$rootScope', 'Resource', function($rootScope, $resource){
return $resource($rootScope.api + 'companies/:id');
}]);
module.service('companyService',['$rootScope', '$http', 'company', function($rootScope, $http, company){
var companies;
//var $injector = angular.injector();
//var company = $injector.get('company');
// some more functions ....
}]);
ngResource is a separate module, so you should include the angular-resource[.min].js script and declare ngResource as a dependency of your app:
angular.module('myApp', [..., 'ngResource']);
Related
I use webpack with my AngularJS webapp project.
import routing from './config';
import connection from 'E:/Workspace/Mbisvn/quiky-frontend/app/modules/connection/web-connector.js';
var app = angular.module('app', [
uirouter, sanitize, cookies, resource, ngUpload, connection,
uiBt, loadingBar
]);
app.controller("LoginCtrl", LoginCtrl);
But I have error LoginCtrl is not defined when I declare app.controller("LoginCtrl", LoginCtrl);
And this is my LoginCtrl script (login-ctrl.js)
var LoginCtrl = ['$scope', '$log', '$state', 'webConnectorService',
function($scope, $log, $state, webConnectorService) {
$scope.webConnectorService = webConnectorService;
$scope.init = function() {
};
$scope.getUserProfile = function() {
};
$scope.init();
}];
I don't know how to import login-ctrl.js file in webpack to solve this error. Thanks for the help.
Hi I've been trying to unit test basic functions in my controller however I can't seem to connect when setting up the unit test.
Error: [$injector:modulerr] Failed to instantiate module myApp due to:
[$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
Here is my controller:
var myApp = angular.module("myApp", []);
myApp.controller('studentController', function($scope,$route,$routeParams,$http,$location){
//Get all students
$scope.getStudents = function(){
$http.get('/api/student/').then(function(response){
$scope.students = response.data;
});
};
and my test:
describe("studentController", function () {
beforeEach(module('myApp'));
var $controller;
beforeEach(inject(function (_$controller_){
$controller = _$controller_;
}))
describe("studentController", function(){
it("should get student data", function (){
var $scope = {};
$scope.getStudents();
expect($scope.students.length).toBe(15)
})
})
});
I have included both these files in the jasmine html file along with the angular-mocks.js
any help would be much appreciated
You are injecting $route, but you are not loading the ngRoute module. Load the file angular-route.js and state the dependency:
var myApp = angular.module("myApp", ['ngRoute']);
You have to create controller in before each by using following and as you are calling getStudents that shuold be mocked by using HttpBackend service in unit test.
Controller
var myApp = angular.module("myApp", []);
myApp.controller('studentController', function($scope, $route, $routeParams, $http, $location) {
//Get all students
$scope.getStudents = function() {
$http.get('/api/student/').then(function(response) {
$scope.students = response.data;
});
};
});
Test file
describe("studentController", function() {
beforeEach(module('myApp'));
var $controller, scope, route;
beforeEach(inject(function(_$controller_, $rootScope, $route, $routeParams, $http, $location) {
$controller = _$controller_;
scope = $rootScope.$new();
$controller('studentController', {
'$scope': scope,
'$route': $route,
'$routeParams': $routeParams,
'$http': $http,
'$location': $location
});
}))
describe("studentController", function() {
it("should get student data", function() {
// for this you have to use httpBackend
// you have to mock the response of api
$scope.getStudents();
// then you are able to verify the result in student
expect($scope.students.length).toBe(15)
})
})
});
For more information you can refer unit testing and Httpbackend
I'm trying to set up unit tests for an existing Angular JS project, but I keep getting the error in the title:
Unknown provider: $$qProvider <- $$q <- $interval
Here is my unit test:
describe("screen controller", function(){
beforeEach(module('tsApp'));
var scope, createController, $interval, $timeout, $translate, $sce, $controller;
beforeEach(inject(function(_$controller_, $rootScope, _$interval_, _$timeout_, _$translate_, _$sce_ ){
// The injector unwraps the underscores (_) from around the parameter names when matching
$interval = _$interval_;
$timeout = _$timeout_;
$translate = _$translate_;
$sce = _$sce_;
$controller = _$controller_;
scope = $rootScope.$new();
createController = function() {
return $controller('screenCtrl', {
'$scope' : scope,
'$interval' : $interval,
'$timeout' : $timeout,
'$translate' : $translate,
'$sce' : $sce
});
};
}));
describe('first test', function() {
it('it runs without error!', function() {
var controller = createController();
expect(true).toEqual(true);
});
});
});
And the controller I'm trying to test starts like this:
var screenCtrl = tsApp.controller('screenCtrl', function($scope, updateService, $translate, $sce, $interval, $timeout) {
I'm guessing there is something wrong with the dependancies I'm injecting. Thanks in advance.
$$qProvider was introduced in AngularJS 1.3.0-beta.14. It is undocumented and used internally.
Prior to this version $IntervalProvider used $q and in beta.14 and later it uses both $q and $$q.
Somewhere you have conflicting versions of AngularJS modules.
Check all your files or for example your Bower components.
Make sure your core AngularJS version is high enough for other modules you might be using. Angular Material for example requires Angular 1.3.x.
I am working on a very simple factory to be used inside an angular controller. The problem is that the factory doesn't seem to be getting picked up inside the controller. The console.log returns undefined and I can't seem to figure out why.
var app = angular.module('App', ['ngRoute', 'ngTouch']);
app.controller('AppController', [
'$scope',
'$rootScope',
'myFactory',
function($scope, $routeParams, myFactory) {
console.log(myFactory)
}]);
app.factory('myFactory', function() {
return 'test';
});
The problem is that your controller is is injecting $rootScope and then you change it to $routeParams in the function. Have a look at this fiddle http://jsfiddle.net/wkqajL2x/6/ where I have removed those two attributes. It then works fine.
var app = angular.module('App', []);
app.controller('AppController', [
'$scope',
'myFactory',
function($scope, myFactory) {
console.log(myFactory)
}]);
app.factory('myFactory', function() {
return 'test';
});
so you just need to decide which one out of those you really want to use.
Here is the current (Working) way i have my angular app.
app.js
require('angular');
require('angular-ui-router');
var listStoresCtrl = require('./controllers/store/listStoresCtrl');
var createStoreCtrl = require('./controllers/store/createStoreCtrl.js');
var storeDetailsCtrl = require('./controllers/store/storeDetailsCtrl.js');
var listDepartmentsCtrl = require('./controllers/dept/listDepartmentsCtrl');
var createDepartmentCtrl = require('./controllers/dept/createDepartmentCtrl.js');
//-- init angular js
var ngApp = angular.module('ngApp', ['ui.router'], function($interpolateProvider){
//-- as the output conflicts with blade lets alter the defaults
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
}).config(['$stateProvider','$logProvider','$urlRouterProvider', function ($stateProvider, $logProvider,$urlRouterProvider) {
//-- enable logging
$logProvider.debugEnabled(true);
}]);
ngApp.controller('listStoresCtrl', ['$scope', 'Store', '$log', listStoresCtrl]);
ngApp.controller('createStoreCtrl', ['$scope', '$log', 'Store', '$rootScope', '$timeout','ManagerService', createStoreCtrl]);
ngApp.controller('storeDetailsCtrl', ['$scope', '$log', '$rootScope', 'Store', storeDetailsCtrl]);
ngApp.controller('listDepartmentsCtrl', ['$scope', 'Department', '$log', listDepartmentsCtrl]);
ngApp.controller('createDepartmentCtrl', ['$scope', '$log', 'Department', '$rootScope', '$timeout','ManagerService', createDepartmentCtrl]);
//-- stick it all together and kick it off
angular.bootstrap(document, ['ngApp']);
BUT i would like to restructure this so that my Store ctrls etc and Department ctrls are within their own module.
EG: storeCtrls.js
angular.module('storeCtrls', [])
.controller('listStoresCtrl', ['$scope', 'Store', '$log', listStoresCtrl])
.controller('createStoreCtrl', ['$scope', '$log', 'Store', '$rootScope', '$timeout','ManagerService', createStoreCtrl])
.controller('storeDetailsCtrl', ['$scope', '$log', '$rootScope', 'Store', storeDetailsCtrl]);
Then in the app.js file call them in like so.
require('./controllers/storeCtrls');
angular.module('ngApp', ['storeCtrls'], function($interpolateProvider){...}
But for some reason this does not work I am get getting an error of Uncaught object.
Bit of relevant history on this:
I am using Gulp and Browserify to do my JS.
My listStoresCtrl for example are using the
module.exports = function(scope, Store, log){...}
method to return them.
UPDATE
i seem to have sorted the Uncaught object, as i was missing the ['ui.router'] with the call to
angular.module('ngApp', ['storeCtrls']...
so it should be
angular.module('ngApp', ['ui.router', 'storeCtrls']..
Now to get the rest to link up...
Seems the main issue was i was not injecting some items that i simply removed and forgot to re-add.
I simply must of copied over this injection ['ui.router'] with the call to
angular.module('ngApp', ['storeCtrls']...
where i should have been adding as well below:
angular.module('ngApp', ['ui.router', 'storeCtrls']..
Now to get the rest to link up...