I have a Backbone App where I have 2 modules. Now I have the issue that in module 1 there are some function and definitions which I also need in module 2.
so, in my module2.js I tried to do this:
define(['app', 'backbone','modules/module1'],
function (App, Backbone, Module1) {
Module2.View = Backbone.View.extend({
afterRender:function(){
var module1 = new Module1.View();
....
So again, I just want to add some functions I have defined in module1 to connect with module2, so that in module2 I can add some if-statements etc.
How can I achieve this?
Related
I'm working on my first Angular project.
Basically, I have two modules which have too much in common, module A, and module B which just have extended features of module A. So for clarity sake, module A is the parent, B the child.
What I'm trying to do :
var modA = angular.module('modA', [...]);
// module A controllers, directives, services and stuff
var modB = angular.module('modB', ['modA']);
// some other directives and services depending on module A
modA.controller('main', function(scope){
// Here it should execute modA controller logic
// #override
var someFunctionInModA = function(){
parent.someFunctionInModA(); // also not sure how this is done
// other stuff
}
});
What I found so far :
angular.extend(this, $controller('modA', {$scope: $scope}));
Similar things exists for services, some uses $injector, I'm missing some clear (and simple) ressources about the subject.
I have a service with a few methods:
function userService($http, API, auth) {
....
}
and then used in my module like:
var app = angular.module('app', ['ngRoute'])
.service('user', userService)
...
All of this is in my app.js file, I want to separate things so its easier to maintain. I'm trying to use the line .service('user', '/services/userService') but its not working any ideas how to i need to reference this?
Thanks.
I think you are creating a new module instead of use yours.
To retrieve an existing module and use it in a separated file, you have to do :
var app = angular.module('app')
.service('user', userService')
// ...
Instead of
var app = angular.module('app', ['ngRoute'])
.service('user', userService')
// ...
Documentation available at https://docs.angularjs.org/guide/module#creation-versus-retrieval
EDIT from #koox00 answer
Don't forgot to load all files related to your module in your markup, in the good order (before load the file containing your module declaration).
This tells AngularJS that all values, factories and services defined inside the myUtilModule should be available inside the myOtherModule module too. In other words, myOtherModule depends on myUtilModule.
var myUtilModule = angular.module("myUtilModule", []);
myUtilModule.value ("myValue" , "12345");
var myOtherModule = angular.module("myOtherModule", ['myUtilModule']);
myOtherModule.controller("MyController", function($scope, myValue) {
});
My question is: What if you define controllers inside myUtilModule and try to use them on myOtherModule. Is this possible?
Yes, controllers will also be available between modules, a pratical example could be as follows:
angular.module('test.controllers').controller('HomeCtrl');
and then on your main module:
angular.module('test', [
'test.controllers',
'test.services',
...
];
This helps a lot on unit testing and reusability of packages.
As I understood there is no classical registration of module, where we can inject our dependencies like:
var myModule = angular.module('myModule', [otherModule]);
However there are file module-name.client.module.js at the root of the directorys
'use strict';
// Use Applicaion configuration module to register a new module
ApplicationConfiguration.registerModule('module-name');
Can I inject here my module like *.registerModule('module-name', [someModule]); or I should do it in angular.module('articles').config(...)?
But in config I can inject only providers, without factories
As far as i used angular, the best practice to load custom module and external library
is to combine angularjs with requirejs.
It's done in 3 step.
First, load in your main html file a js file which builds the foundation of your system (require.config):
Here you have all the parameters allowed : https://github.com/jrburke/r.js/blob/master/build/example.build.js
Example :
In your html file :
<script src="path/to/require.js" data-main="path/to/yourBuildFile"></script>
In yourBuildFile file :
require.config({
// you can define suitable names for all your external js library
paths:{
// don't put a ".js" at the end of the file
'angular' : 'path/angular',
'underscore' : 'path/underscore-min',
'...': '...',
},
// and other useful things
});
Second, in the same file or in another (see the parameter deps in link above), bootstrap your app:
Like explained here : https://docs.angularjs.org/guide/bootstrap
Example:
// AMD module injection, more info here : http://requirejs.org/docs/whyamd.html
define([ // inject all the external library you need + the definition of your app
'angular',
'require',
'yourpath/yourApp' // don't bother here, it's explained in third point
], function(angular){
// link your app to the document file programatically
angular.bootstrap(document, ['nameOfYourApp']);
});
Third, you define your app (in the "yourpath/yourApp")
Example:
define([
'angular',
// put all path to your directives + controllers + services
], function(angular){ // only specify parameters the library you use in the function
// you create your sublime app :)
angular.module('nameOfYourApp', [
// put all the name of your modules injected above
]);
});
The example above is made for single page application.
You can find other examples for multipage application here
http://requirejs.org/docs/start.html
I had created multiple modules in a page and make it nested such as
module A{
module B{
.....
}
}
izit possible passing value from module A to module B? I refer to this website http://www.simplygoodcode.com/ to create multiple modules in one page.
You can specify module A as a dependency of module b.
e.g.
var moduleA = angular.module('module-a', []);
// ...
var moduleB = angular.module('module-b', ['module-a']);