Neden bir Javascript uygulama çatısı?

Teknik kısıt yok ama ...

Verimlilik ve sürdürülebilirlik önemli

“İnsanlar için kod yazın, makinalar için değil.”

AngularJs nedir?

AngularJs nedir?

• Bir javascript uygulama çatısı
• MVC tasarım deseni kullanır
• MIT lisanslı

AngularJs kafası

• HTML statik ancak artık dinamik olmalı
• Declarative UI
• Modüler geliştirme ve yeniden kullanılabilirlik
• Kaygıları ayırarak daha temiz modelleme

Dinamik HTML

Dinamik HTML

function ProfileCtrl($scope) {
  $scope.reset = function() {
    $scope.user = {};
  };

  $scope.getUser = function() {
    $scope.user = {...};
  }
}
            

  

    Kullanıcıyı getir
    Reset
    
Bir şey yok...
    

      
{{skill.name}}
    
  

            

MVC nedir?

• Model View Controller
• Kaygıların ayrılması (separation of concerns)
• Günümüzde servis katmanı eklenmiş

Angular'da MVC

• MVVM -> Model View View-Model
• View-Model -> $scope
• MVW -> Model View Whatever

MVC

AngularJs'in sundukları

AngularJs neleri çözmez?

• Spagetti kod
• Performans sorunları
• SEO

İki Yönlü Veri Bağlama

  

    Ad:
    
    
Selam {{adiniz}}!
  

                

Module kavramı

  

    ...
  
            

  angular.module('myApp', ['ngResource', 'videoPlayer'])
            

Dependency Injection

  angular.module('myApp', ['ngResource', 'videoPlayer'])

  .constant('ENDPOINT', 'https://api.kodgemisi.com/v2/')

  .factory('UserSyncService', ['$scope', 'ENDPOINT', function($scope, ENDPOINT){
    ...
  }])

  .controller('ProfileCtrl', ['$scope', 'UserSyncService', function($scope, userSyncService){
    ...
  }])
            

Scope kavramı

• Prototypical inheritance

  

    
    
Root scope: {{data}}
  
  
  

    
    
1. Controller: {{data}}
  
  
  

    
    
2. Controller: {{data}}
  

            

Scope kavramı

• Prototypical inheritance

AngularJs'in MVC kullanımı

Model

• Model inputtan veya AJAXtan gelir
• $scopea konulur
• Model üzerindeki değişiklikler izlenir

View

• HTML + Template
• {{ }} ng-bind ng-model
• String interpolation

Controller

• ViewModeli manipule eder
• DOM'a kesinlikle dokunmaz
• Her controllerın yeni "scope"u vardır
• Controller inheritance YOK!

DOM etkileşimi ve directive kavramı

Directive

• DOM ile etkileşimin tek yolu
• ng-repeat ng-if ng-class ng-Bind
• Özelleştirilebilir, kendi directive'lerinizi yazın

Directive örneği

  angular.module('SampleForDirective', [])
  .directive('toggle', function() {
    return function(scope, element, attrs) {
      element.addClass('btn-success').text('Açık');
      var on = true;

      element.on('click', function() {
        if(on)
          element.removeClass('btn-success').addClass('btn-danger').text('Kapalı');
        else
          element.removeClass('btn-danger').addClass('btn-success').text('Açık');

        on = !on;
      });
    };
  });
            

Directiveler her yerde

• Tag Attribute Class

AngularJs ve testler

Jasmine

describe('Test showcase', function() {
 
  describe('ProfileCtrl', function(){
 
    it('should instantiate "users" model with 2 users', function() {
      var scope = {};
      var ctrl = new ProfileCtrl(scope);
 
      expect(scope.users.length).toBe(2);
    });
  });
});
            

$ karma start karma-config.js 
INFO [karma]: Karma v0.10.5 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chromium 30.0.1599 (Ubuntu)]: Connected on socket GzV3EwULE_yqFCU5elUh
Chromium 30.0.1599 (Ubuntu): Executed 1 of 1 SUCCESS (0.14 secs / 0.023 secs)
            

Chromium 30.0.1599 (Ubuntu) Test showcase ProfileCtrl should instantiate "users" model with 2 users FAILED
  Expected 0 to be 2.
  Error: Expected 0 to be 2.
      at null. (/home/destan/dev/...samples/tests.js:9:34)
            

Sık yapılan hatalar

DOMa directive dışında müdahale

• Directive kullanın
• Controller doğru yer değil
• Testlerde zorluk

Angular'a dışarıdan müdehale

$.get('http://api.kodgemisi.com/v2/user/35', function(data) {
  $scope.user = data;
});
          

$.get('http://api.kodgemisi.com/v2/user/35', function(data) {
  $scope.$apply(function(){
    $scope.user = data;
  });
});
            

$http('http://api.kodgemisi.com/v2/user/35')
.success(function(data, status) {
  $scope.user = data;
})
            

Build-in fonksiyonları kullanın

{{Bunlar çıkmasın}}

              
{{user.name}}