I am using Angular constant as an configuration file for my services, my problem is that this file can become huge and i am would like to separate the configuration into multiple files. But i don´t want to create a new Angular constant that i need to inject in the services that uses constants.
Is there a way to have only one main constant file that requires all the other files so that there is only one inject into the services? Or is it possibly to create one constant from all js files in a specific folder?
Other solutions to this problem would also be very helpful.
You can use $provide.decorator for that:
$provide.decorator('yourSettings', ['$delegate', function ($delegate) {
$delegate.newProp = 'new value';
return delegate;
}]);
See docs.
Related
I'm building an express application which up until now has used a singular controller file named users. This contains various user related functions such as signUp/signIn/getPersonalInfo, which are exported using module.exports, and required in the router.
The problem is this file is now getting rather large and I would ideally like a folder structure such as the following:
controllers/users/registration.js
controllers/users/personalInfo.js
How can I do this such that I can still just require a single file in my router:
var users = require('../controllers/users/?');
and still have access to all the functions within each controller.
Also if there is a more efficient way of doing so please let me know.
Not sure if this is what you are looking for but in my project make use of multiple functions with only one reference to my 'bootcamps' controller.
const {
getBootcamps,
getBootcamp,
createBootcamp,
updateBootcamp,
deleteBootcamp,
getBootcampsInRadius,
bootcampPhotoUpload
} = require('../controllers/bootcamps');
Feel free to take a look at my project for inspiration:
https://github.com/KristoferMar/NodeJs-Guide/blob/master/routes/bootcamps.js
We currently have a setup for our angularjs apps, where there's a file called "app.js" which holds
var app = angular.module('VolumeOutputOptions', [
'someDirectiveModule',
'someServiceModule'
]);
Apart from code shared between apps like someDirectiveModule, almost every class depends on this global variable. This has occasionally led to issues where a new dependency is added, but it turns out that "app" is used in contexts where that dependency hasn't been included. Also, global variables, bleugh.
Is there a better way to share a single module between all the directives and controllers of your app? For example, would
angular.module('VolumeOutputOptions').directive(...);
angular.module('VolumeOutputOptions').controller(...);
be two separate modules with the same name, or would angular detect and merge them?
If you use like
angular.module('VolumeOutputOptions').directive(...);
angular.module('VolumeOutputOptions').controller(...);
to use like this there must be a something like angular.module('VolumeOutputOptions', []) to create the module before it use.
then both of them are assign to same module VolumeOutputOptions.
if you define a module like angular.module('moduleName', []) with the second array parameter for dependency then only angular create a new module. If there is no array parameter passed then angular will refer to the previous module which declared with same name.
I've just started using AngularJs.
I need to use the SunCalc module to calculate sun positions for my app.
I have no idea on how to integrate the file to the app and how to access his different functions while respecting the AngularJs structure. Where to put the file? How to call a function? etc...
Here is a link so you can quickly see the structure of the SunCalc module and hopefully help me.
https://github.com/mourner/suncalc/blob/master/suncalc.js
Thanks a lot for your help!
Since this library exposes global SunCalc object with bunch of methods, what you can do is simply wrap this lib into custom service.
app.factory('SunCalc', function() {
return window.SunCalc;
});
Then you could use it like this in controller:
app.controller('MainCtrl', function($scope, SunCalc) {
$scope.position = SunCalc.getTimes(new Date(), 52.3667, 4.9000);
});
In this case you can event add your own methods to this service without messing with original library.
Note, that technically you could use globally accessible SunCalc without creating one more service for this. However using services offers sertain advantages: you can rename it easily, it allows to facade original library API, using global variables error-prone, etc.
Also remember to include script tag before Angular script tag.
Demo: http://plnkr.co/edit/rbATLGfGE2kx32tmEEoX?p=preview
im new in AngularJS, and have question how i can load controller and other js from structured folders?
For example i have structure:
app/
-common
-users
--userController.js
--userService.js
-orders
-app.js
How i should load controller and service from folder user?
And one more small question: what means squre bracerts?
app.config(['someThing'], function($routeProvider)
You can put the your code where you wants to. If you put them into angular modules, angular will find it. So if you have a service in /app/common/services/foo.js like:
angular.module('app').service('foo', function() { ... });
You can do this in the userController:
angular.module('app').controller('UserController', function($scope, foo) { ... });
Here you see how I injected foo in our controller. Angular Dependency Injection system is smart enough to find your code no matter where you put them.
You can also create different modules than app, you can have:
angular.module('other').service('bar', function() { ... });
And where you define the app module, something like this:
angular.module('app', []);
You just need to add the new module there as a dependency, that is what the [] are for:
angular.module('app', ['other']);
Now you can use the service bar in your controller too :)
On the other hand, the syntax you're talking about is the array notation, something like this:
angular.module('app').controller('FooCtrl', ['$scope', 'foo', function($scope, foo) { ... }]);
This is needed if you mangle your code when you minify it because in the minified code, you could get something like this:
angular.module('app').controller('FooCtrl', ['$scope', 'foo', function(f, g) { ... }]);
As you see, the function parameters are now f and g and Angular doesn't know what to inject based on those names, so it looks on the strings we provided, so it will know that f is $scope and g is foo.
There is no need to use this annotation directly, there are several tools that will do that for you like ngmin.
Cheers.
EDIT: You would need to add every javascript file into a <script> or the won't get loaded and Angular wouldn't find it.
Adding the files one by one is a pain, because you can have 5 or you can have 200.
It is better to concat them and for that I recommend: grunt-concat-sourcemap because it will generate a sourcemap so you will have 1 file with the entire app but in the dev tools you will see them in separate files.
I recommend you to check linemanjs which is a good tool to develop javascript apps and it concat the files for you, source maps, minify, the array notation stuff also...
You will have to link all files in your main HTML page and make sure they are loaded. As pointed out by Dwight above.
An alternative approach would be to use something like Grunt.js to "build" the app. This would include combining all the controller.js files into one – which you then load into your HTML page. This way all the files will be separate for development but will get concocted for deployment.
Say I am building a C# application with AngularJS.
I want to set up configuration object that comes from server side and basically inject that configuration into a factory. Where the factory resides in another .JS file.
How would go about doing that?
I have a JS fiddle example set up here:
http://jsfiddle.net/f89tS/7/
You could use module's constants for configuration objects coming from the server. Using constants is pretty easy, you could generate this on the server-side:
app.constant('CONSTANTS', {zoomLevel: 8});
and then, in your factory you can inject constants:
app.factory('map', function(CONSTANTS){
return {
zoomLevel: CONSTANTS.zoomLevel
};
});
Constants are really good for the server-generated settings since, once generated and sent to the client those can't change.
Finally, here is the working jsFiddle: http://jsfiddle.net/pkozlowski_opensource/JZcys/1/
Here is an example of how I accomplished something similar by wrapping my bootstrap call around my own run method.
It then uses a naming convention to inject configuration options inline from your aspx page, which could be set via c# property.
I don't know if this is the 'angular' way, but it has worked well thus far.
http://jsfiddle.net/xpressivecode/dVM9b/