I have main angular module which knows about server url and I set it like this:
angular.module('main', ["editor"]).constant("main.serverUrl", "http://serverurlhere.com")
I also have editor module on which main module depends. Editor module knows controller name (editor) on server it talks to, but doesn't know the serverUrl, so I want to use the serverUrl constant inside editor module to define editor.serverUrl constant something like this:
angular.module('editor').constant("editor.serverUrl", main.serverUrl + "/editor")
How can I do that?
UPDATE:
var m = angular.module("main", ["editor", "mainModuleProviders"]);
var mProviders = angular.module("mainModuleProviders", []);
mProviders.constant("serverUrl", "http://someserverurl.com");
var e = angular.module("editor", ["mainModuleProviders"]);
e.config(["serverUrl", "$provide", function(serverUrl, $provide){
$provide.value("editor.serverUrl", serverUrl + "/editor/")
}]);
You can try something like this
var e = angular.module("editor", [])
.constant("editor.url", "/editor");
var m = angular.module("main", ["editor"]);
m.constant("serverUrl", "http://someserverurl.com");
m.config(["editor.url","serverUrl", "$provide", function(eu,se,$provide){
$provide.constant("editor.serverUrl",se+eu);
}]);
var e = angular.module("editor", [])
.constant("editor.url", "/editor");
var m = angular.module("main", ["editor"]);
m.constant("serverUrl", "http://someserverurl.com");
m.config(["editor.url", "serverUrl", "$provide",
function(eu, se, $provide) {
$provide.constant("editor.serverUrl", se + eu);
}
]);
e.controller('ctrl', ["$scope", "serverUrl", "editor.url", "editor.serverUrl",
function($scope, su, eu, seu) {
$scope.serverUrl = su;
$scope.editorUrl = eu;
$scope.editorServerUrl = seu;
}
])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="main" ng-controller="ctrl">
<div>serverUrl = {{serverUrl}}</div>
<div>editorUrl = {{editorUrl}}</div>
<div>editorServerUrl = {{editorServerUrl}}</div>
</div>
UPDATE
In AngularJS used dependency injection, so when you add dependency in your module it must be loaded before this module run.
In your first variant: you try use main module that depend on editor module inside editor modue.
For solving you can use third module from your second variant mainModuleProviders, or configure all inside main module.
NOTE: inside angular does not have module, so no matter where declared this constant
Related
I need to know the difference between these two approaches developer uses in nodeJS development to include a module.
First approach (passing module in app by importing it once and using it by passing as parameter or binding it to app as property )
Server.js (app entry point)
let app = require('express').express();
let Router = require("./routes");
let SomeModule = require("./some-module");
.....
.....
Router.mountAPI("/api", app, SomeModule);
.....
....
routes.js (Passing pre imported module to controllers in different files )
let Ctrl1fun = require("./ctrl1");
let Ctrl2fun = require("./ctrl2");
exports.mountAPI = function(mount, app, SomeModuleToUseInController) {
app.use(mount + '/endpoint1', Ctrl1fun(SomeModuleToUseInController));
app.use(mount + '/endpoint2', Ctrl2fun(SomeModuleToUseInController));
};
ctrl1.js (Controller for end point 1 )
module.exports = function(SomeModule) {
....
....
//using SomeModule
}
// This file may contain some other controller function for simplicity i took only one
ctrl2.js (Controller for end point 2 )
module.exports = function(SomeModule) {
....
....
//using SomeModule
}
// This file may contain some other controller function for simplicity i took only one
2.Second approach (Each controller importing the module)
Server.js (app entry point)
let app = require('express').express();
let Router = require("./routes");
.....
.....
Router.mountAPI("/api", app);
.....
....
routes.js (module imported in controllers )
let Ctrl1fun = require("./ctrl1");
let Ctrl2fun = require("./ctrl2");
exports.mountAPI = function(mount, app) {
app.use(mount + '/endpoint1', Ctrl1fun());
app.use(mount + '/endpoint2', Ctrl2fun());
};
ctrl1.js (Controller for end point 1 )
let SomeModule = require("./some-module");
module.exports = function() {
....
....
//using SomeModule
}
// This file may contain some other controller function for simplicity i took only one
ctrl2.js (Controller for end point 2 )
let SomeModule = require("./some-module");
module.exports = function() {
....
....
//using SomeModule
}
// This file may contain some other controller function for simplicity i took only one
Witch one is better if we consider
App size (API and controllers function in different controller files)
Application performance
Best practices
The difference in terms of size and performance will be negligible.
The second approach is simpler and I would consider it as the best one unless you need to inject different modules into the same controller type, e.g. a generic CRUD controller parameterized by model type
My project structure is the following:
project
- js
- *.js
app.js
In my app.js, I define a config variable this way:
try {
var config = yaml.load(program.config);
} catch (e) {
console.error('unable to load configuration, Error:', e.message);
process.exit(1)
}
Which works.
I now would like to access to the content of the var in project/js/*.js, but I got config is undefined.
Why? Isn't config not supposed to be accessible everywhere?
** EDIT **
My code in *.js:
var fetchMail = function() {
console.log(config); // config undefined
// Other stuff
};
And how I export my code in app.js: export.config = config. And then require it in *.js: var app = require(../app);
I assume you need to change
export.config = config to exports.default = config.
If you are exporting something else than exports.config = config.
In other file you need either
import { config } from ..
or
var config = require(...).config;
You should put var config = null on top of try and you than can access the config variable. Initializing var inside try will create the variable inside that scope. Therefore, you can't be accessing config variable.
I am attempting to simply throw some JSON data onto a page from a GET call.
This is my HTML (Please be aware this is loaded into index.html which has the correct angular notation):
<h1>Downloads</h1>
<div class="container" ng-controller="DownloadCtrl as download">
<p>{{download.routes}}</p>
</div>
This is the download controller:
(function(){
'use strict';
angular.module('dashboardApp').controller('DownloadCtrl', DownloadCtrl);
DownloadCtrl.$inject= ['DownloadService'];
function DownloadCtrl(DownloadService){
var self = this;
self.routes = function(){
DownloadService.getRoutes()
.then(function(responseData) {
self.routes = responseData;
});
};
};
})();
This is the download service:
(function(){
'use strict';
angular.module('dashboardApp')
.factory('DownloadService', DownloadService);
DownloadService.$inject = ['$http', '$sessionStorage'];
var baseURL = 'http://localhost:8080/Dashboard/rest/download/';
function DownloadService ($http, $sessionStorage){
var service = {};
service.getRoutes = getRoutes;
return service;
function getRoutes(){
return $http.get(baseURL+"route",$sessionStorage.sessionData.sessionID);
}
}
})();
I have debugged the application and it does hit self.routes however it just skips over it and no data is displayed.
I also am not receiving any errors in the console. It just skips over the function.
This is my first AngularJS application.
Your code is bad organized,
the error resides in the view, because it is not calling the method self.routes, it is just printing out...
your view must do something like that:
<p>{{download.routes()}}</p>
But, this is a bad way to code...
Please, consider doing something like that:
DownloadService
.getRoutes()
.then(function(responseData){
self.routes = responseData;
})
;
// instead of
self.routes = function(){
DownloadService.getRoutes()
.then(function(responseData){
self.routes = responseData;
});
};
I am trying to create a user profile page. Where User can display and edit their information.
This is my Controller.js
var userProfileControllers = angular.module("userProfileControllers", []);
userProfileControllers.controller ('userProfileCtrl', ['$scope', '$location', 'localCache', 'customersignup', function ($scope, $location, localCache, customersignup){
var submitProfile = function() {
//Bind Scope
//
var bindScope = function () {
$scope.userProfile = customersignup.userProfile;
};
var asyncBindScope = function() {
$scope.$evalAsync(bindScope());
};
bindScope ();
}}]);
This is my service.js
var userProfileServices = angular.module("userProfileServices", []);
userProfileServices.factory("customersignup", function() {
return {
userProfile: {fname: "kunal"},
updateProfile: function() {
var userProfile = this.userProfile;
},
}
});
In the HTML, let's say in case of first name I have included ng-model="userProfile.fname" in the input of First Name field. Now, when I am loading the html page, I am getting this error :-
https://docs.angularjs.org/error/$injector/unpr?p0=localCacheProvider%20%3C-%20localCache%20%3C-%20userProfileCtrl
Please check the above link, it is from AngularJS official site.
check you have two modules one is for service and other one is for controller, and note that there is no glue between these two modules, to work this you need to glue these two modules, to do that, import the service module in to controller module as below.
var userProfileControllers = angular.module("userProfileControllers", ['userProfileServices']);
then module userProfileControllers have access to module userProfileServices which service is defined. Other vice you don't have access to service module userProfileServices.
You have to add factory name in controller userProfileServices
I'm trying to use $cachefactory in my angular project.
I've created a cache service:
services.js
var AppServices = angular.module('Test.services', [])
.factory('testCache', function($cachefactory){
return $cachefactory('test');
});
and I'm trying to inject it in my controller like this:
TestController.js
var TestController =function($scope, $http, testCache) {
var cache = testCache.get('test');
if(cache) {
$scope.test = cache;
}
else {
var value = "Test Value";
$scope.test = value;
cache.put('test', value);
}
};
However when I run the application and try to retrieve data I get:
Error: [$injector:unpr] http://errors.angularjs.org/1.2.17/$injector/unpr?p0=%24cachefactoryProvider%20%3C-%20%24cachefactory%20%3C-%20testCache
u/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:6:443
ec/l.$injector<#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:36:139
c#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:34:195
ec/p.$injector<#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:36:209
c#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:34:195
d#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:34:409
ec/p.$injector<#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:36:222
c#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:34:195
d#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:34:409
f/<.instantiate#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:35:101
Od/this.$get</<#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:66:463
$ViewDirectiveFill/<.compile/<#https://rawgit.com/angular-ui/ui-router/0.2.10/release/angular-ui-router.js:2797:1
N#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:54:85
g#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:47:55
v/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:46:253
updateView#https://rawgit.com/angular-ui/ui-router/0.2.10/release/angular-ui-router.js:2733:1
$ViewDirective/directive.compile/</<#https://rawgit.com/angular-ui/ui-router/0.2.10/release/angular-ui-router.js:2697:11
Yd/this.$get</h.prototype.$broadcast#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:113:355
transitionTo/$state.transition<#https://rawgit.com/angular-ui/ui-router/0.2.10/release/angular-ui-router.js:2114:11
ze/e/l.promise.then/D#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:99:243
ze/f/<.then/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:100:407
Yd/this.$get</h.prototype.$eval#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:111:110
Yd/this.$get</h.prototype.$digest#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:108:180
Yd/this.$get</h.prototype.$apply#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:111:449
e/h<#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:122:1
e#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:37:438
se/h.defer/c<#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:41:120
<div class="ng-scope" ui-view="">
I've read the error page which claims that I've missed defining a dependency. I'm not sure where I missed it though since app.js injects services module so $cachefactory should be visible, right?
Link to example on plunker
There is a typo. Use $cacheFactory instead of $cachefactory