7 deadly sins of AngularJS

AngularJS is undoubtedly one of the most powerful platforms for developing for web & mobile, yet there are some features that has to be used carefully. Below is the list of some mistakes that developers often make during the use of AngularJS functionalities, some learned lessons and solutions to them.

1. Manipulating DOM through the controller
It’s legal, but must be avoided. Controllers are the places where you define your dependencies, bind your data to the view and make further business logic. You can technically manipulate the DOM in a controller, but whenever you need same or similar manipulation in another part of your app, another controller will be needed. So the best practice of this approach is creating a directive that includes all manipulations and use the directive throughout your app. Hence, the controller leaves the view intact and does it’s job.
In a directive, linking function is the best place to manipulate the DOM. It has full access to the scope and element, so using a directive, you can also take the advantage of reusability.

2. Data binding in transclusion
AngularJS is famous with its two-way data binding. However you may encounter sometimes that your data is only one-way bound inside directives. Stop there, AngularJS is not wrong but probably you. Directives are a little dangerous places since child scopes and isolated scopes are involved. Assume you have the following directive with one transclusion


And inside my-transclusion, you have some elements which are bound to the data in the outer scope.

        <input ng-model="name">

The above code will not work correctly. Here, transclusion creates a child scope and you can get the name variable, right, but whatever change you make to this variable will stay there. So, you can truly acces this variable as $parent.name. However, this use might not be the best practice. A better approach would be wrapping the variables inside an object. For example, in the controller you can create:

$scope.data = {
    name: 'someName'

Then in the transclusion, you can access this variable via ‘data’ object and see that two-way binding works perfectly!

<input ng-model="data.name">

Not only in transclusions, but throughout the app, it’s a good idea to use the dotted notation.

3. Multiple directives together
It is actually legal to use two directives together within the same element, as long as you obey by the rule: two isolated scopes cannot exist on the same element. Generally speaking, when creating a new custom directive, you allocate an isolated scope for easy parameter passing. Assuming that the directives myDirA and myDirB have isoleted scopes and myDirC has not, following element will be valid:

<input my-dir-a my-dirc>

whereas the following element will cause console error:

<input my-dir-a my-dir-b>

Therefore, directives must be used wisely, taking the scopes into consideration.

4. Misuse of $emit
$emit, $broadcast and $on, these work in a sender-receiver principle. In others words, they are a means of communication between controllers. For example, the following line emits the ‘someEvent’ from controller A, to be catched by the concerned controller B.

$scope.$emit('someEvent', args);

And the following line catches the ‘someEvent’

$scope.$on('someEvent', function(){});

So far everything seems perfect. But remember that, if the controller B is not invoked yet, the event will not be caught, which means both emitter and receiver controllers have to be invoked to get this working. So again, if you are not sure that you definitely have to use $emit, building a service seems a better way.

5. Misuse of $scope.$watch
$scope.$watch is used for watching a variable change. Whenever a variable has changed, this method is invoked. However, one common mistake done is changing the variable inside $scope.$watch. This will cause inconsistency and infinite $digest loop at some point.

$scope.$watch('myCtrl.myVariable', function(newVal) {

So in the above function, make sure you have no operations on myVariable and newVal.

6. Binding methods to views
This is one of the deadlisest sins. AngularJS has two-way binding, and whenever something changes, the views are updated many many times. So, if you bind a method to an attribute of a view, that method might potentially be called a hundred times, which also drives you crazy during debugging. However, there are only some attributes that are built for method binding, such as ng-click, ng-blur, ng-on-change, etc, that expect methods as paremeter.
For instance, assume you have the following view in your markup:

<input ng-disabled="myCtrl.isDisabled()" ng-model="myCtrl.name">

Here you check the disabled status of the view via the method isDisabled. In the controller myCtrl, you have:

vm.isDisabled = function(){
        return true;
        return false;

In theory, it may seem correct but technically this will cause an overload, since the method will run countless times. In order to resolve this, you should bind a variable. In your controller, the following variable must exist:


You can initiate this variable again in the activation of the controller

        vm.isDisabled = true
        vm.isDisabled = false

If the condition is not stable, you may bind this to another event. Then you should bind this variable to the view:

<input ng-disabled="myCtrl.isDisabled" ng-model="myCtrl.name">

Now, all the attributes of the view have what they expect and the methods will run only whenever needed.

7. Not using Angular’s functionalities
AngularJS provides great convenience with some of its functionalities, not only simplifying your code but also making it more efficient. Some of these features are listed below:

  1. angular.forEach for the loops (Caution, you can’t “break;” it, you can only prevent getting into the body, so consider performance here.)
  2. angular.element for DOM selectors
  3. angular.copy: Use this when you should not modify the main object
  4. Form validations are already awesome. Use dirty, pristine, touched, valid, required and so on.
  5. Besides Chrome debugger, use remote debugging for mobile development too.
  6. And make sure you use Batarang. It’s a free Chrome extension that you can easily inspect scopes
  7. .



Genç yazılımcıların kendilerini geliştirmek ve Eteration ailesine katılma fırsatı tanımak için bu programı oluşturduk.

Merak ettiğiniz bazı soruların cevaplarını aşağıda bulabilirsiniz.

Kimler katılabilir?

Basit bir şekilde herkes, ancak sınıfa sınırlı sayıda kişi alabileceğimiz için katılımcıların CV leri değerlendirilip eğitimden en çok fayda sağlıyabilecek kişilere öncelik tanıyacağız.
Mühendis olmak zorundamıyım?

Hayır. CVniz yazılımla ilgili olduğunuzu gösteriyor ise eşit şansa sahipsiniz.
CVim çok kısa hiç deneyimim yok, şansım nedir?

Eğitimin amacı bu açığınızı kapatmak ve sizi bu sürede değerlendirmektir.
Eğitimde hangi konular olacak?

İleri Java™
Tasarım Kalıpları (Design Patterns)
Servis Tabanlı Mimari (SOA)
JavaScript ve Modern WEB 2.0 Teknolojileri
Yazılım Hayat Döngüsü ve Ekip olarak Geliştirme Teknikleri
Mobil Teknolojiler
Workshoplar olucak mı? Uygulama yapıcak mıyız?

Evet ve Evet. Eğitim süresince öğrettiğimiz her konuda değişik örnekler yaparak kendinizi gösterme fırsatı tanıyacağız.
Eğitim nerede olacak?
İTÜ – ARI Teknokent 3.
Eğitim Ücretli mi?
Eğitim yerine ulaşım kolay mı?
ARI 3, Metro – İTÜ durağından yürüyerek 15 dk uzaklıktadır.

Hybrid Mobile App, Hybrid Communications Part 1

In your Android application, if you are using webView or cordovaWebView, you are probably using JavaScript in your HTML pages. However, using HTML pages and native pages separately will come in handy up to a point. At some time, it might be needed to make data transfer or function calling between those pages. In Android, native pages are written in Java while web pages use HTML, JavaScript etc.. In this post we are going to run a JavaScript function from Java, and send some data from Java to JavaScript!! More specifically, let’s first achieve a page transition of HTML pages by using only native Android buttons.

Call JavaScript function from Java

In the middle of our app, there is a webView, which is all the hybrid part of the app. In order to get this challenge to work, we got to define some function in JavaScript. Let’s add two divs, which will be used as two separate pages:

        <div id="firstpage">//contents of page one</div>
        <div id="secondpage">//contents of page two</div>

Then, hide the second page in CSS file:


Now it’s time to write our main function which will do the opposite, i.e., hide the first page and show the second one. The snippet below right does it:

        <script type="text/javascript">
        function secondPage(){

The practice made here is actually the working mechanism of JQuery Mobile. In JQuery Mobile also pages are located in one HTML page which all have unique ID’s as separate divs. However the magic of “data-role=page” makes it through and no need for hide() or fade() remains. Anyway, we’ve just made this by only JQuery and now all we have to do is to trigger this. Calling this JavaScript from Java page is as follows;


As you see, it is the same as loading an URL to our webView. But we only call a function by this method. In the first image below, the hybrid “data” page is opened, and in in the second one, the hybrid “plugin” page is opened by Android buttons:



Send data from Java to JavaScript

This is a little bit harder than calling a function. Because we have to create a JSON object and transfer it. As you see in the images, I created an EditText in Android to enter a data, which will be sent to the hybrid window. First we have to get the input as a string, then convert to JSON. And we need a function that will read this JSON on JavaScript section. Let’s first write this simple function, assuming we will generate a JSON object with on field “Value”. This function will also set the text named “datatransfer” in HTML page with the data entered:

        function setJson(Jsonobj)
            var log="";	
            log = Jsonobj.Value ;
            document.getElementById("datatransfer").innerHTML = "Sent string: " + log;

Let’s then generate the JSON object. In more detail, let’s add this code that converts the data from EditText named “text” inside the listener of the “send” button:

        send.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                String s=text.getText().toString();
                JSONObject jObject = new JSONObject();
                }catch (JSONException e) 

What we did here is, i.e. what happened when “send” button is pressed is converting this data to JSON and receive it by the function written in JavaScript. Now we have to ignite it. We should call this function setJson() wherever we want in our HTML page:

        <p id="datatransfer" onclick="setJson()">Sent string:</p>	

Let’s visualize what we have done so far. In the first image, the word “hello” is entered to the EditText, and in the second image, when the user clicks on the text “Sent string”, it’s value changes by appending the string entered to “Sent string: hello”:



Google Material Design

Google recently introduced their new theme called “Material Design”. With this new theme, Google came up with some fundamental changes increasing app-user interaction. Throughout the development of this theme, the point has been to attach a material appearance to the apps and realistic surface view to the pages. Let’s mention a few of Google’s principles and then get into some fantastic details.

1. “Material is the Metaphor” Google aimed to provide users the feel of motion and add a material dimension to the app, based on the influence of pen and paper.

2. “Tangible Surfaces” Google aimed to expose the edges and surfaces to reveal the concrete features.

3. “Dimensional Affordances” Google aimed to feature the dimension, manipulating the light that builds the dimension, hence manipulating the shadow.

4. “Emphasize Actions” Google aimed to boost the significance of functional interface elements in the app, hence increase the user interaction.

5. “User-Initiated Change” as mentioned before, Google aimed to let the user dominate over all the actions in the app.

Now it’s time to review the changes brought with this theme. You can access the entire documentation of the theme from Google’s page . Below are the outstanding ones among them.

First of all, as I implied in the 3rd principle, Google is emphasizing the significance of lights. Here we adopt a convention that effective use of shadows will better enhance the feel of overall lighting. While it’s a piece of cake to adjust the shadows in Photoshop or CSS, it is no easy task in Android’s former themes. For this fact, Google added a “z” dimension over x-y. This z dimension determines how above our View will look at the Layout that it’s in:


Simply enough, with one line of code we can adjust the height of elements.


Aside from that, Google has suggested some conventions addressing user interaction. For instance, in the case when user clicks one of the buttons in a group, that button had better rise above to provide with a more realistic and augmented interaction. Similarly the wave effect upon user’s tap on a certain point, which Google designed with the influence of ink, can help build a better interaction. Also, a new view should open originating from the point the user tapped instead of the center of screen. Below are respectively the demonstrations of these examples;

What is more, Google added two new UI Widgets featuring Material Design properties. One of them is the RecyclerView, a more enhanced ListView, and the other one is CardView, which forms the basis of Material Design principles. RecyclerView is a Widget which has a better performance for dynamically changing lists. And CardView is a Widget that you can create a new layout inside. CardView has some XML features like shadow or border radius. Google’s suggestion for transition between activities is constistency. That means, it would create a negative impression for the app if the screen totally changes in activity transitions. There is a great video Google prepared for this. As seen below, the user is initially in a page where a table of images make up the screen. Upon selecting one, the new activity starts with joining new required features while bringing the image selected to the top. This way, the context change will not disturb the user.

In the end, Google presented this Android design theme as a result of their elaborate work. Even though there may be a labyrinth of codes running in the background (for example Google mentioned in I/O that, they formed the shadows taking light from various sources and then merging them), what is reflected to the user is merely a simple appearance. And it is now pretty easy to utilize this simplistic and realistic theme in our apps.

Developing iPhone/iPad Applications with Objective-C

iPhone and iPad are popular platforms revolutionizing the mobile platforms. While these platform offer standart buildin gps, connectivity, multitouch controls and accelerometer, they also implement a unique and yet different programing model. To build any application and publish them to famous App Store, developers need to code in Objective-C. Objective-C also comes with a full featured devolopment IDE called XCode. Besides the coding facilities in XCode, another tool is also integrated to design and build user interfaces, the Interface Builder.

In this seminar you will build applications for the iPhone/iPad platform, including:

iOS Technologies
Developer Tools: XCode Environment, features and tools
Building User Interfaces

Tarih : 7 Şubat 2014 / 13:30-17:00
Yer :
İTÜ Ayazağa Kampüsü ARI 3 Teknokent Konferans Salonu 34469 Maslak İstanbul (İstinye Park Karşısı)

Konuşmacı: Ecem Dalgıç
Katılım ücretsizdir.
Kayıt Gereklidir

Leap Motion: A small step or a giant leap?

I’ve been playing with Leap Motion for the last few days and here are my first impressions with this tiny device.

First, this is a great piece of hardware and there are tons of things to be done with it. However it doesn’t really have compelling software accompanying it and currently not really going beyond a geek device but still it is a great geek device!! Here are my feelings in a more visual way 🙂

As you might see, after the shipment my package moved to Paris from Czech Republic instead of coming to Istanbul. The unpacking and installiation was quite ‘appleish’. The intro and the included demos were very impressive. The first thing I expected was an out of box replacement for the mouse which this device is definitely not. After a while playing with all the apps, I realized currently most apps are just mimicking a mouse experience instead of creating a unique one for Leap. Leap motion is great device offering a new way of controls and it must be treated that way, just like the iphone first released.

The accuracy of the controller is great! You may realize it loses some finger when you do sharp moves but the accuracy is great for any idea and any app, well may be not for flying a real plane. The gem of this device is the sdk. It is designed in a beautiful way and the more you dig into api, the more you want to write code on it. The APIs are implemented and designed in a beautiful way.

After downloading the sdk from leap’s website all you need to do is to follow the guidelines to set up your favourite development environment.

I built some sample apps using Java so I’ll continue with the provided Java SDK. Looking at the sample app provided with the sdk, the first thing you will notice is you need to create a class which extends the com.leapmotion.leap.Listener class. Next create another class with the main method and create a  com.leapmotion.leap.controller.Controller and add your listener to the controller you just created.

// your custom listener class

SampleListener listener = new SampleListener();

Controller controller = new Controller();

// add your listener to the controller


The custom listener class which extends Listener needs to implement several methods.

class SampleListener extends Listener {
public void onInit(Controller controller) {
//can check if controller.isConnected() and decide how to proceed
public void onConnect(Controller controller) {
//this method is invoked after your code is connected to the device
//it is time to decide what to listen. You can register for swipe, tap, circle… etc
public void onFrame(Controller controller) {
// Get the most recent frame
Frame frame = controller.frame();
//this is where the fun begines, you can how many hands or fingers in the frame
//and what they are doing such as moves, gestures…
//lets see how many fingers are there in the frame
if (!frame.hands().empty()) {
Hand hand = frame.hands().get(0);
FingerList fingers = hand.fingers();
System.out.println(“Fingers ” + fingers.count());
//checking gestures is not much different
GestureList gestures = frame.gestures();
for (int i = 0; i < gestures.count(); i++) {
Gesture gesture = gestures.get(i);
if (gesture.type()==Gesture.Type.TYPE_SWIPE){
SwipeGesture swipe = new SwipeGesture(gesture);
if (swipe.state()==swipe.state().STATE_START){
float x=swipe.direction().getX();
float y=swipe.direction().getY();
float z=swipe.direction().getZ();
System.out.println(“Swipe started at: “+ x +”, “+ y +”, “+ z);
if (swipe.state()==swipe.state().STATE_STOP){
float x=swipe.direction().getX();
float y=swipe.direction().getY();
float z=swipe.direction().getZ();
System.out.println(“Swipe finished at: “+ x +”, “+ y +”, “+ z);


As you might see its pretty easy to detect hands, fingers and gestures. Combining those Java’s Robot class you may end up with a simple mouse replacement app for Leap Motion or integrate some gestures to your favourite IDEs debugger to debug your code with simple gestures.

Leap Motion is a giant leap as a hardware unit which currently comes with a small step in software. However the opportunities are endless and what can be done with this little device is all up to your imagination!

Android API Fun

Android team have a good sense of humor and adding funny method or variable names to the API since from the first day.
Below I compiled a list I have came across don’t hesitate to post the ones I’ve been missing.

public static final float GRAVITY_DEATH_STAR_I

This constant is a member of  SensorManager class since api level 1 and gives the estimated gravity of the first Death Star (in Empire units!).

Constant Value: 3.5303614E-7

public static final float GRAVITY_THE_ISLAND

This constant is also a member of SensorManager class since api level 1 and gives the gravity on the island. Which island you ask? The lost island (from the TV series Lost).

Constant Value: 4.815162

public static int wtf (String tag, Throwable tr)

wtf method is a member of Log class since api level 8 and luckily doesn’t stand for the f word. According to the Java Doc and developer.android.com wtf stands for “what a terrible failure”.

public static boolean isUserAMonkey ()

isUserAMonkey method is a member of ActivityManager class since api level 8. This method can be used to determine if the user is a real user or an automated test (well, unless you are developing apps for real monkeys).

public void fyiWillBeAdvancedByHostKThx ()

fyiWillBeAdvancedByHostKThx method is a member of AdapterViewFlipper since api level 11. This method lets AdapterViewFlipper to prepare by no longer advancing its children. Instead it indicates it will be automatically advancing the the views of the AdapterViewFlipper to AppWidgetHost.

public boolean isUserAGoat ()

isUserAGoat method is a member of UserManager since api level 17 and it simply return true if the user is goat 🙂 and according to the api documentation “Used to determine whether the user making this call is subject to teleportations”. Basically the method is an easter egg and unless you are messing up the interface it will return false.

Thats my collection so far, feel free to add yours or stay tuned for the upcoming version of the Android to bring some new ones.

Hybrid Mobile Uygulama Geliştirme Semineri-Ankara

Native mobil uygulama ilgili cihaza özgü dil ile yazılan (örneğin iOS için Objective-C, Android için Java) ve sadece ilgili cihazda çalışacak şekilde derlenen mobil uygulamadır. Native uygulamalar cihazın tüm fonksiyonlarına erişebilirler.

Mobil Web Uygulaması ise HTML5, CSS3 ve JavaScript ile yazılmış ve tarayıcı üzerinde çalışan uygulamadır. Web uygulaması, bir web server üzerinden yayınlanan web sayfaları şeklinde düzenlenir. Bu şekildeki bir uygulama cihazın sınırlı sayıda fonksiyonuna erişebilir.

Hybrid mobil uygulama ise bu iki kavramı birleştirmekte ve cihaz fonksiyonlarına  JavaScript ve Html5 ile erişilebilmesini sağlamaktadır.

Hybrid mobile uygulama kavramlarının anlatılacağı ve demolar eşliğinde gerçekleştirilecek bu seminerde aşağıdaki başlıklar üzerinde durulacaktır:

  • HTML5
  • Javascript
  • Phonegap
  • Design for mobile
  • Debugging
Tarih : 11 Temmuz 2013 / 13:30-17:00
Yer : Hilton Oteli 

Tahran Caddesi No:12 Kavaklidere Ankara

Katılım ücretsizdir.Kayıt İçin:



Murat Yener

Murat Yener, completed his Bs and Ms degree at Istanbul Technical University. Took part in several projects still in use in ITU Informatics Institute. Worked in Isbank’s Core Banking exchange project as J2EE developer. Designed and completed several projects still on market by Muse Systems. Worked in TAV Airports Information Technologies as Enterprise Java & Flex developer. Worked in HSBC as Project Leader responsible for Business Processes and Rich client user interfaces. Currently employed at eteration A.S. working on mobile platforms and Rich Internet Applications

Effective Agile Java Development

19-20 Haziran  tarihlerinde Eteration Academy olarak “Effective Agile Java Development” konulu bir eğitim düzenlemekteyiz. Eğitimin detaylarını aşağıda bulabilirsiniz.


0212 328 08 25

Effective Agile Java Development

This is an advanced and pragmatic workshop which will cover the latest agile development practices and tools that are used in Java™ Development.


This course is an advanced pragmatic workshop that teaches latest agile development practices and tools. It provides practical experience across the full scope of agile development activities, including requirements gathering, acceptance test driven development (ATDD), behavior driven development (BDD), test driven development (TDD), agile architecture and design, clean coding practices, continuous integration and agile development teamwork and collaboration. Students will build a small application from the ground up using ATDD and TDD practices and getting exposure to innovative tools such as Maven, Jenkins/Hudson, Subversion, JUnit, Mock Testing, Selenium, Spock, JBehave.

Automated testing techniques are covered in detail in this workshop. Indeed, learning how to write more effective tests is an excellent way to write better designed, more maintainable and more reliable code. The course covers fundamental TDD and BDD practices for Java Developers. Continuous Integration, or CI, is a cornerstone of modern software development best practices.

Topics Include:

  • Principles of Behavior Driven Development (BDD) and Agile Requirements:
    An introduction to the fundamental concepts and motivations behind Behavior-Driven Development and related techniques. BDD principles can be applied to requirements gathering and analysis activities. In this module, we learn how techniques such as Acceptance Test Driven Development, Executable Specifications and Feature Injection can significantly improve the quality, reliability and relevance of the application being built, and provide a much better traceability back to, and understanding of, the core business requirements. The course uses high-level BDD tools such as JBehave to build a working set of executable specifications from the ground up.
  • Agile Architecture
    Architecture is just as important in Agile projects as it is in conventional software projects. In this module we discuss the key principles of Agile architecture and design, including the role of architecture in Agile projects, when, how and by whom architecture is specified, implemented and validated.
  • Test Driven Development
    Test Driven Development (TDD) is a key Agile development practice, and is arguably the single most effective way to improve code quality and reliability. In this section, we focus on core TDD and BDD practices at the coding level, and learn how to effectively apply BDD practices in Java both by using advanced JUnit features and testing approaches such as Mock testing. Unit testing vs. Integration testing is covered. Web testing frameworks such as Selenium is introduced. Specific BDD libraries such as Spock are covered as well as topics such as good test design and organization and testing databases.
  • Refactoring and Clean Coding
    Refactoring is an essential part of maintaining high code quality and reducing maintenance costs. And a solid understanding of clean coding principles is vital to writing maintainable and understandable code. This course explores refactoring principles and patterns, and also discusses effective techniques to help make your code clean, readable and highly maintainable.
  • Team Programming and Collaboration
    Team collaboration and communication techniques are discussed along with source code control and version management systems. Subversion and distributed systems such as Git are covered.
  • Continuous Integration and Delivery
    This module covers how Continuous Integration and Delivery practices can be used to enhance team communication and accelerate feedback. Jenkins, an Open Source Continuous Integration tool, is by far the most popular . This course will teach you how to build a powerful and robust CI infrastructure using Maven and Jenkins and automating the build process with Jenkins and provide a wealth of best practices and real-world tips

Developing Hybrid Mobile Applications

26-28  Haziran ve 22-24 Temmuz tarihlerinde Eteration Academy olarak Developing Hybrid Mobile Applications konulu eğitimleri düzenlemekteyiz. Eğitim bilgilerine aşağıdan ulaşabilirsiniz:

Detaylı bilgi ve kayıt için


0212 328 08 25

Developing Hybrid Mobile Applications

Hybrid development combines the best (or worst) of both the native and HTML5 worlds. Hybrid apps primarily built using HTML5 and JavaScript, that is then wrapped inside a thin native container that provides access to native platform features. PhoneGap is an example of the most popular container for creating hybrid mobile apps and enabling native apis to be used from javascript.

For the most part, hybrid apps provide the best of both worlds. Existing web developers that have become gurus at optimizing JavaScript, pushing CSS to create beautiful layouts, and writing compliant HTML code that works on any platform can now create sophisticated mobile applications that don’t sacrifice the cool native capabilities. In certain circumstances, native developers can write plugins for tasks like image processing. Apps can package HTML and JavaScript code inside the mobile application binary, in a manner similar to the structure of a native application. In this scenario you use REST APIs to move data back and forth between the device and the cloud


Topics Include

  • Modelling Hybrid Mobile UI
  • Structure of Hybrid apps
  • Overview of Mobile Frameworks
  • HTML5, CSS3 and Javascript
  • PhoneGap/Apache Cordova
  • Development Setup
  • Best Mobile Design Practices
  • Useful Metatags
  • Working with Local Data
  • Working with Remote Data
  • Working With Media
  • Integration with Device APIs
  • Debugging
  • Offline Apps
  • Single Sourcing
  • Simple Security for Hybrid Mobile Applications