I'm newbie in Angular, so will be glad if you can help me.
I split my logic on 2 files (controllers and services).
My services code:
(function () {
'use strict';
angular
.module('app', [])
.factory('authservice', authservice);
authservice.$inject = ['$http', '$logger'];
function authservice($http, $logger) {
return {
signInOwner: signInOwner,
signUpOwner: signUpOwner
};
function signInOwner(owner) {
}
function signUpOwner(owner) {
}
};
})();
My controller code:
(function () {
'use strict';
angular
.module('app', [])
.controller('SignUpController', SignUpController);
SignUpController.$inject = ['authservice'];
function SignUpController (authservice) {
var vm = this;
}
})();
I include my services.js before controller.js but still got error about wrong authservice dependencies
angular.js:14362 Error: [$injector:unpr]
Could you help me, please?
Using this synthax angular.module('app', []), you are overwriting the module creation.
You should use angular.module('app') to retrieve it instead.
[] should be use only once: at the creation of the module.
From the Angular module doc:
Beware that using angular.module('myModule', []) will create the
module myModule and overwrite any existing module named myModule. Use
angular.module('myModule') to retrieve an existing module.
In your controller code replace:
angular
.module('app', [])
.controller('SignUpController', SignUpController);
for
angular
.module('app') // notice the lack of [] here!!
.controller('SignUpController', SignUpController);
This is because with the [] it means you're creating the module and without it it means you're locating the module. Since the module was created when your where creating your service, you don't need to create it again, just locate it.
Related
I have encountered a really weird error. I'm working on a project where we're using John Papa's AngularJS styleguide.
I have the following component-file, my-profile.component.js, attached to app.mymodule
my-profile.component.js
(function() {
'use strict';
angular
.module('app.mymodule')
.component('myProfile', { })
.controller('MyProfileController', myProfileController);
/*#ngInject*/
function myProfileController($scope) {
...
}
})();
The component is rendered using in my view file.
app.mymodule is defined in mymodule.module.js
mymodule.module.js
(function () {
'use strict';
angular
.module('app.mymodule', []);
})();
And app is defined in app.modules.js, where app.mymodule is set as an app dependency
app.modules.js
(function() {
'use strict';
angular
.module('app', [
...
'app.mymodule'
]);
})();
my-profile.component.js compiles to the following code
my-profile.component.js (compiled)
(function() {
'use strict';
angular
.module('app.mymodule')
.component('myProfile', { })
.controller('MyProfileController', myProfileController);
myProfileController.$inject = ['$scope'];
function myProfileController($scope) {
...
}
})();
But for some reason, angular fails to inject the $scope-service, or any other service I attempt to inject. It produces the following error:
Error: [$injector:unpr] Unknown provider: 1FilterProvider <- 1Filter
http://errors.angularjs.org/1.3.16/$injector/unpr?p0=1FilterProvider%20%3C-%201Filter
at REGEX_STRING_REGEXP (/layout/js/vendor/angularjs-1.3.16/angular.js?bundleVirtualPath=%7eNaNbundles%fjs%fvendor:63:12)
at /layout/js/vendor/angularjs-1.3.16/angular.js?bundleVirtualPath=%7e%fbundles%fjs%fvendor:4031:19
at Object.getService [as get] (/layout/js/vendor/angularjs-1.3.16/angular.js?bundleVirtualPath=%7e%fbundles%fjs%fvendor:4178:39)
at /layout/js/vendor/angularjs-1.3.16/angular.js?bundleVirtualPath=%7e%fbundles%fjs%fvendor:4036:45
at Object.getService [as get] (/layout/js/vendor/angularjs-1.3.16/angular.js?bundleVirtualPath=%7e%fbundles%fjs%fvendor:4178:39)
at $get [as $filter] (/layout/js/vendor/angularjs-1.3.16/angular.js?bundleVirtualPath=%7e%fbundles%fjs%fvendor:16705:24)
at Parser.filter (/layout/js/vendor/angularjs-1.3.16/angular.js?bundleVirtualPath=%7e%fbundles%fjs%fvendor:12234:19)
at Parser.filterChain (/layout/js/vendor/angularjs-1.3.16/angular.js?bundleVirtualPath=%7e%fbundles%fjs%fvendor:12228:19)
at Parser.primary (/layout/js/vendor/angularjs-1.3.16/angular.js?bundleVirtualPath=%7e%fbundles%fjs%fvendor:12079:22)
at Parser.unary (/layout/js/vendor/angularjs-1.3.16/angular.js?bundleVirtualPath=%7e%fbundles%fjs%fvendor:12374:19)
I have another component in the same folder, attached to the same module, where I can easily inject any service. It looks as follows:
(function () {
'use strict';
angular
.module('app.mymodule')
.component('loginView', { })
.controller('LoginViewController', loginViewController);
/*#ngInject*/
function loginViewController($scope, $location) {
...
}
})();
I really can't figure out what I'm doing wrong. I've spellchecked, doublechecked, started over on the component, attempted to $inject $scope on the controller manually, but to no avail.
Does anyone have a clue what's going on here? :)
EDIT
As rolandjitsu pointed out, it was a problem in my view-file. I had used ng-pattern wrongfully, but was mislead by my own inability to interpret angular console-errors and a 'mildly' misleading error description in the angular docs.
Yes, it seems like you are missing a service provider called 1Filter. Maybe a missing module or some files missing?
Note: It has nothing to do with the $scope, it should not fail because of that.
I want to create seperate module for pagination, because I will need it to reuse in different modules, but I don't know how to call a function from module dependency (another module)
Here is my main module:
var App = angular.module('search', ['pagination']);
App.controller('MainController', ['$scope', '$pagination' function($scope, $pagination) {
$scope.testFunction(); //function from pagination module controller
}])
Here is my pagination module:
var App = angular.module('pagination', []);
App.controller('PaginationController', ['$scope', function($scope) {
$scope.testFunction = function(){
console.log("pagination module");
}
}])
I get error:
Error: [$injector:unpr] Unknown provider: $paginationProvider <- $pagination
To share resources across two modules, declare a factory or a service.
Suppose you have a search module:
//you inject your pagination module here
var searchModule = angular.module('search', ['pagination']);
//and you ALSO need to inject your pagination's service into your controller
searchModule.controller('MainController', ['$scope', 'paginationSvc' function($scope, paginationSvc) {
//function from pagination module controller
paginationSvc.testFunction();
}])
And your pagination module:
var pagination = angular.module('pagination', []);
//declare your pagination service here
pagination.factory('PaginationSvc', [function(){
return {
testFunction:testFunction
};
function testFunction(){
console.log('This is from pagination module');
}
}])
Maybe a little plnkr will help :D
You can't inject a controller in a controller. Your pagination module need to declare a service or factory or provider wich will be be injected in your controller.
See docs here.
You should create a pagination directive and insert that where you need it. You might get some good ideas from this post.
I have ng-grid as a dependency when defining the app:
var app = angular.module('myApp', ['ngGrid']);
But not all my views and controllers need ngGrid, so I was thinking if it could be possible to load and inject ngGrid into the app while defining the controllers which need it?
I tried somthing like this, but it didn't work:
app.js:
var app = angular.module('app',[]);
ProductListCtrl.js:
define(['app', 'ng-grid'], function (app) {
'use strict';
app.register.controller('ProductListCtrl', ['$scope', 'ngGrid', function ($scope) {
name = $injector.get('ngGrid')
$scope.name = name
}]);
});
Any suggestions?
angularAMD provides an ngload RequireJS plugin allowing you to load existing AngularJS modules. Add ngload to your main.js then do:
define(['app', 'ngload!ng-grid'], function (app) { ... }
See documentation for more detail.
To begin with
angular.module('app', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute'
])
Here is my casual factory. Nothing really to see
angular.module('app')
.factory('myFactory', function () {
// Service logic
// ...
// Public API here
return {
isSaved: true
};
});
Here is a controller I use the service in. There is one more like this. They both follow the same pattern
angular.module('app')
.controller('AdvertisersCtrl', [ '$scope', '$location', 'myFactory', function ($scope, $location, myFactory) {
$scope.$emit('controllerChange', 2);
$scope.isFormSave = function () {
// Form Validation
myFactory.isSaved = true;
$location.path('/saved');
};
}]);
And last, but certainly not least. The error I am getting.
Error: [$injector:unpr] Unknown provider: myFactoryProvider <- myFactory
http://docs.angularjs.org/error/$injector/unpr?p0=myFactoryProvider
Also, this project was scaffolded with yoeman, and it uses ngmin.. and all the other packaged grunt tasks yoeman provides.
Thanks folks.
Do you create the module app ?
In the code snippets above both invocations of module() are supposed to retrieve instance of already existing module.
But you have to create it first.
angular.module('app', []) vs. angular.module('app')
more info: http://docs.angularjs.org/guide/module#creation-versus-retrieval
I'm using the angular-seed template to structure my application. Initially I put all my JavaScript code into a single file, main.js. This file contained my module declaration, controllers, directives, filters, and services. The application works fine like this, but I'm worried about scalability and maintainability as my application becomes more complex. I noticed that the angular-seed template has separate files for each of these, so I've attempted to distribute my code from the single main.js file into each of the other files mentioned in the title to this question and found in the app/js directory of the angular-seed template.
My question is: how do I manage the dependencies to get the application to work? The existing documentation found here isn't very clear in this regard since each of the examples given shows a single JavaScript source file.
An example of what I have is:
app.js
angular.module('myApp',
['myApp.filters',
'myApp.services',
'myApp.controllers']);
controllers.js
angular.module('myApp.controllers', []).
controller('AppCtrl', [function ($scope, $http, $filter, MyService) {
$scope.myService = MyService; // found in services.js
// other functions...
}
]);
filters.js
angular.module('myApp.filters', []).
filter('myFilter', [function (MyService) {
return function(value) {
if (MyService.data) { // test to ensure service is loaded
for (var i = 0; i < MyService.data.length; i++) {
// code to return appropriate value from MyService
}
}
}
}]
);
services.js
angular.module('myApp.services', []).
factory('MyService', function($http) {
var MyService = {};
$http.get('resources/data.json').success(function(response) {
MyService.data = response;
});
return MyService;
}
);
main.js
/* This is the single file I want to separate into the others */
var myApp = angular.module('myApp'), []);
myApp.factory('MyService', function($http) {
// same code as in services.js
}
myApp.filter('myFilter', function(MyService) {
// same code as in filters.js
}
function AppCtrl ($scope, $http, $filter, MyService) {
// same code as in app.js
}
How do I manage the dependencies?
The problem is caused from you "redeclaring" your application module in all your separate files.
This is what the app module declaration (not sure declaration is the right term) looks like:
angular.module('myApp', []).controller( //...
This is what assignment (not sure if assignment is the right term either) to your application module looks like:
angular.module('myApp').controller( //...
Notice the lack of square brackets.
So, the former version, one with the square brackets, should only be used once, usually in your app.js or main.js. All other associated files — controllers, directives, filters … — should use the latter version, the one without the square brackets.
I hope that makes sense. Cheers!
If you're wanting to put your different parts of your application (filters, services, controllers) in different physical files, there are two things you have to do:
Declare those namespaces (for lack of a better term) in your app.js or in each file;
Refer to those namespaces in each of the files.
So, your app.js would look like this:
angular.module('myApp', ['external-dependency-1', 'myApp.services', 'myApp.controllers'])
.run(function() {
//...
})
.config(function() {
//...
});
And in each individual file:
services.js
angular.module('myApp.services', []); //instantiates
angular.module('myApp.services') //gets
.factory('MyService', function() {
return {};
});
controllers.js
angular.module('myApp.controllers', []); //instantiates
angular.module('myApp.controllers') //gets
.controller('MyCtrl', function($scope) {
//snip...
})
.controller('AccountCtrl', function($scope) {
//snip...
});
All of this can be combined into one call:
controllers.js
angular.module('myApp.controllers', [])
.controller('MyCtrl', function($scope) {
//snip...
});
The important part is that you shouldn't redefine angular.module('myApp'); that would cause it to be overwritten when you instantiate your controllers, probably not what you want.
You get the error because you didn't define myApp.services yet. What I did so far is putting all the initial definitions in one file and then use them in another. Like for your example I would put in:
app.js
angular.module('myApp.services', []);
angular.module('myApp',
['myApp.services',
...]);
That should get rid of the error, though I think you should have a read on the article Eduard Gamonal mentioned in one of the comments.