I just started discovering Angular.js and did the Shaping up with Angular course from codeschool. I though didn't understand fully one aspect: in the course you create multiple modules with var app = angular.module('modulename',[...]), you wrap them in a closure and you include all the js files in your index.html.
I am confused because the guy was using the same var app expression in all the files, which were included in the index.html like this:
<script src='file1.js'></script>
<script src='file2.js'></script>
and in file1.js you had:
(function(){
var app = angular.module('file1Module', []);
...
})()
and in file2.js you had:
(function(){
var app = angular.module('file2Module', ['file1Module']);
...
})()
So the app object's scope is inside the closure, right? So it doesn't pollute the global namespace and this is why you can name them as app without overwriting each other, even though they are included at the same level. But this app object is tied to file X Module through the angular.module(...) call? Or there is something else going on what I didn't notice?
Related
How to include an entire file into my bundle main.js?
ES6 can import/export functions and classes. But what if i want to include the whole content from another file into my bundle main.js? how to do it?
I came across the query on Stackoverflow: Managing jQuery plugin dependency in webpack.
I'm not sure about this question though. Those options given there seem to target injecting implicit globals, configuring this, disabling AMD, to include large dists. I don't think this is what i want.
Let's say i have two files in src directory
1- rough.js
const rgh = "qwerty"
2- index.js
import './rough.js' //something like this
console.log (rgh)
Now what i expect in bundle.js is
const rgh = "query";
console.log(rgh)
I just want all the content inside one of my file to get all transported to index.js for webpack to bundle them
Those options given there seem to target injecting implicit globals,
configuring this, disabling AMD, to include large dists. I don't think
this is what i want.
To understand this you need to understand what webpack is doing for you. Web pack takes a series of Javascript files (and more importantly their contents) and parses these into one file. That's what it does from a file point of view, but if you ignore the file and think about what it does from a code point of view, it takes each one of the imported objects and makes them available to other objects depending upon the rules you define in your code (using import and export). You can think of this from a closure point of view something like this:
if you have some code like:
import a from 'a.js';
export default b(){
console.log(a.test());
}
This will be turned into something like, in one js file:
var a = (function() {
var testStr = "test";
function test(){
return testStr;
}
return {test:test};
})();
var b = (function(a) {
console.log(a.test());
})(a);
So you can see that the file isn't really important. What's important is the scope. b can use a because it is injected into it's scope (In this instance as a IIFE).
In the above example a and b are in the global scope but testStr isn't.
So when your talking about "importing my file", you need to forget about that and think about what objects in that file you want to import how. Any variables "in that file" declared directly var a = ....; are in the global scope. So it sounds like what you want to do is import the objects in that file into the global scope.
you just need to import that file in main.js
like this way
I have this structure in my script A:
module.exports = angular.module('myApp').controller(..).directive(..)
I want to inject additional directive so that I have something like this:
module.exports = angular.module('myApp').controller(..).directive(..).directive(..)
I want to do this from the outside of the script A.
Any ideas how this can be achieved? I am still catching up with the angular, and any help is really appreciated! Thanks a lot!
If I understand correctly, you want to create your directive dynamically. (within different angular module) You can code in the way blow,
//dynamic directive dyDir.js
module.exports = function (app) {
app.directive(...)
};
your script
var dyDir = require('./dyDir.js');
var yourApp = angular.module('appName',[]);
yourApp.controller('testCtrl', ...)
dyDir(yourApp); //parse angular module instance as parameter
Although this would work, but I really don't think use angular.module and the commonjs module at the same time is a good practice, coz this would make the other developer so confused.
Hope this would solve your problem. : )
I got this solved in a following way - if it can be of any help to anyone:
Assume you have an existing module myModule, and two controllers myController1 and myController2 (code for the two controllers is in files controller1.js and controller2.js). This is your code in a file myapp.js:
module.exports = angular.module("myModule", [])
.controller('myController1', require('./controller1.js'))
.controller('myController2', require('./controller2.js'))
Assume you would like to inject additional directive into your module myModule. You would reuse that module.
You would create a new file with the following content:
require('./myapp.js');
require('./mydirective.js'); //this is your new directive
var app = angular.module("myModule"); //get an existing module
app.directive('directiveName', function() {
return {
...
}
})
I fount out in the official angularjs documents that
angular.module('foo', []) makes the definition of foo module, and
angular.module('foo') is calling (not making) foo module.
But I could not start my app when I wrote the code below,
app/controllers/file1.js
var app = angular.module('app.controller', []);
app/controllers/file2.js
var app = angular.module('app.controller');
and, it worked when I only changed those two declarations:
app/controllers/file1.js
var app = angular.module('app.controller');
app/controllers/file2.js
var app = angular.module('app.controller', []);
so... I am wondering that
how the order of loading module is decided
how should I do when I want to use same module on two or more files
Thanks.
It's pretty straightforward: you must create the module before to be able to use it.
It's clearly a bad idea to create it in a controller file; use a separate file for this purpose, in which you will also be able to make the global configuration (myModule.config()) of your project, for instance. In your case:
/** In "app/controller.js" **/
angular.module('app.controller', []); // Creation of the module
/** In "app/controllers/file1.js" **/
/** In "app/controllers/file2.js" **/
angular.module('app.controller'); // Use of the (already existing) module
The file app/controller.js should be called first. Then, the order of the other files doesn't matter.
I have two files in which I define services in my angular app, but when I try to use them both in my directive, I get an error saying the service provider is not found for whichever directive I define second. It seems like one service is overwriting the other. If I change the module definition in service2.js to myapp.services2, then it works. I would think I could add multiple factories to the same module this way. Can someone point out what I'm doing incorrectly?
service1.js:
var services = angular.module('myapp.services',[]);
services.factory('Service1', function() {
// service code
});
service2.js:
var services = angular.module('myapp.services',[]);
services.factory('Service2', function() {
// service code
});
mydirective.js:
angular.module('myappdirective', []).directive('myapp', ['Service1', 'Service2',
function(service1,service2) {
// directive code
}]);
This is from the docs:
Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module.
Found here:
https://docs.angularjs.org/guide/module
This is possible, however will be error prone, hence not recommended
Make small modification to what you are already doing
Just do not re-declare the module variable in other files other than service1.js or put the module definition to a file of its own and include these JS file in the order of Module.js, services.js, directive.js then it will work
I have this array
var urls = {
};
in config file. How can i access this in my main.js file?
I tried normal method, making this array global in config file, but its not happening.
Ensure that config.js is loaded before main.js and you'll be fine, as long as you're declaring urls in the global scope.
Make sure the script containing the relevant code is included into your html and it is included before you try to use that variable. Also, make sure that your variable is outside of any functions or accessible through a prototype.
It looks like you're exporting the config as a module — are you using RequireJS or another dependency library to load this? Some more context with the code would also be helpful.
edit:
I think the issue is that you're exporting only the urls in your config file. I'm not sure what your app structure looks like, but something like this is closer to what you're looking for:
// config.js
var config = {
urls: {}
};
module.exports = config;
// main.js
var config = require('config');
var urls = config.urls;