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.
Related
I currently have 3 angularjs modules, each of which are (roughly) like so:
(function () {
var generalApp = angular.module('general-app', []);
generalApp.controller("NewsletterSignup.Controller", ["$scope", "$http", NewsletterSignupControllerFunction]);
}());
where NewsletterSignupControllerFunction is a global variable that is a reference to a function, eg:
var NewsletterSignupControllerFunction = function ($scope, $http) { ... };
Rather than use a global variable to share logic between the three modules, what is the simplest way to inject NewsletterSignupControllerFunction into each of the modules so I can use it to create the controllers? I have tried various approaches, none of which I can get to work.
One approach is to define a common module with the controller:
common.js
(function () {
angular.module('common', [])
.controller("NewsletterSignup.Controller",
["$scope", "$http", NewsletterSignupControllerFunction]
)
function NewsletterSignupControllerFunction ($scope,$http) {
//code ...
}
}());
Use that common module as a dependency:
angular.module("myApp",['common'])
For more information, see
AngularJS angular.module API Reference
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
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
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
I'm using meteor + angular. My intention is to add more dependencies after the app bootstrap (This is because the package is the one handling the bootstrapping at the start and I don't have much control of it). Now while doing that, I would also want to enforce a basic code structure wherein for example, I would compile all controllers in one module.
Here's the basic idea:
'use strict';
angular.module('app.controllers', [])
.controller('MainCtrl', function() {
// ...
})
.controller('SubCtrl', function() {
// ...
})
.controller('AnotherCtrl', function() {
// ...
});
Then include that to the main module as dependency:
angular.module('app', [
'app.filters',
'app.services',
'app.directives',
'app.controllers' // Here
]);
After some research, I've discovered that what I'm trying to do (Adding dependencies after bootstrap) is actually a part of a feature request to the angular team. So my option is using, for example, $controllerProvider and register() function:
Meteor.config(function($controllerProvider) {
$controllerProvider.register('MainCtrl', function($scope) {
// ...
});
});
Meteor.config(function($controllerProvider) {
$controllerProvider.register('SubCtrl', function($scope) {
// ...
});
});
Meteor.config(function($controllerProvider) {
$controllerProvider.register('AnotherCtrl', function($scope) {
// ...
});
});
It's works though not that elegant. The questions are:
What's a more elegant way of doing the config and register part?
Is there a way to register a module instead?
Create your module:
angular.module('app.controllers', []);
Add it as a dependency:
angular.module('app').requires.push('app.controllers');
according to this presentation (slide 12) you can assign controllerProvider to app.
Example of replacing module's controller method: http://jsfiddle.net/arzo/HB7LU/6659/
var myApp = angular.module('myApp', []);
//note overriding controller method might be a little controversial :D
myApp.config(function allowRegisteringControllersInRuntime($controllerProvider) {
var backup = myApp.controller;
myApp.controller = $controllerProvider.register;
myApp.controller.legacy = backup;
})
myApp.run(function ($rootScope, $compile) {
myApp.controller('MyCtrl', function($scope) {
$scope.name = 'Superhero';
})
var elem;
var scope=$rootScope;
elem = $compile('<p ng-controller="MyCtrl">{{name}}</br><input ng-model="name" /></p>')($rootScope, function (clonedElement, scope) {
console.log('newly created element', clonedElement[0])
document.body.appendChild(clonedElement[0]);
});
console.log('You can access original register via', myApp.controller.legacy);
})
The only method that I've seen that works is replacing the angular.module function with your own function returning the module you used to bootstrap your app.
var myApp = angular.module('myApp', []);
angular.module = function() {
return myApp;
}
So that all modules that are registered afterwards are actually being registered in your myApp module.
This method combined with the one you describe in the question (using providers like $controllerProvider) will allow you to add "modules" after angular.bootstrap.
Demo
See this jsfiddle for a demo: https://jsfiddle.net/josketres/aw3L38r4/
Drawbacks
The config blocks of the modules that are added after angular.bootstrap will not be called. Maybe there's a way to fix this, but I haven't found it.
Overriding angular.module feels like a "dirty hack".