30 - What is injector in Angular.js
There is one injector per Angular application. Normally you don't need to interact with it directly. The injector is key to making dependency injection work in Angular.
Module methods such as factory, service, directive, etc. register these items with the injector. When you inject something (e.g., a service into a controller),
the injector will lookup and then instantiate the service (if it wasn't instantiated already -- if it was, it will return the already-instantiated object).
31 - Building Custom AngularJS Filters
https://scotch.io/tutorials/building-custom-angularjs-filters
Birazdan kendi AngularJS filter'larımızı tanımlamayı öğreneceğiz. module.controller() diyerek controller tanımladığımızı hatırlayalım, benzer şekilde module.filter() diyerek bir custom filter tanımlayabiliriz.
A filter is very similar to an factory or service in many regards but has the added advantage of behaving on a global scope once created. You can invoke a filter on both the data binding in your html or directly inside of your controller or directive by using the $filter service. ( Filter'lar, service'lere ve factory'lere birçok bakımdan benzerler, bunlardan farklı olarak şu avantaja sahiptirler : Bir filter yaratıldıktan sonra global scope'dadır.?? Bir filter'ı HTML'deki data binding'den çağırabiliriz, veya, bir controller'ın veya bir directive'in içerisinden $filter service'i kullanarak da çağırabiliriz. )
( module.filter() 2 tane parametre alır. 1.parametre filter ismidir, 2.parametre anonymous fonksiyondur, bu fonksiyon filter'daki asıl işi yapacak olan başka bir anonymous fonksiyon return eder. )
app.filter('myFilter', function() {
return function(input, optional1, optional2) {
var output;
// Do filter work here
return output;
}
});
custom filter example 1
Filter'ı uyguladığımız sayı 1 ise 1st, 2 ise 2nd, 3 ise 3rd return eden bir filter yazalım:
Bu filter'ı view'lerimize şöyle uygularız :
{{ 25 | ordinal }}
will yield 25th. View'e 25th yazar bu satır.
Bu filter'ı bir string'e uygularsak bu filter parametre olarak aldığı string'i aynen return eder. Bu örnek Angular35_customFilter klasöründe implement edilmiştir.
custom filter example 2 (helloAngular36_customFilter2 )
The custom filter will capitalize either the first letter or a letter we specify. The additional parameter will specify which letter to capitalize, if no additional parameter is passed than the first letter will be capitalized. (Şimdi yazacağımız filter'ı sadece bir string parametresi vererek çağırırsak bu string'in ilk harfi büyük harf yapılır, bu filter'a 2.parametre olarak bir sayı verirsek, bu string'in bu sayı index'indeki harfi büyük harfe çevrilir, string return edilir. )
Bu filter'ı HTML template'de aşağıdaki gibi çağırdık diyelim. Bu satırı, capitalize isimli filter'a parametre olarak sırayla 'onomatopoeia' ve 3 vererek çağırdık, şeklinde yorumlayabiliriz : {{ 'onomatopoeia' | capitalize:3 }}
custom filter example 3 (helloAngular37_customFilter3 )
Önceki örneklerde, filter'ları single item'lara uyguladık. Şimdiki örneğimizde ise filter'ı bir collection'a uygulayacağız. Bu örnekte, bir listeye filter uygulayacağız, belirli bir kritere uyan listedeki elemanları bulup return edeceğiz. Elimizde programlama dillerinin bir listesi olsun ve bu dillerden sadece static olanları gösterelim.
Custom filter example 4 (helloAngular38_customFilter4 )
Fiyat miktarının sağına veya soluna symbol koyabileceğimiz bir custom filter yaratalım. Amerikada $ sembolü fiyattan önce yazılır, ancak bazı ülkelerde sembol fiyattan sonra yazılır.
For our custom filter, we will allow the user to pass two parameters. The first will be the symbol or string they want to use to denote the currency, and second a true orfalse boolean value that will determine whether the symbol is added before or after the amount. We will default the symbol to the dollar sign ($) and the position to before of the amount so that if those aren’t passed the filter still works. One thing to note when dealing with filters that support multiple parameters: you must pass the parameters in the correct order! (Yaratacağımız custom filter 2 tane parametre alacak. 1.parametre fiyatın yanında göstermek istediğimiz semboldür, default sembol $ 'dır. 2. parametre true veya false 'dur, bu parametrenin default değeri true'dur, böyle bir parametre vermezsek filter'a bu parametrenin default değeri olan true kullanılır ve sembol fiyatın soluna yazılır, bu parametreye false verirsek sembol fiyatın sağına yazılır. )
Question : Custom bir filter yarattık. Bu filter'ı controller'ımız içerisinde nasıl kullanabiliriz? (http://stackoverflow.com/questions/14302267/how-to-use-a-filter-in-a-controller )
Önce $filter service'i controller'ımıza inject ederiz :
function myCtrl($scope, $filter)
{
}
Sonra controller içerisinde, tanımladığımız custom filter'ı çağırırız :
$filter('filtername');
If you want to pass arguments to that filter, do it using separate parentheses: (Eğer bu filter'a argument vermek istiyorsak, bunu aşağıda gösterildiği gibi ayrı bir parantez ile yaparız.)
function myCtrl($scope, $filter)
{
$filter('filtername')(arg1,arg2);
}
Özetle, custom filter'ı HTML template'den ve javascript'den çağırmak için için farklı sentax'lar kullanırız :
In templates, you can separate filter arguments by colons.
{{ yourExpression | yourFilter: arg1:arg2:... }}
From Javascript, you call it as
$filter('yourFilter')(arg1, arg2, ...)
No comments:
Post a Comment