24 - Module - Configuration blocks & Run blocks
https://docs.angularjs.org/guide/module
What is a Module?
You can think of a module as a container for the different parts of your app – controllers, services, filters, directives, etc.
Why?
Most applications have a main method that instantiates and wires together the different parts of the application.
Angular apps don't have a main method. Instead modules declaratively specify how an application should be bootstrapped. There are several advantages to this approach:
- The declarative process is easier to understand.
- You can package code as reusable modules.
- The modules can be loaded in any order (or even in parallel) because modules delay execution.
- Unit tests only have to load relevant modules, which keeps them fast.
- End-to-end tests can use modules to override configuration.
- The empty array in angular.module('myApp', []). This array is the list of modules myApp depends on.
Recommended Setup
While the example above is simple, it will not scale to large applications. Instead we recommend that you break your application to multiple modules like this:
- A module for each feature
- A module for each reusable component (especially directives and filters)
- And an application level module which depends on the above modules and contains any initialization code.
( Uygulamamızı birden fazla module'e bölmemiz tavsiye edilir. Uygulamızdaki herbir özellik için ayrı bir module, herbir reusable component için ayrı bir modül, tüm modül'lerin üzerinde olup initialization kodlarını da içeren bir ana modül oluşturmak tavsiye edilir. )
Module Loading & Dependencies
A module is a collection of configuration and run blocks which get applied to the application during the bootstrap process. In its simplest form the module consists of a collection of two kinds of blocks:
- Configuration blocks - get executed during the provider registrations and configuration phase. Only providers and constants can be injected into configuration blocks. This is to prevent accidental instantiation of services before they have been fully configured.
- Run blocks - get executed after the injector is created and are used to kickstart the application. Only instances and constants can be injected into run blocks. This is to prevent further system configuration during application run time.
( Bir module, configuration ve run block'larından oluşur. Bu 2 çeşit block, bootstrap(önyükleme) işlemi sırasında uygulamaya uygulanır.
Configuration blocks : Provider'lar register edilirken ve konfigürason aşamasında çalışır.Injector yaratılmadan önce çalışır.Configuration block'lara sadece provider ve constant inject edilebilir. Bu, service'lerin tamamen configure edilmeden instantiate edilmesini önler.
Run blocks : Injector yaratıldıktan sonra çalışır. Uygulamayı hemencecik başlatmak için kullanılır. Run block'lara sadece instance'lar ve constant'lar inject edilebilir.
Bu, uygulama çalışırken yani uygulama run-time'da iken başka system configuration yapılmasını önler. )
angular.module('myModule', []).
config(function(injectables) { // provider-injector
// This is an example of config block.
// You can have as many of these as you want.
// You can only inject Providers (not instances)
// into config blocks.
// config block'lara sadece provider inject edilebilir, instance inject edilemez.
}).
run(function(injectables) { // instance-injector
// This is an example of a run block.
// You can have as many of these as you want.
// You can only inject instances (not Providers)
// into run blocks
// Run block'lara sadece instance inject edilebilir, provider inject edilemez.
});
Configuration Blocks
There are some convenience methods on the module which are equivalent to the config block. ( Modül üzerinde config method'unu kullanarak value, factory, directive, filter vs. inject edebiliriz. Alternatif olarak, convenience method'ları kullanarak da bunları inject edebiliriz. Aşağıdaki örneği inceleyelim :) For example:
angular.module('myModule', []).
value('a', 123).
factory('a', function() { return 123; }).
directive('directiveName', ...).
filter('filterName', ...);
// is same as
angular.module('myModule', []).
config(function($provide, $compileProvider, $filterProvider) {
$provide.value('a', 123);
$provide.factory('a', function() { return 123; });
$compileProvider.directive('directiveName', ...);
$filterProvider.register('filterName', ...);
});
When bootstrapping, first Angular applies all constant definitions. Then Angular applies configuration blocks in the same order they were registered. ( Ön yükleme yaparken, Angular önce constant tanımlarını yükler. Sonra register edildikleri sırayla diğer configuration block'larını yükler. )
Run Blocks
Run blocks are the closest thing in Angular to the main method. A run block is the code which needs to run to kickstart the application. It is executed after all of the services have been configured and the injector has been created. Run blocks typically contain code which is hard to unit-test, and for this reason should be declared in isolated modules, so that they can be ignored in the unit-tests.
( Run block, uygulamamızı başlatmak için çalıştırılan koddur. Java'daki main method'a en yakın en benzer şey Angular'daki run block'lardır. Tüm service'ler configure edildikten ve injector yaratıldıktan sonra run block'lar çalışır. Run block'ların içerdiği kodun genellikle unit-test'i zordur, bu nedenle run block'lar ayrı bir module'de declare edilmelidir, böylece run block'lar unit-test'lerde ignore edilebilir olur.)
Dependencies
Modules can list other modules as their dependencies. Depending on a module implies that the required module needs to be loaded before the requiring module is loaded. In other words, the configuration blocks of the required modules execute before the configuration blocks of the requiring module. The same is true for the run blocks. Each module can only be loaded once, even if multiple other modules require it.
( Bir module, diğer modülleri dependency'si olarak gösterebilir. Örneğin, A modülü dependency'si olarak B modülünü gösterdi diyelim: angular.module('A',['B']); -> Bu case'de önce B modülü, sonra A modülü load edilmelidir. Diğer bir deyişle, önce B modülünün configuration block'ları ve run block'ları, sonra A modülünün configuration block'ları ve run block'ları çalışır. Herbir modül sadece bir defa load edilebilir, birden fazla modül aynı modülü gerektirse bile. )
Asynchronous Loading
Modules are a way of managing $injector configuration, and have nothing to do with loading of scripts into a VM. There are existing projects which deal with script loading, which may be used with Angular. Because modules do nothing at load time they can be loaded into the VM in any order and thus script loaders can take advantage of this property and parallelize the loading process.
( Modüller, $injector configuration'ını yönetmenin bir yoludur, ama script'lerin VM'e yüklenmesiyle ilgili yapacak br şeyleri yoktur. Angular'daki script loading işini halletmek için çalışmalar yapılan projeler mevcuttur. Çünkü modüller VM'e herhangi bir sırayla yüklenebilir, dolayısıyla script loader'lar bu özelliğin avantajını kullanıp loading işlemini paralel hale getirebilir. )
Creation versus Retrieval
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.
( angular.module('myModule', []) -> myModule isimli bir modül yaratılır ve bu isimli bir modülü zaten varsa bu modülün üzerine overrite edilir, dolayısıyla altta kalıp ezilen modülün tüm configuration'ları da silinir gider.
angular.module('myModule') -> varolan bir modülü retrieve eder. )
var myModule = angular.module('myModule', []); // myModule isimli bir modül yaratılır.
// add some directives and services
myModule.service('myService', ...); // myModule modülüne service inject edlir.
myModule.directive('myDirective', ...); // myModule modülüne directive inject edilir.
// overwrites both myService and myDirective by creating a new module
var myModule = angular.module('myModule', []); // myModule isimli yeni bir modül yaratılır. Eski modül ezilmiş olur, eski modül ile ilgili tüm bilgiler de silinip gitmiştir, bu modüle inject edilmiş olan myService ve myDirective de silinip gitmiştir.
// throws an error because myOtherModule has yet to be defined
var myModule = angular.module('myOtherModule'); // error olur çünkü bu isimli bir modül daha önce yaratılmamıştır.
25 - helloAngular25
http://www.angularjshub.com/examples/modules/configurationrunphases/
A module gives us a config and a run function.
The config function is useful to configure providers before they're actually created. In the example, we register PersonManager as a provider (with the personManagername). The object returned by the PersonManager function contains the $get method to create a provider instance and a setFullNameSeparator method. The latter is useful to configure the provider instance before it actually gets created and it sets thefullNameSeparator that will be used in the getPersonFullName function.
It's important to note that the config function can accept some providers as parameters through Dependency Injection, but the name of the function arguments must be written with the Provider suffix (in the example we write personManagerProvider as argument of the config function because we want the personManager provider injected).
The run function could be useful to perform any kind of initialization after the objects instances registered in the module have already been created.
We can have multiple config and run functions in the same module.
No comments:
Post a Comment