I'm looking at this open source project bounty source's angularjs app.
I need some clarifications:
How does angular.js know where to lookup the modules?
angular.module('constants', []);
angular.module('filters', []);
angular.module('directives', []);
angular.module('services', []);
angular.module('factories', []);
angular.module('resources', []);
angular.module('bountysource', ['constants', 'services', 'directives', 'filters', 'factories', 'resources']);
angular.module('activity', ['bountysource']);
angular.module('fundraisers', ['bountysource']);
angular.module('teams', ['bountysource']);
https://github.com/bountysource/frontend/blob/master/src/app/app.js#L29
The modules constants, filters, etc are in the /src/common folder
I only see the main AppController defined in the app.js file, how do the other controller's get loaded or is there a convention?
https://github.com/bountysource/frontend/blob/master/src/app/app.js#L69
Not only the controllers, but what about the routes.js file?
Or does this all just work b/c when the project gets build using gruntjs it combines all of this to a single file?
They're all included from the index page:
https://github.com/bountysource/frontend/blob/master/src/index.html
Related
Does anybody have an idea how to create an angularjs app with modules loginApp and mainApp, login will use login.html and mainApp will use index.html?
Below is the scenario I want to achieve.
Run loginApp
Once authenticated, run mainApp
I am currently doing the above scenario since I want my login page to load faster, so instead of using index.html which has lots of <script> included.
Angular app initialization manually.
angular.module('myApp', [])
.controller('MyController', ['$scope', function ($scope) {
$scope.greetMe = 'World';
}]);
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
More information Bootstrap Angular App
You can manually bootstrap app. see here [more][1]
Manually Bootstrapping an AngularJS Application
Let's start by defining our application's main module:
var myApplication = angular.module("myApplication", []);
Now, instead of relying on the ng-app attribute, we can call the angular.bootstrap function manually. We need to hand it both the application root and the name of our main module. Here's how you call it as soon as the DOM has finished loading:
angular.element(document).ready(function() {
angular.bootstrap(document, ["myApplication"]);
});
Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead. AngularJS applications cannot be nested within each other. -- http://docs.angularjs.org/api/ng.directive:ngApp
See also
https://groups.google.com/d/msg/angular/lhbrIG5aBX4/4hYnzq2eGZwJ
http://docs.angularjs.org/api/angular.bootstrap
I am doing angular project,i have a situation that i need to load "ngSanitize" module.The problem is i don't need this module when index page loading.I want to load it only when required.Please help to find out.
Create a seperate module file (app.module.js) in application depends on your requiement...
angular.module("SampleOne", []);
angular.module('SampleTwo', []);
angular.module("SampleThree", []);
angular.module("SampleFour", []);
angular.module('SampleFive', []);
On page loading initialize this module file,
Depends on your requirement call the modules in your application.
Here "SampleFive" is one of the module i have injected ngSanitize.
var app = angular.module('SampleFive', ['ngSanitize'])
app.controller('MyController', function ($scope) {
$scope.Message = "My name is <span><b>Angular Sanitize</b></span>";
});
When we will call "SampleFive" module on a page only ngSanitize module will load.
Refer a below link...
AngularJS Best Practices: Directory Structure
I have a page containing multiple containers. Each container will have its own controller but point to one factory, which handles all the logic interacting with a web service API. I would like to have a separate file for each controller BUT I want all of this inside of one module. for the life of me I cannot find how to include controllers from different files into one modules.
//file 1
MyController ....
//file 2
MyOtherController
//file 3
MyFactory
//file 4
The Module
The module would be composed of MyController, MyOtherController and MyFactory defined in three separate files. Can someone help with this or point me to a good resource? Thanks!
You can think of a module as a container for the different parts of your app – controllers, services, filters, directives, etc. To access a container just call its module name for example
//file.4
angular.module("theModule",[]);
now that you have declared main module within angular now you can access mainModule from anywhere using angular
//file 1
angular.module("theModule").controller("MyController",[function(){...}]);
//file 2
angular.module("theModule").controller("MyOtherController",[function(){...}]);
//file 3
angular.module("mainModule").factory("MyFactory",[function(){...}]);
Check out the documentation for more information.
I also suggest reading Google's style guide and conventions manual
Also read about setting up app structure for maintainability
Here is a example of an Angular module setup I am using in an app that allows a separate external file for each module type. Note that the app must load before the external files. Tested on Angular 1.4.9.
Index.html
<script src="bower_components/angular/angular.min.js"></script>
<script src="js/ng-app.js"></script>
<script src="js/ng-factories.js"></script>
<script src="js/ng-directives.js"></script>
<script src="js/ng-controllers.js"></script>
ng-app.js
var app = angular.module('myApp', [
'factories',
'directives',
'controllers'
]);
ng-controllers.js
//note: I am injecting the helloFac factory as an example
var ctrl = angular.module('controllers', []);
ctrl.controller('MyCtrl', ['$scope', 'helloFac', function($scope, helloFac) {
console.log(helloFac.sayHello('Angular developer'));
}]);
ng-directives.js
angular.module('directives',[])
.directive('test', function () {
return {
//implementation
}
})
.directive('test2', function () {
return {
//implementation
}
});
ng-factories.js
var factories = angular.module("factories", []);
factories.factory('helloFac', function() {
return {
sayHello: function(text){
return 'Hello ' + text;
}
}
});
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 learning AngularJS following an organization inspired by ng-boilerplate. I create different Angular modules for the different parts of my site.
However, I want to create all common elements (services and directives) under the main module, while having them all be in separate source files.
This code works, but is the module in sessionService.js referencing the same module than app.js, or is it creating a new one with the same name?
app.js
var app = angular.module('myApp', [...])
.config(...)
.controller(...);
sessionService.js
angular.module('myApp', [])
.service('SessionService', function() { ... });
If you call angular.module('myApp', []) multiple times on the same page, you will likely run into errors or conflicts. I never tried that.
However, if you already run angular.module('myApp', []) once. Then you can run angular.module('myApp') (note: without []) to retrieve (refer to) the myApp module you defined earlier.
in controller.js file :
var app = angular.module('myApp',['newService']);
in service.js :
angular.module('newService',[])
.service('someService',function(){
return {
// return something
return null
}
}
});
Do not forget to include both the js files in your HTML:
<script src="controllers/controller.js" type="text/javascript"></script>
<script src="services/service.js" type="text/javascript"></script>
Naming & namespacing is important in any project. Try:
app.js:
var app = angular.module('myApp', ['sessionService', ...])...;
sessionService.js:
angular.module('sessionService', [])
.service('SessionService', ...);
Notice that the module name is in lower camel case while the service object itself is upper camel case. This will help you avoid namespace clashing. Hope that helps.