I'm working on an Angular project that will require modularisation and I will be creating many small modules for it. Example: myApp.core, myApp.components.component1 myApp.components.component2 etc. each being its own file compiled into one with gulp. When I inject myApp into another project, I want to be able to consume all modules in one myApp injection, like so:
angular.module('project2', ['myApp'])
instead of:
angular.module('project2', [
'myApp.core',
'myApp.components.component1',
'myApp.components.component2'
])
Much like the Angular team have done with Material. Everything is its own module, but in order to use Angular Material, you only have to add ngMaterial as a dependency.
angular.module('project2', ['myApp']);
angular.module('myApp', ['components']);
angular.module('components', ['component1','component2','component3']);
angular.module('component1', []);
angular.module('component2', []);
angular.module('component3', []);
Related
I have an app module defining dependencies (taken from phonecat-Tutorial) in the directory app:
app.module.js:
angular.module('phonecatApp', [
'phoneList' // (*)
]);
Then, in a directory app/phone-list are the module:
phone-list/phone-list.module.js:
angular.module('phoneList', []);
and component:
phone-list/phone-list.component.js:
angular.module('phoneList').component('phoneList', {...});
From registering the module phoneList in the first snippet at (*), how does AngularJS knows where to fetch the module from? Is the mapping from phoneList to phone-list-directory naming a builtin feature?
AngularJS has a dictionnary of modules. The key in this dictionnary is the string that you give your module when you register it with the following line :
angular.module('phoneList', []);
That's why the previous line must always have been executed in javascript before you can use your module by adding a component (like following line) :
angular.module('phoneList').component('phoneList', {...});
or by injecting your module into another module
angular.module('phonecatApp', [
'phoneList'
]);
The code for relevant modules has to be included in scripts included in the page. This is either done by manually adding various script tags or by task runners like grunt, gulp, webpack etc adding them for you.
If dependency module code doesn't exist angular will throw error
In simpler terms - where the code comes from is not angular's responsibility. It has to already exist for angular to work
Recently I have been using angular JS and it is great. However, I do not really understand the injection inside out. I have been using this pattern for almost every page and it works.
var workoutApp = angular.module('workoutApp', []);
workoutApp.controller('workoutControllers', ['$scope', '$http', '$window', function ($scope, $http, $window) {
//do something with $scope.
Now I want to implement auto complete using ngMaterial http://codepen.io/anon/pen/VeNqYB
The syntax are totally different from what I have been doing so I am really confused. I tried to inject module this way,
var workoutApp = angular.module('workoutApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']);
but kept getting error. Can anyone please share some thoughts on this?
According to the docs, ngMaterial has dependencies on more than just angular.
In the CDN example (https://github.com/angular/material#cdn), you can see the dependencies.
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js"></script>
It sounds like the fix is as simple as adding these dependencies.
Related Issues
Installing Angular Material, "Failed to instantiate module ngMaterial" even though I'm using angular version 1.3.0
I have a main module, that loads ngRoute service.
angular.module("app", ["ngRoute", "app.settings"]
and my app.settings module is not loading ngRoute service,
angular.module("app.settings", [])
.config(["$routeProvider", function($routeProvider){
$routeProvider.when("/settings", {
template: "{{message}}",
controller:"SettingsController"
});
}])
But I can use $routeProvider in this module.
Does angular module loading order not care? Can I load any dependency any module?
The thing is that your app module is loading the ngRoute, and also is loading your app.settings modules, so the dependency is already injected into your Angular application, so there is no need to injected again.
Does angular module loading order not care?
The order doesn't matter Angular first resolve the dependencies and then compiles the modules, controllers etc.
angular.module("app", ["ngRoute", "app.settings"]
Is the same as
angular.module("app", ["app.settings", "ngRoute"]
However you can run into troubles in some Unit Test scenarios if you only load the module app.settings your test will fail. But in the most cases you are going to load the app module and all the main modules of your Angular application.
Can I load any dependency any module? Short answer, yes.
Long answer: Your ngRoute dependency should be loaded in the main module because is something which your app module is going to need it to define the basic routing, if the dependency is loaded in several modules is not going to throw any error, in fact you should add all the dependencies needed by each module because in large applications there is no guarantee that the ngRoute/myFactory/etc is already loaded.
Update to improve readability
When we write angular.module('app',['ngRoute']); what exactly dependencies here mean?
to be precise ngRoute is nothing but a simple angular module like
angular.module('ngRoute',['ng']) in which has $routeProvider
`angular.module('ngRoute',[]).provider('$roteProvider',[function(){}]).services('$route',function(){}).service('$routeParam',function(){})`
Its better to see the angular project in github https://github.com/angular/angular.js/blob/master/src/ngRoute/route.js
Dependencies means the list of modules that particular module in your case 'app' is dependent on , you when you state them as dependencies they get injected in the module at initialization and become available for usage
My Angular app structure is like this:
App.js
angular.module('RateRequestApp', [
'RateRequestApp.services',
'RateRequestApp.controllers',
'ui.bootstrap',
'angular-loading-bar',
'textAngular',
'angularFileUpload'
]);
I am using different HTML files for different pages and I am not using
Angular's $route, but still I want to use same app in all pages with different controllers.
As you can see I am injecting third party modules to my app. The problem is that in some pages I don't want some of this modules, How can I avoid them where I don't need them?
Yes you can do it something like this:
var myApp = angular.module('RateRequestApp', [
'RateRequestApp.services',
'RateRequestApp.controllers',
'ui.bootstrap',
'angular-loading-bar'
]);
var lazyModules = ['textAngular', 'angularFileUpload'];
angular.forEach(lazyModules, function(dependency) {
myApp.requires.push(dependency);
});
In this case you may inject the modules conditionally. (But please note, lazy loading of some module may not work where there is some configuration needed.)