I am using following link for using requirejs with angularjs
https://github.com/StarterSquad/startersquad.github.com/tree/master/examples/angularjs-requirejs-2
how can i use service function which is defined in js\services\version.js
i have following code in services.
services.factory('Phone', ['$resource',
function($resource){
console.log("factory");
}]);
i want to call this factory function in controller. how to do that?
Just add the factory in your controller.
app.controller('myController', function($scope, Phone){
});
First you have to register your service in " angular.module(); "
app.controller('myController',['Phone','$scope',function(Phone,$scope){
//your code here
}]);
Related
got error of scope not defined when i use for response message:
$scope.responsemessage = response;
then I added $scope here like this:
app.service('fileUpload', ['$http', '$scope', function ($http, $scope) {
When I added above $scope got this error Error: [$injector:unpr]
http://errors.angularjs.org/1.4.8/$injector/unpr?p0=.................
Service don't have scope.
If you wanna to use scope inside service , have to pass it from controller .
Like this
In controller
fileUpload.checkFile($scope.responsemessage);
In service
function checkFile(respMsg)
{
console.log(respMsg);
}
$scopes are not available from services, it should only be used inside controllers.
In angular $scope is available in controllers and services are used as a dependency for data provider.
You just can't use $scope in the service and from service you can return a promise object like:
app.service('fileUpload', ['$http', function($http) {
return $http.post('url')
}]);
Now you can inject this service to update a variable on the controller's $scope:
app.controller('cntrl', ['$scope', 'fileUpload', function($scope, fileUpload){
$scope.responsemessage = fileUpload.then(function(data){
return data;
})
}]);
You can not use $scope in Services as well as in Factories.
You can call service by giving $scope value as a parameter and save the return value to the $scope variable
Here is my controllers.js file
(function(ctx,angular){
'use strict';
angular.module('app.controllers')
.controller('SearchMasterController',['$scope',function($scope){
//My Code
}]);
})(window, angular);
And this is my directives.js file
(function(ctx,angular){
function ControllerFunction(){
//My Controller Code
}
var directiveConfig = {
restrict:'E',
templateUrl:'path/to/acco.html',
controller: ControllerFunction
}
angular.module('app.directives')
.directive('acco', function(){
return directiveConfig;
});
})(window, angular);
Now my question is, can I use this acco directive with some different controller. Ideally, is there any way to get it working like
<acco ng-controller="SearchMasterController"></acco> ?
I tried doing,
<acco>
<div ng-controller="SearchMasterController"></div>
</acco>
and it seems to work.
Is it possible to use
<acco ng-controller="SearchMasterController"></acco> ?
The latter alternative looks ugly to me.
nice to heard this type of access, i have tried
<acco>hi{{name1}}
<div ng-controller="SearchMasterController">{{name1}}</div>
</acco>
<acco ng-controller="SearchMasterController">{{name1}}</acco>
<script>
angular.module('myApp', [])
.controller('SearchMasterController', ['$scope', function ($scope) {
//My Code
console.log("search");
$scope.name1 = 'james';
}])
.directive('acco', function () {
return{
restrict: 'E',
templateUrl: 'acco.html',
controller: function($scope) {
//My Controller Code
console.log("cntrlr fn");
$scope.name1 = 'semaj';
}
};
});
</script>
#that time i getting output as
cntrlr fn
search
cntrlr fn
means if we are using like
<acco>hi{{name1}}
<div ng-controller="SearchMasterController">{{name1}}</div>
</acco>
then we can access both controllers but when we are using like
<acco ng-controller="SearchMasterController">{{name1}}</acco>
we can't access SearchMasterController and it's not loaded also..
Yes you can use some different controller for your directive, but there is some best practice
Use controller when you want to expose an API to other directives. Otherwise use link.
The way you tried to use controller doesn't make much sense
<!--here acco and ng-controller both are directives,
in your directive's 'ControllerFunction' and ng-controller's 'SearchMasterController'
has the same controll (scope) for 'acco' rendered html.
In that case your directive's controller overrite ng-controller functionality.
So leave 'ng-controller',
if you need any functionality in your directive
then pass those functionality using =,&,#-->
<acco ng-controller="SearchMasterController"></acco>
I have this module as my main app which uses api:
var app = angular.module('app.main', ['api']);
app.controller('Home', function($scope, api, search){
$scope.search = function(){
api.search.lookup($scope.domain);
search.lookup($scope.domain);
};
});
I then have api which uses a few other modules like this:
var app = angular.module('api', [
'api.search'
// other modules here
]);
app.service('api', function($cookies, $http, $rootScope, search){
// Some more code
});
The search search module looks like this:
var app = angular.module('api.search', []);
app.service('search', function($scope, $http){
this.lookup = function(domain){
// query
};
});
When I run my controller and inject api, I can not access search because I get TypeError: Cannot read property 'lookup' of undefined, and if I inject search instead, I get this error:
Error: [$injector:unpr] http://errors.angularjs.org/1.4.3/$injector/unpr?p0=<div ng-view="" class="ng-scope" data-ng-animate="1">copeProvider%20%3C-%20%24scope%20%3C-%search
So, how can I access search from my controller?
The problem, as it seems, is that you are trying to inject $scope into a service generating function.
$scope is a local injectable available only for controllers, which makes sense, since scope is contextual to where the controller is defined and it has no meaning for singleton services.
Instead, you could inject $rootScope into a service, if needed.
app.service('search', function($rootScope, $http){
// ...
});
I have this controller attached to a div:
.controller('ShowInverterConnectController', ['$scope', '$location', function($scope, $location) {
....
}])
I would like to use the $location argument of it.
I am currently doing this:
angular.element('.ng-scope').scope().$apply(function() {
console.log('test:', angular.element('.ng-scope').scope().$location);
});
But $location is coming out undefined, is there anyway to use $location?
Thanks
Not sure what you are trying to do with Angular service outside of the app, but I assume you have a good reason, because in many cases this will be considered bad practice. Anyway.
$location is not a property of the scope, so you can't get it like you are trying. However you can use $injector service to retrieve other services like $location:
angular.element('.ng-scope').scope().$apply(function() {
console.log('test:', angular.element('.ng-scope').injector().get('$location'));
});
Is possible to inject a controller into another controller that is part of the same module?
example:
var app = angular.module('myAppModule', [])
.controller('controllerOne', ['$scope', function($scope){
$scope.helloWorld = function(){
return 'Hello World';
}
}])
.controller('controllerTwo', ['$scope', 'controllerOne', function($scope, controllerOne){
console.log(controllerOne.helloWorld());
}])
I keep getting unknown provider on controllerOne. I don't see how that's possible since they coexist in the same module. Any help would be much appreciated.
You need to use $controller dependency by using that you can inject one controller to another
.controller('controllerTwo', ['$scope', '$controller', function($scope, $controller){
$controller('controllerOne', {$scope: $scope})
//inside scope you the controllerOne scope will available
}]);
But do prefer service/factory to share data
Move your logic into a "service" (either a factory/service/provider). I personally prefer factories, I just like controlling my own object instead of using this or anything like that with the other options.
Using a service, you give yourself the ability to abstract business logic from your controllers, and make that logic -- reusable -- !
var app = angular.module('myAppModule', [])
// typically people use the word Service at the end of the name
// even if it's a factory (it's all the same thing really...
.factory('sharedService', function () {
var methods = {};
methods.helloWorld = function () {
return 'Hello World!';
};
// whatever methods/properties you have within this methods object
// will be available to be called anywhere sharedService is injected.
return methods;
})
Notice sharedService is injected
.controller('ControllerOne', ['$scope', 'sharedService', function($scope, sharedService) {
$scope.helloWorld = sharedService.helloWorld();
}])
// Notice sharedService is injected here as well
.controller('ControllerTwo', ['$scope', 'sharedService', function($scope, sharedService){
// Now we can access it here too!
console.log( sharedService.helloWorld() );
}]);
Side note : Controllers should be capitalized to show their significance!
The power of services :)
If the a controllerTwo needs to call the same function as controllerOne, you may want to create a service to handle it. Angular Services - they are accessible throughout your program through dependency injection.
var app = angular.module('myAppModule', [])
.controller('controllerOne', ['$scope', 'Hello', function($scope, Hello){
console.log(Hello.helloWorld() + ' controller one');
}])
.controller('controllerTwo', ['$scope', 'Hello', function($scope, Hello){
console.log(Hello.helloWorld() + ' controller two');
}])
.factory('Hello', [function() {
var data = {
'helloWorld': function() {
return 'Hello World';
}
}
return data;
}]);
Hope this helps!
You cannot inject controllers in another controllers,only serviceProviers are injectable.That's the reason you are getting error as unkown provider in controller one.
Use Services instead and inject them in controllers,if there is some come functionality to be shared among controllers.Services are the best way to share data in between controllers.
You can declare a variable or function or say object on $rootScope, it's exists in your whole application.
Share data between AngularJS controllers