I am still relatively new to Ionic and AngularJS and I have the following problem: I created a service in the controller.js file and now need this service at loadup (app.js) to detect which start page I will route to. How can I export the service from controller.js into some other js file so that it will become available in both files app.js and controller.js.
Thanks,
EL
You import it using angular's dependency injection.
If your controller.js looks something like:
angular.module('myModule', [])
.service('myService', ['$scope', 'otherDependency', function($scope, otherDependency){
//some service code
}]);
Then the module you want to use the service in would need to import the module where the service is located and then inject the service itself. So something along the lines of:
angular.module('app', ['myModule'])
.controller('appCtrl', ['$scope', 'myService', function($scope, myService){
//some code using your service
}]);
This documentation might help:
AngularJS services - https://docs.angularjs.org/guide/services
AngularJS dependency injection - https://docs.angularjs.org/guide/di
Related
I am trying to create an Angular controller that has ngSanitize like in the example here https://docs.angularjs.org/api/ngSanitize/service/$sanitize
But I am not sure how to do this in CoffeeScript.
In the example in the docs, here's how a controller is being created with ngSanitize.
angular.module('sanitizeExample', ['ngSanitize'])
.controller('ExampleController', ['$scope', '$sce', function($scope, $sce)
Here is my current controller written in CoffeeScript:
app = angular.module 'example'
app.controller 'exampleController', ($scope, widgetSrv)
How would I add ngSanitize to this?
Change the second line of your controller to:
app = angular.module 'example', ['ngSanitize']
I am trying to include ngCookies in a project. The angular cookies library is included in my index.html after the ionic.bundle.
I can see on the network tab of the developer tools that it is actually loading. Angular doesn't show any error when loading the page, as it usually does when a module is missing. The problem is that, when in my code I try to access the functions of the $cookies service, the $cookies variable is actually pointing to an empty object.
Here are some relevant code snippets:
On the definition of my app.js
angular.module('myApp', [
'ionic',
'ngCookies',
'ngMessages',
'rt.eventemitter',
'myApp.views']);
On my factory:
angular.module('myApp.views')
.factory('UserStore', ['$rootScope', '$q', '$cookies', '$timeout',
function($rootScope, $q, $cookies, $timeout){
var user = {};
function setSessionId(sessionId){
console.log(">> setting sessionId to:",sessionId);
user.sessionId = sessionId;
$cookies.put('sessionId', user.sessionId);
}
return{ setSessionId:setSessionId}
}
]);
In this case, when I try to call the setSessionId method I get an error that $cookies.put is not a function since, as I mentioned above, $cookies is just an empty object.
Any Ideas?
it depends on which angular version you use!
they changed a lot in angular 1.4.. in angular 1.3 when you set a cookie you can just assign it:
$cookies.sessionId = user.sessionId;
I used dependency injections in my controllers as follows.
.controller('deals_list', function ($scope, global, config, services, dealService, pagination) {
Now the app was growed. Dependencies are growing too. I want limit these injections. So is there a way to limit those with global injections or something?
What kind of procedure actually should I follow?
var myApp= angular.module('myApp', []);
myApp.run(function ($rootScope, $location, $http, $timeout, YourService) {
$rootScope.MyService = YourService;
}
Used it into controller :
myApp.controller('YouCtrl', ['$scope', function ($scope) {
// scope inherits from root scope
$scope.MyService.doSomething();
}]);
What i believe you can do is to create a service that contains all the services that you want to use. The global service is like a facade into your real service.
The option then are to create on global service with all dependencies included. Or multiple facade service which group these services
app.service("Configurations",function(global,config) {
this.global=global;
this.standard=config;
});
app.service("AppServices",function(services, dealService, pagination) {
this.services=services;
// other assigments
});
Now you can inject Configurations and AppServices
This at least gives some visibility into what your controllers are dependent upon.
I have this global set up for my angular App module:
var App = angular.module('App', [], function ($interpolateProvider) {
//$interpolateProvider.startSymbol('<%');
//$interpolateProvider.endSymbol('%>');
});
I include it in all pages with angular stuff.
I then have a controller loaded on a page that requires a service called 'angularFileUpload':
App.controller('FileUploadController', ['$scope', 'FileUploader', function ($scope, FileUploader) {
If i place that service inside the module array, it works fine. Is there a way of just attaching it to this controller instead... this means i do not have to load the script files for every page using this module regardless of if the controllers require the angularfileUpload service or not.
Edit: regarding the last comment
If i declare:
var App = angular.module('App');
How do i then add that service to the module?
I'm learning Angular and I'm trying to include Restangular this way:
var app = angular.module('myapp',['restangular']);
app.controller('UsersController', ['$scope', function ($scope, Restangular) {
...
Then I'm using Restangular like this:
var data = Restangular.all('someurl');
Here I get an error: Restangular is undefined. According to the documentation, this should have been simple:
// Add Restangular as a dependency to your app
angular.module('your-app', ['restangular']);
// Inject Restangular into your controller
angular.module('your-app').controller('MainCtrl', function($scope, Restangular) {
// ...
});
However I am unable to get it to work. What gives?
You're using the bracket notation for your controller, but you forgot to add Restangular to the list of dependencies:
['$scope', 'Restangular', function ($scope, Restangular) {...}]
This article has more information on Angular and minification. Search for "A note on minification”.
That looks correct, just make sure you've added the import of Restangular to your html file
<script type="text/javascript" src="http://cdn.jsdelivr.net/restangular/1.1.3/restangular.js"></script>
They also mention it requires lodash or underscore.js so maybe make sure you're loading those as well