I used angular-translate and angular-local-storage with MEANjs, all is add to module dependencies,
in app config.js:
var service = {
applicationEnvironment: window.env,
applicationModuleName: applicationModuleName,
applicationModuleVendorDependencies: ['ngResource', 'ngAnimate', 'ngMessages', 'ui.router', 'ui.bootstrap', 'ngFileUpload', 'ui-notification',
'LocalStorageModule', 'pascalprecht.translate', 'angularMoment', 'ngFileSaver', 'ngSanitize', 'uiCropper', 'hc.marked'],
registerModule: registerModule
};
and in init.js:
angular
.module(app.applicationModuleName)
.config(localStorageModuleConfig)
.config(transConfig);
localStorageModuleConfig.$inject = ['localStorageServiceProvider'];
function localStorageModuleConfig(localStorageServiceProvider) {
console.log('localStorageModuleConfig');
localStorageServiceProvider
.setPrefix('meanTorrent')
.setStorageType('localStorage')
.setDefaultToCookie(true)
.setNotify(true, true);
}
transConfig.$inject = ['$translateProvider', 'localStorageService'];
function transConfig($translateProvider, localStorageService) {
$translateProvider.useSanitizeValueStrategy(null);
var user_lang = navigator.language || navigator.userLanguage;
user_lang = user_lang.substr(0, 2) || 'en';
var storage_lang = localStorageService.get('storage_user_lang');
user_lang = storage_lang || user_lang;
$translateProvider.preferredLanguage(user_lang);
}
I already include all .js files in html, when runing, I got error Unknown provider: localStorageService，I know in config part, must used provider, but if i used localStorageServiceProvider in transConfig, it can not to .get('storage_user_lang')
any way to used service in config? or how to use provider to call self service`s method?
You can't inject service to configuration block (only providers and constants),
I used window.localStorage to solve this issue localStorage.
Related
I was able to inject AuthDetails service to other components of my app, but I am having trouble injecting AuthDetails service to my main controller in the app, I have tried following but it does not work. It says: Uncaught ReferenceError: AuthDetails is not defined
MPlayApp.controller('MainCtrl','AuthDetails', [AuthDetails,
function MainCtrl(AuthDetails) {
var subscription = AuthDetails.subscribe(function onNext(d) {
console.log(d);
if(d.success){
this.loggedIn = true;
}
});
}]);
I have added the service to app as follows
var MPlayApp = angular.module('MPlayApp', [
// ...which depends on the MPlayApp module
'player',
'core',
'userMenu',
'home',
'songUpload',
'loginSignUp',
'details',
'angularSoundManager',
'angularFileUpload',
'ngAnimate',
'rx',
'ui.router',
'core.auth'
]);
AuthDetails service is under core.auth module
The syntax is wrong. It should be
MPlayApp.controller('MainCtrl', ['AuthDetails', function MainCtrl(AuthDetails) {
Or better, use ng-annotate, and let it generate this ugly, error-prone syntax for you during the build, from the basic, intuitive syntax:
MPlayApp.controller('MainCtrl', function MainCtrl(AuthDetails) {
How can i inject 'ngSanitize' and 'ngRoute' both to module?
Now it looks like:
var app = angular.module('board', ['ngSanitize']);
the second argument of the module function is an array of dependencies, so you can do it like:
var app = angular.module('board', ['ngSanitize', 'ngRoute']);
Stuck in a situation, my app is configured in a way, that I have an app controller, which is using ng-route to route between different views and partials, Now from the login controller, I am making a request to get some data, now I want that data to be accessed globally in the application. Now when I create a service, I am injecting it in the app controller module, but I am getting an error service is not defined,
My app.js:
var myApp = angular.module('app', ['loginMod', 'dashboardMod', 'newRequestMod', 'ngAnimate', 'ui.bootstrap', 'ngRoute', 'userDetailService']);
myApp .config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/',
{
templateUrl: 'resources/pages/login.html',
controller:'loginController'
})
...
Now in my logincontroller i am using the service :
userDetailShareService.sendData(loginModel);
console.log("Checking the service if it works " + userDetailShareService.getData);
userDetailShareService.js:
var app = angular.module('userDetailService',[]);
app.factory('userDetailShareService', function($timeout,$rootScope) {
var service = {};
var dataArray = [];
service.data = [];
service.sendData = function(data){
//dataArray.push(data);
dataArray=this.data;
};
service.getData = function(){
return dataArray;
};
return service;
});
No I am not sure what is throwing that error, the app.js is the first page that is hit, and the data mentioned in login controller is some response data, that I am getting in login controller and then I want to share across my entire application, every controller the data that I get, I do not want to use $rootScope as it will burden the same.
Could anybody please reply, I am in a great need. Thanks in advance.
I have a an angular app and in it I can see this coffee in the app.coffee file....
app = angular.module 'app', [
'ngRoute',
'ngResource',
'ui.router',
'app.filters',
'app.services',
'app.directives',
'app.controllers',
'app.templates',
]
angular.module('app.services', ['ngResource'])
angular.module('app.controllers',[])
angular.module('app.directives', [])
angular.module('app.filters', [])
angular.module('app.templates', [])
angular.module('app.models', [])
I don't really understand why I have to inject ngResource into the app.services module direct AND into the app module. Surely I can just wire up All dependencies into the app module and then it will allow global access to the rest of the modules?
When you write
app = angular.module 'app', [
'ngRoute',
'ngResource',
'ui.router',
'app.filters',
'app.services',
'app.directives',
'app.controllers',
'app.templates',
]
this means these are the dependencies of your app.
When you write
angular.module('app.services', ['ngResource'])
this means app.services has a dependency ngResource. About your question as to why you need to write it again. It is fairly simple, app.services uses ngResource. If you don't want the whole app to have ngResouce dependency, you can ignore it in the first line, but it has to be there for app.services
You can read more about it here
This is the first time I've tried using Angular with Wordpress. I want to inject $location into the config module so I can use it like this:
app = angular.module 'app', [ 'ngResource', 'ngRoute' ]
app.config [ '$routeProvider', '$location', ( $routeProvider, $location )->
$location.hasPrefix '!'
$location.html5Mode true
]
Unfortunately, using $location or $locationProvider with config is causing an Unknown Provider error. I've included all necessary dependencies ie. angular-route.min.js, however, it's still not resolving properly.
If I remove $location it works.
app = angular.module 'app', [ 'ngResource', 'ngRoute' ]
app.config [ '$routeProvider', ( $routeProvider )->
# ROUTES
]
EDIT
If I replace $location with $locationProvider I get Failed to instantiate module app due to: TypeError: Object # has no method 'hasPrefix'
Seems fine if you use the name $locationProvider as the name of the injectable.
Here is a plunker.
And the js:
angular.module('myApp', ['ngResource', 'ngRoute'])
.config(function($routeProvider, $locationProvider) { // provider-injector
$locationProvider.hasPrefix = '!';
$locationProvider.html5Mode = true;
});
For reference from Docs:
Configuration blocks - get executed during the provider registrations
and configuration phase. Only providers and constants can be injected
into configuration blocks. This is to prevent accidental instantiation
of services before they have been fully configured.
The error was a simple typo.
$location.hasPrefix('!');
should be
$location.hashPrefix('!');