This one it might be an oldy but anyway I guess there are a lot of front-end developers with the wisdom.
I'm trying not to declare a plug-in into the main module of my application.
Let's say I have the following modularization:
SUB-COMPONENT MODULE
(function () {
'use strict';
angular.module('app.modules.table.detail', []);
})();
COMPONENT MODULE
(function () {
'use strict';
angular.module('app.modules.table', [
'app.modules.table.detail'
]);
})();
MAIN APP MODULE
(function() {
'use strict';
angular.module('app.modules',
[ 'app.modules.table' <----// inside here is the table.detail
,'app.modules.other.component'
]);
angular.module('app', ['app.modules',
'smoothScroll'])
So, with this structure, can I hide the smoothScroll third-party away from the app module array? I just want to declare app.modules and that's it for the app.
I tried to include it as a dependency in the component array, but no luck. I've been reading about and I guess it has to be on the app for the $injector to know his $provider.
Anyone have nailed this?
I will answer myself because it was easier than I thougt.
I was not declaring the third-party in the sub-component / component modules.
CHILD module component
(function () {
'use strict';
angular.module('app.modules.table.detail', ['smoothScroll']); <-- HERE!
})();
PARENT module component
(function () {
'use strict';
angular.module('app.modules.table', ['app.modules.table.detail', 'smoothScroll' <--- ALSO HERE
]);
})();
So now I can bootstrap the app with no need of declaring the third-party on the main module. Therefore it is hidden from the main app module file
Related
John Papa's famous Angular 1 Style Guide says to use IIFEs, to avoid the likes of var myApp = angular.module('myApp',[]);
and polluting the global namespace.
The example given is:
logger.js
(function() {
'use strict';
angular
.module('app')
.factory('logger', logger);
function logger() { }
})();
storage.js
(function() {
'use strict';
angular
.module('app')
.factory('storage', storage);
function storage() { }
})();
How does this work? Do I not need to declare the module at least once? E.g with angular.module('app',[]); (wrapped in an IIFE? (instead of var app = angular.module('app',[]); to avoid a global variable))?
However, the two usages of angular.module('app') in the example , do not declare, but will then evaluate angular.module('app') twice, which surely cannot be A Good Thing (in fact, I read a highly upvoted S.O. question earlier which said that this is A Bad Thing, and that there should be a single reference - but that would be a global, which is also A Bad Thing).
Which is it to be? Or can I declare my angular.module('app'), plus a few controllers, serves, factories, directives, in separate files, in separate IIFEs? If so, how?
Do I not need to declare the module at least once?
Yes, the module needs to be created with dependencies first:
app.js
angular.module('app',['ngRoute']);
This must be done before any subsequent scripts add to it. It need not be enclosed in an IIFE because it doesn't declare any global variables.
To avoid pollution of the global namespace, the following needs to be enclosed in an IIFE:
logger.js
(function() {
'use strict';
angular
.module('app')
.factory('logger', logger);
function logger() { }
})();
On the other hand
storage.js
'use strict';
angular.module('app')
.service('storage', function storage() {
var value;
this.get = function() { return value; };
this.set = function(val) {
value = val;
};
})
This does not need an IIFE because it does not declare any global variables or functions.
Both examples avoid polluting the global namespace.
For more information, see
AngularJS angular.module Method API Reference
angular.module('app') without array as 2nd param is a getter, it is ok to use it multiple times.
To improve this you need some build tool, e.g. we use webpack (it will wrap everything into IIFE for u btw) and now it looks like this:
logger.js :
export default ['$log', function($log) {}]
storage.js :
export default ['$http', function($http) {}]
module.js :
import logger from './logger.js';
import storage from './storage.js';
angular
.module('app')
.factory('logger', logger)
.factory('storage', storage);
im completely new to angularJS, below is the minimal example of my issue:
myModule.module.js:
(function () {
'use strict';
angular
.module('myModule', [
'myServices',
'myControllers'
]);
angular
.module('myServices', []);
angular
.module('myControllers', []);
})();
myService.service.js
(function () {
'use strict';
angular
.module('myModule')
.factory('myServices', myServices);
function myServices() {
var service = {};
return service;
}
})()
myController.js:
(function () {
"use strict";
angular
.module("myModule")
.controller("myController", myController);
myController.$inject = ['myServices']
myController(myServices) {
/* use myServices */
}
})()
I think I accomplished all things needed to make service available to controller but I'm still getting unresolved provider error...
I'm coming from strong Angular2+ background and maybe some common potfall I'm unaware of? Does the tile names os services must match their angular name or something similar?
Any help is appreciated.
Oh yeah, Angular2+ experience strikes on this one. Basically I was absolutely unaware about managing scripts in main.html (or whatever entry point for app is). So basically I was dumb enough not tu supply my main.html with specified script file.
So, assuming that my usecase was to add just another service to already working myModule, then
<script src="path/to/myService.js"></script>
Hope this will help someday some other dev lost in AngularJS :)
Cheers
What am I doing wrong to get started with an angular codepen?
https://codepen.io/TylerL-uxai/pen/mwqNLW
(function () {
'use strict';
angular
.module('timeOff')
.controller('TimeOffController', TimeOffController);
TimeOffController.$inject = ['$scope'];
function TimeOffController($scope) {
You need to pass empty dependency array to your module,
angular.module('timeOff',[])
WORKING CODEPEN
I am learning AngularJS and I have one application which use several separate controllers, and everything is splitted in separate files. Please note that there is no "$scope" because I am using the "controller as vm" syntax.
Application:
(function () {
"use strict";
angular.module("myApplication", ['dependency1', 'dependency2'])
})();
Controller 1 (which would need only dependency1):
(function () {
"use strict";
angular.module("myApplication")
.controller("firstController", firstController);
function firstController($http) {
...
}
Controller 2 (which would need only dependency2):
(function () {
"use strict";
angular.module("myApplication")
.controller("secondController", secondController);
function secondController($http) {
...
}
Everything is working correctly, but this approach forces me to include All the dependencies files in ALL pages.
I would like to move the dependencies to the controllers:
New Application (without dependencies):
(function () {
"use strict";
angular.module("myApplication", [])
})();
The question is: what is the correct syntax for the controllers, in order to move "dependency1" to Controller 1 and "dependency2" to Controller 2?
Thanks!
Have a look at ozLazyLoad
myApp.controller("MyCtrl", function($ocLazyLoad) {
$ocLazyLoad.load('testModule.js');
});
Read more over here.
I've scaffolded my Laravel/Angular app and have an app/ directory in project/public/assets/
Inside of the app directory I have an app.js file, and directories for controllers/, filters/, etc.
Rather than loading each individual controller, filter, etc.. how can I load all of them in the directory?
Yeah, as #cbass rightly said you should concatenate them. Its recommended to concat it for production build, however you can try using this following structure to experiment
(function () {
angular.module('app', []);
// MainCtrl.js
function MainCtrl () {
}
angular
.module('app')
.controller('MainCtrl', MainCtrl);
// AnotherCtrl.js
function AnotherCtrl () {
}
angular
.module('app')
.controller('AnotherCtrl', AnotherCtrl);
// and so on...
})();
About code snippet referred from Todd Motto's blog