(The API reference given here: http://docs.angularjs.org/api is divided into several modules.
Each module has it's set of directives, services, filters.
I want to know what do these terms(i.e. directive , service, module etc.) mean and what role will they play in a typical web-app made using angularJS ?
"Service" is explained at https://docs.angularjs.org/guide/services.
Angular services are substitutable objects that are wired together using dependency injection (DI). You can use services to organize and share code across your app.
"Directive" is explained at http://docs.angularjs.org/guide/directive.
Directives are a way to teach HTML new tricks. During DOM compilation directives are matched against the HTML and executed. This allows directives to register behavior, or transform the DOM.
"Module" is explained at http://docs.angularjs.org/guide/module.
Most applications have a main method which instantiates, wires, and bootstraps the application. Angular apps don't have a main method. Instead modules declaratively specify how an application should be bootstrapped.
I'm just including summaries in this answer. You probably will want a lot more detail, in which case follow the links and check out the docs.
Related
I would like to have the following architecture for a single page application:
each page or a widget can be an independent reusable module (reusable for this project however it might be used on others as well)
there will be a core application that will use all those external modules. the core application will be able to communicate with the modules and vice versa.
each module can be written in any technology (react, angular, vanilla)
each module should be deployed independently (something like dynamic-lazy-loading)
the core app should be responsible for the config of the modules (api urls etc)
I have not been able to think about a good way of achieving everything i stated nor find anything on google.. but i might be missing the keyword for such architecture.
Any ideas, best practices or just some relevant input? thanks!
after researching this subject bit more, the architecture that i think that will match my requirements is based on web-components (can read more about it here - http://webcomponents.org/ and would recommend using a library like polymer).
the advantage of a web-components is that they can hold everything they need in them (html,css,ajax requests, basically anything that can be in a html document) and using shadow or shady dom imply those components into the document just like we would have done once with iframes.
by using this architecture, you will be able to migrate your components without caring about the wrappers technology (angular 1/2,react, knockout, vanilla js etc). for example, in order to use it in angular, we just wrap a component with a directive and thats it.
the other bonus is that you can even host those components in different servers and therefore deploy them separately.
I started using AngularJS not long ago and am practice to keep the Controller slim. My understanding of AngularJS' dependency injection is that it makes external JS code available in the controller.
I am also new to RequireJS, for I want to reduce loading time. I have done some reading but I am still confused. My impression is that AngularJS' dependency injection works similarly to RequireJS - loading functions on the fly when I need them.
Am I on the right track or am I completely wrong?
No, they are quite different. Angular DI involves components. Examples of Angular components are factories, directives, and filters. Angular provides several ways to inject a component into something else, but is not concerned about how to load these components or where they are stored. They could be all stored in a single .js file, in multiple files, or inline in the HTML document. The general assumption is that each component is loaded at page load, but that might not be the case.
RequireJS is a file and module loader. Each individual module is in it's own file. RequireJS uses ajax methods to load modules on demand as required.
Where Angular is more concerned with the IOC portion of the DI picture, RequireJS is more focused on file loading, data transfer, and memory conservation portions.
It is possible, and common, to use RequireJS to enhance the DI functionality of Angular, but unless it's a large scale app with hundreds of script files, it's normally not necessary.
I'm wondering if it possible to include a .config section just once and that it affects all modules. Question is related with caching requests in IE, and since I don't want to do this in every module that is making requests, I was wondering if it possible to include a .config section globally...
I've googled quite a lot, look in the Angular tutorial, looked at the NG-book and found nothing on this regard...any idea?
Thanks!
EDIT: Just added this as a config in the module included in all controllers and it works
During bootstrap all modules are combined into one application and a single injector is created for it. Services in Angular are singletons in the sense that they are only created once per injector.
This means that there is only once $http service created and its configuration will be global for the entire application.
How can I include JavaScript libraries on a controller basis using Angular?
For example, I'm using morris.js and ckeditor in this project which require nearly 1MB (dev versions) of resources even though they are only used on two pages.
It's obviously a waste to include these within the entire single page application by referencing them in the index.html file.
Is there a way to use Angular Dependency Injection to include these in a controller? I'm guessing using a service or a directive but I'm not sure how those components would look in this case.
You are better off using require.js to load these modules in your SPA based on when you need them.
I used the angular seed (with the file index-async.html(dependencies loaded asynchronously)) in order to start my web project, but my controllers would need some reorganisation. I have now 3 files full of controllers (700+ lines). Is there an elegant way to load my controllers if I reorganize them in 10 files (and more in the future).
Also, more files means less merging conflicts (Yeah!!!)
Thx in advance
I make extensive use of the angular.module().controller() syntax to group my controllers by module, which has greatly improved the organization of my angular code. As an added benefit, your controllers are no longer globally name-spaced functions.
You can read more in the Module API documentation.