add third party module in angularjs - javascript

I need a third party module in my angular app for the specific page only so i dont want to load those js files when they are not required
currently code is like this
angular.module('app', ['othermodule']);
but i want it like
angular.module('app',['']).
controller('ctrl'['module',function(module){
}]);
or any similar alternatives. How can modules be loaded conditionally ?

The first thing you will need to do is break your angular modules out into their own files. A simple example would be a seperate app.js that handles creating the app and routing, then controller.js and factory.js. Once you have a seperate file for each module you create the module with this syntax
angular.module('myapp.functionName.type', ['inject your custom module here'])
.whatever (controller, value, factory, etc)
You would then inject the myapp.functionName.type into the app.js

Related

how to use a module in another module and route that in angular 8?

How can I use a module in another module in angular 8? I would like create an application that use a modules in another module. is it possible? if yes how can I route from a link to this modules?
I build a menu module and inside that some components as menus. any menu refer to a new area that I want be a module. how can I do this?
the structure is:
menu(module)
-first menu(component)
an area(module)
some components
...
-second menu(component)
...
Normally you will need to lazy load module
So what you need to do is
Create a desire module you want to have in your app and include component you need
Then add default route for that module
Lazy load that module in your main app.routing.ts
Add routeroutlet in your view to navigate to that route moudule

grunt an angular project then it errors as Cannot find Module

Hi I have a problem :) I developed an angular project and it works fine in my localhost apache. I'm using angular 1.4.3 for frontend things and node.js for backend things. Now I need to use Grunt to version it.
I did many config (such as that maple thing disabled.it changes all variables names such as a,b,c from indexCounter,PersonCounter,AgencyCounter and it causes some problems.) But I get an error everytime I try to run. It is like [module] cannot found. My project works on my local machine If I dont grunt it but after the grunt I take 3 files as vendor.js vendor2.js and app.js. In vendor.js I have native angular js files. In vendor2.js I have plugins. and lastly In app.js I have controllers. I'm added them in my index HTML in this order;
vendor.js
vendor2.js
app.js
Do you have any idea about that?
Problem: In angular you cannot minify your code without using either .$inject or array syntax.
Solution
For each controller, directive, service etc. that you add to your module, you will have to add en extra array of strings specifying the dependencies that should be injected into you service, controller etc.
Example
Using $inject property
function mainController(indexCounter,PersonCounter,AgencyCounter) {
//Controller implementation
}
mainController.$inject=['indexCounter','PersonCounter','AgencyCounter'];
angular
.module('mymodule')
.controller('mainController', mainController);
Using array
var mainController;
function controller(indexCounter,PersonCounter,AgencyCounter) {
//Controller implementation
}
mainController=['indexCounter','PersonCounter','AgencyCounter', controller];
angular
.module('mymodule')
.controller('mainController', mainController);
When you don't specify the dependecies in an array, angular will try to find an registered dependency based on its' parameter name. e.g. function mainController(indexCounter) {}, then angular will try to find a registered dependency called indexCounter. It works perfectly fine when the code is not minified. However, when minified the indexCounter parameter name will be changed to a shorter name, e.g. a. And when trying to find dependency a which is not registered in your app. It's gonna fail to instaciate your angular module.

Injecting modules in Angular at runtime

I have this Angular (1.3.15) code:
var my_app = angular.module('my_app', ["ui.bootstrap", "toastr"]);
my_app.module("template/foo/bar.html", []).run([$templateCache, function($templateCache) { /* ... global template ... */ }]);
which injects bootstrap and toastr libraries and creates a template that I use in all my other JS files.
Now, not all files need ui.bootstrap, but given the fact that I placed it in my global.js file (which is loaded with every page, no matter wat), Angular is complaining about missing libraries (ui.bootstrap).
My question is: can I inject ui.bootstrap only in the controllers I need it and leave my gobal.js like this:
var my_app = angular.module('my_app', ["toastr"]);
Also, this applies to quite some other libraries I'm currently loading in my global JS file, not only ui.bootstrap.
One approach to this is to split your code into multiple modules by some rule. This way only the modules that need ui.bootstrap will have it as a dependency, other won't.
If that's still not clean enough for you then you might want to take a look at Browserify

How does angular-app reference its dependencies?

I'm in process of learning Angular, so please forgive my naivety...
app.js in the angular-app example app references various dependencies in client/src/commmon/, such as services.breadcrumbs. How does Angular know to pull in these dependencies from the "common" directory? Is there some configuration I'm not seeing in this app?
Pertinent code:
angular.module('app', [
'ngRoute',
'projectsinfo',
'dashboard',
'projects',
'admin',
'services.breadcrumbs',
'services.i18nNotifications',
'services.httpRequestTracker',
'security',
'directives.crud',
'templates.app',
'templates.common']);
Take a look at https://github.com/angular-app/angular-app/blob/master/client/src/index.html
There you will see the following lines:
<script type="text/javascript" src="/static/jquery.js"></script>
<script type="text/javascript" src="/static/angular.js"></script>
<script type="text/javascript" src="/static/mongolab.js"></script>
<script type="text/javascript" src="/static/bootstrap.js"></script>
<script type="text/javascript" src="/static/<%= grunt.config.get('pkg.name') %>.js"></script>
This is where all of the packages are loaded. This is set up by Grunt, which is configured to concatenate JavaScript files together and create the files which are actually served. You should take a look at the Grunt configuration file (https://github.com/angular-app/angular-app/blob/master/client/gruntFile.js) to see how it is configured to do this. I don't know too much about Grunt yet, but if you know for what to look, you can find the configuration for concatenating various sets of files which are then placed in the distribution directory under the above referenced file names.
Angular dosen't have a dependency loader (yet).
all the script is being loaded from the first beginning. either as a bundle script, multiple <script> tags or being manual bootstrapped by another script loader
if I would create an angular app and want to use your code above, i would have to write
angular.module("myOwnApp", ["app"])
Now my app is a dependency of yours
and your app is depends on ngRoute, proj... so i have to load all your modules one way or the other
this is what I understand
Simply speaking, when you call:
angular.module('app',[
'ngRoute',
'projectsinfo'
]
angular will know you create a module app with dependencies of ngRoute and projectsinfo.
So when app is initiated, it will ask for these two dependencies from $injector, which is responsible for module dependencies.
So, when $injector is asked for these two module, it just look for them by the names, from something like a module POOL, $provide.
Simply put, when you define a module
angular.module('projectsinfo',[])
it actually just put a factory function, with the name 'projectsinfo' into the POOL. And the $injector will look for modules from it.
About the common derectory, since you load angular.js at the very beginning, so wherever you define a module by module, they all goto the same pool
In your example, services.breadcrumbs is not loaded from client/src/commmon. The scripts in client/source/common are loaded into the browser. On browser load, the scripts add themselves to the angular runtime (e.g. angular.module('service.breadcrumbs', [...])). Once a module is added to the angular runtime it is available for consumption by other angular modules.

Lazy loading controllers that are in different modules

I am building a large Angular Application. I am trying to lazy load dependencies.
So my application module in app.js looks like
testApp = angular.module('SellerDashboard', [
'ui.bootstrap',
'ngRoute',
'chieffancypants.loadingBar',
'ngAnimate',
'route-segment',
'view-segment',
'Feature1.Index',
'Feature1.My_Listings',
'Feature1.My_Listings.Directives',
'Feature2.Debug',
'Feature2.Index',
'Feature3.Index',
'Feature3.Landing'
]);
Each of these modules have sub modules which has further dependencies.Each of the modules are in seperatefiles .An example file is as follows
var featureApp = angular.module('Feature1.My_Listings', ['Feature1.Services', 'Common.Services', 'CommonDebug.Services','angular-intro']);
listing_app.controller('my_listing', ['$scope', 'fkPaginator', '$routeParams', 'fkLogger', '$q','fkLoaderManager',function ($scope,fkPaginator, $routeParams, fkLogger, $q,fkLoaderManager) { //do somesthing})]);
So my app.js has no direct dependency on 'Feature1.Services' modules. It has dependency of Feature1.My_Listings module (which defines the controllers) which has further dependency on services modules.
[Feature1.Services defines the services has further dependency on other providers its requires]
Now,I do not want my Feature1.My_Listings to be loaded until I go the page that actually require some controller defined in 'Feature1.Services' .So if I am in "My_Listings" page I do not want to load fFeature2 and Feature 3 modules.
Implement lazy loading . The above link shows how to use resolve while changing routes.But then it also makes it mandatory to have all files under one module which is the app module and all controllers to be defined as app.controller("bla bla") using app as the global variable. But in my case I want to lazy load modules and include them dynamically based on the routes.
How do I go about it ?? It would be nice if somebody could help regarding how this can be achieved using requirejs.
So for a very large app is the above way correct for defining controllers,services ,etc or breaking them in to smaller modules like I did is the proper way ??

Categories