Angular Hızlı Giriş

*Component(ng g c class1): class parçalarıdır, tekrara düşmemek için kullanılır.
*Routing: app-routing.module içerisinde tanımlanır.
*Module(ng g m content): Birleştirici veya gruplayıcı olarak kullanılır. İç içe moduleler veya componentleri barındırabilir.
Moduleler aap.module ile entegre edilir. Ör Module(BrowserModule/AppRoutingModule/HttpClientModule vb.) Oluşturulan moduleun componenentlerine farlı modulelerden erişim için exports: [ContentListComponent] olarak yazmak gerekir.


*Directives: Dom elementinin görünümünü davranışını veya düzenini değiştirmeyi sağlar.

1.Componentler: Görünümü veya şablonu olan direktiflerdir. Angular Component’ler özelleşmiş directive ‘lerdir. Directive ‘lerin template’li olanlarıdır da diyebiliriz. Component Directive ‘ler ana sınıfı oluşturur. Component’in çalışma süresinde nasıl başlatılıp işlenmesi ve nasıl kullanılması gerektiğine yön verir.
2.Structural: Dom elementlerini oluşturmak veya yok etmek için kullanılır.

Structure Directive ‘ler DOM nesnesinin yapısını manipule etmek ve değiştirmek için kullanılır. “*” işareti ile başlarlar.

Örneğin: *ngIf directive, *ngSwitch directive, and *ngFor directive.

  • *ngIf Directive: DOM elementlerini eklemeye silmeye izin verir.
  • *ngSwitch Directive: Bu directive de DOM elementlerini eklemeye silmeye izin verir. C# ve benzeri dillerdeki switch kullanımına benzer.
  • *ngFor Directive:  *ngFor directive, bir list için HTML üzerinde yinelenebilir html parçaları eklemeye yarar.


3.Attribute: Elementin davranışını ve görünümünü değiştirir. (ngClass, ngStyle).

Attribute Directive ‘ler DOM nesnesinin görünümünü ve davranışını değiştirmek için kullanılır.

Örneğin: ngClass directive, and ngStyle directive vs.

  • ngClass Directive: ngClass directive, Html elementlerine css class’ları eklemek silmek için kullanılır.
  • ngStyle Directive: ngStyle directive, Html elementlerine style eklemeye, style’larını dinamik değiştirmeye yarar.

*Service(ng g s service/user –skit-tests): Birden fazla componente veri sağlanması için kullanılır(Api üzerinden log tutma veri çekme gibi). Farklı componentlerde aynı veriye ihtiyaç duyulan noktalarda kullanılır.
@Injectable({providedIn: ‘root’}) //Injectable serviler uygulama içerisindeki her yerden çağırılabilir.
Public olarak constructor içerisindeki servis içeriklerine html classından erişilebilir fakat private durumunda sadece aynı class içerisinden erişilebilir.


*Pipes: Verileri dönüştürmek için kullanılan yapılardır. Bir değer gönderilir ve veri dönüştürülerek geri gönderilir.(büyük harfe çevir, decimal nokltala gibi)
Pipeslar | karakteri ile uygulanır.
ÖR: {{ today | date:format:’dd/mm/yyyy’| upparcase}}
ng g p pipes/avatar –skip-tests // {{user.name | avatar}}

Örnek proje(https://github.com/MehmetSert/kartvizit-app) yapımı notları;

ng new kartvizitapp
ng serve

ng g c components/home
ng g c components/about

material.angular.com> ng add @angular/material

Anasayfa
[routerLinkActiveOptions]: classı ile diğer sayfalara geçildiğindede url içerisinde / olduğu için active classı kalmaktaydı, bunu düzeltmek için kullanılır.

ng g m cards –route cards –module app: cards isimli modulu app module içerisiden route edilecek şekilde ayarlar.

app-routing.module.ts içerisinde router içerisinde loadChildren ile sadece route’a gidildiğinde sayfa yüklenir.

npm install –save bootstrap@next > angular.json dosyasına bootstrap.js ve css yolu eklenir.

ng g c cards/card-item : cards klasörü içerisinde component oluşturur.

@Input() card: any; : ile componente değer gönderimi yapılır.
strict mode açıkken değişkenlerin modelleri belirlenmelidir. :any gibi any verildiğinde component içerisinde classın özelliklerine . basılarak ulaşılamaz fakat model classı verilirse erişim sağlanabilir.

ng g interface models/card: inputların beklediği model class oluşturulur. model class içerisindeki değişkenlerin optional olduğunu ? işareti ile belirtebiliriz.
@Input() card!: Card;

ng g c cards/card-modal: modal companenti oluşturur.

ng g s services/card : sevisi ekler

ng g c components/content-list –module=content //farklı moduller içerisinde component oluşturmak için –module=modulAdi şeklide kullanılır.

JavaScript Use Strict neden kullanılır

JavaScript “use strict” kullanım amacı, kodun katı kurallı olarak çalıştırılacağını belirtir.

Katı kurallı kullanımda bir değişken oluşturulmadan kullanmaya izin vermez.

JavaScript kodlarının katı kurallı olarak yorumlanması için kod veya fonksiyon başına “use strict”; yazmak yeterli olacaktır.

Katı kural tanımı kod başına yazılırsa tüm kodlar katı kurallı olarak çalışacaktır.

"use strict";
a = 2;
b = 3;
c = a + b;
alert(c); // Değişken oluşturulmadan kullanıldığından hata verir.
m = 45;
alert(m);
hesapla();

function hesapla() {
"use strict";
a = 2;
b = 3;
c = a + b;
alert(c); // Değişken oluşturulmadan kullanıldığından hata verir.
}

Neden use strict
JavaScript katı kural tanımı “güvenli” kod yazmak için kullanılır.

Katı kural tanımı daha önceki hatalı kullanımın önüne geçer.

Örnek olarak JavaScript’te değişken adını yazarak bir değişken kullanabilirsiniz. Ancak katı kural tanımı ile değişken oluşturmadan değişken kullanmak hata verecektir.

JavaScript’te nesne özelliği yazılamaz olan özelliklere değer ataması yapıldığında hata vermeyecektir.

Katı kural tanımında yazılamaz olan bir özelliğe, yalnızca okunabilen bir özelliğe, olmayan bir özelliğe, olmayan bir değişkene ve olmayan bir nesneye yapılan atamalar hata verecektir.

Bazı kuralları;

*Değişken oluşturulmadan kullanmak hata verir.

*Değişken ve nesnenin silinmesine izin verilmez.

*Fonksiyon silinmesine izin verilmez.

*Fonksiyona aynı parametrenin iki defa yazılmasına izin verilmez(a(a1, a1)).

*Kaçış karakterlerine izin verilmez.

*Sadece okunabilir bir özelliğe değer atamaya izin verilmez.

*Sadece değer döndüren özelliğe değer atamaya izin verilmez.

*Silinemez bir özelliğin silinmesine izin verilmez.

*Değişken ismi olarak “eval” kullanılmasına izin verilmez.

*Değişken ismi olarak “arguments” kullanılmasına izin verilmez.

*JavaScript with kullanımına izin verilmez.

*JavaScript eval fonksiyonu ile oluşturulmuş değişkenlerin kullanımına izin verilmez.

Anahtar kelimelerin kullanımına izin vermez;

  • implements
  • interface
  • let
  • package
  • private
  • protected
  • public
  • static
  • yield

JavaScript Module ve Patternler

Yazılım geliştirirken kullandığımız Design Patterns ya da Tasarım Kalıplarının Javascript gibi OOP (Object Oriented Programming) özellikleri güçlü bir dil ile kullanmak, hem yapmış olduğumuz HTML 5 tabanlı mobil uygulamalarda hem de web uygulamalarında çok daha profesyonel, yönetilebilir ve okunabilir bir kod yazmanızı sağlayacaktır.

        //Object Literal
        var myObject = {
             get: function myMethod() {
                 return this.val;
             },
             val: 42
         };

        //Module Pattern => sadece isim uzayı içerisinde fonksiyonlar çalışır.
        myNameSpace = function () {
            var current = null;
            function init() { alert("init"); }
            function change() { alert("change"); }
        }();
        //myNameSpace.init() şeklinde çağırmaya kaltığımızda hata ile karşılaşacağız. Zira bu kullanım ileinit, change ve verify fonksiyonları artık public değil birer private fonksiyon haline geldi. Dolayısı ile myNameSpace kapsamı dışında kullanılamaz.

        myNameSpace = function () {
            var current = null;
            function init() { alert("init"); }
            function change() { alert("change"); }
            function verify() { alert("verify"); }
            init();
        }();
        myNameSpace.init();
        //Peki bu fonksiyonlardan istediklerimizi dışarıdan erişebilir hale getirelim.

        myNameSpace = function () {
            var current = null;
            function init() { alert("init"); }
            function change() { alert("change"); }
            function verify() { alert("verify"); }
            return {
                init: init,
                change: change
            }
        }();
        myNameSpace.init();

        //Böylelikle fonksiyon tanımlarını return’ün dışına taşıyıp, return içerisini yalnızca tanımlardan oluşturarak çok daha kullanışlı ve okunabilir bir kod parçası elde ettik.
        //Kodumuzun return bölümünde tanımlama metni olarak kullandığımız init ve change alanlarına aşağıdaki gibi farklı isimlerde verebiliriz. Bu şekildeki kullanıma da Revealing Module Pattern adını veriyoruz.

        //Revealing Module Pattern
        return {
            basla: init,
            degistir: change
        }
        //Buna göre çağırma şeklimizde aşağıdaki gibi olacaktır.

AngularJs Promises Kullanımı

c#taki try catch kullanımınn angulardaki kullanımı diyebiliriz.
// Fiddle – http://jsfiddle.net/EFpn8/6/
f1().then(function(data) {
console.log(“success 1: “+data)
return f2();
})
.then(function(data) {console.log(“success 2: “+data)})
.catch(function(data) {console.log(“error: “+data)});

function f1() {
var deferred = $q.defer();
// An exception thrown here is not caught in catch
// throw “err”;
deferred.resolve(“done f1”);
return deferred.promise;
}

function f2() {
var deferred = $q.defer();
// An exception thrown here is handled properly
throw “err”;
deferred.resolve(“done f2”);
return deferred.promise;
}

AngularJS Service, Factory, Provider’lar

AngularJS’de sayfa yenilendiğinde veya yönlendirme yapıldığında controller’ların içeriği silinir. Bu nedenle, uygulama genelinde kullanılacak nesnelere erişimi mümkün kılmak için Service’ler kullanılır. Angular’da Service oluşturulması ve kaydedilmesi 3 yolla gerçekleştirilebilir.

1. Factory
Syntax: module.factory( ‘factoryName’, functionName );
factoryName’i injectable argument olarak tanımladığımız zaman, functionName parametresine ait referansın çağırımındaki değer geri döndürülür.
2. Service
Syntax: module.service( ‘serviceName’, functionName );
serviceName’i injectable argument olarak tanımladığımız zaman, functionName parametresine ait bir instance geri döndürülür. new functionName() diyebiliriz.
3. Provider
Syntax: module.provider( ‘providerName’, functionName );
providerName’i injectable argument olarak tanımladığımız zaman, functionName parametresine ait referansın $get methodunun çağırımındaki değer geri döndürülür.
Provider, Service ve Factory’e göre daha karışık görünmesine rağmen onlardan çok daha fazla avantajı vardır. Uygulama henüz başlamadığında, module configuration yapıldığı esnâda Provider’lar kullanılabilir. Aslında Angular Provider’ı tanımakta, Factory ve Service ise Provider’ı sadece miras almaktadır.

ANGULARJS CUSTOM DİREKTİF TANIMLAMA – 2

abit bir HTML elementinin (div gibi), biz eklemediğimiz sürece bir jQuery bileşeni gibi bir özel bir davranış sergilemesi mümkün değildir . Örneğin bir div, tek başına bir slider veya datepicker gibi davranamaz. Direktifleri ise, özel davranışları olan html elementleri veya nitelikleri gibi düşünebilirsiniz.

Dikkat ettiyseniz önceki örneklerde veya AngularJS ile geliştirilmiş herhangi bir uygulamada, ng-app, ng-repeat, ng-model… gibi niteliklerin kullanıldığını görmüşsünüzdür. İşte bu nitelikler, kullanıldığı elementlere belirli özel davranışlar ekleyen direktiflerdir.
Örnekteki datepicker elementi, şu an için hiç bir anlam ifade etmeyecektir. Peki bu elemente bu davranışı verebilirmiyiz sorusuna gelirseniz, “bu yazıyı boşu boşuna yazmıyoruz herhalde” gibi bir cevap alırsınız benden 🙂

Kendi direktiflerimizi tanımlayalım.

Diğer tüm özelliklerde olduğu gibi direktifler de bir modül üzerine inşaa edilirler. Bir direktif oluşturmak için module.directive fonksiyonu kullanılır. module.directive fonksiyonu iki adet parametre alır. Birincisi direktifin adı, ikincisi fabrika fonksiyonu. Fabrika fonksiyonu oluşturulan direktif ile ilgili seçeneklerin tanımlı olduğu bir nesne döndürür.

var app = angular.module("myApp", []);
app.directive("datepicker", function () {
return {
restrict: "EA",
compile: function (elem) {
var div = document.createElement("div");
elem.replaceWith(div);
$(div).datepicker();
}
}
});

Yukarıdaki örneği uygulayacak olursak, önceki örnekte tanımladığımız datepicker elementinin darvanış sergilediğini yani sayfaya bir datepicker geldiğini göreceksiniz. Görüldüğü gibi direktif oluşturmak direktifleri anlatmaktan çok daha kolay.

Şeçenekleri incelemek gerekirse.
resctrict : niteliğin kullanım biçimini belirler.
Bu seçeneğine atanabilecek değerler ise şunlardır.
“A” – sadece nitelik olarak tanımlanabilir.
<pre>

gibi.</pre>
“E” – sadece element olarak tanımlanabilir.
<pre><my-directive></my-directive> gibi.</pre>
“C” – sadece class olarak tanımlanabilir.
<pre>

gibi.</pre>
veya bir kaçını yanyana yazarak birden farklı şekilde tanımlama yapmamız mümkündür.
“EA”, “EC”, “EAC” gibi.

module.directive("myDirective", function () {
return {
restrict: "EA",
//...
}
});

template : görünümün üretileceği, içerisinde direktif tanımlamaları ve bağlam ifadeleri barındıran HTML elementlerinden veya içerisinde bağlam ifadeleri barındırabilen statik metinlerdir.

module.directive("myDirective", function () {
    return {
        restrict: "EA",
        template: "Hello, {{ username }}", //...
 } 
});

templateUrl : mevcut bir şablonun kimlik (id) bilgisi veya url bilgisi

module.directive("myDirective", function () {
    return {
        restrict: "EA",
        templateUrl: "my_directive.html",
        //...
    }
});

AngularJS direktiflerdeki template özelliğini saymazsak, iki şekilde şablon tanımlayabilirsiniz. Birincisi harici bir dosya olarak (herhagi bir html dosyası olabilir), ikincisi ise şu şekildedir.

<script type="text/ng-template" id="myTemplate">
Ebubekir
</script>

Bunu da not olarak belirmiş olalım.
transclude : Dış kapsamdan (scope) direktif içerisine erişim sağlar diyebiliriz. Anlaşılması biraz zor olduğu için örnekle açıklamakta fayda var.

module.directive('myDirective', function() {
    return {
        restrict: "EA",
        transclude: true,
        template: 'Hello :' 
};
});

Yukarıdaki direktif tanımını yaptıktan sonra aşağıdaki koduda uygulamaya dahil ederseniz şablondaki ng-transclude ile işaretlenen span elementinin içerisine “Ebubekir” yazıldığını göreceksiniz.

<my-directive>Ebubekir</my-directive>

Yani dışarıdan içeriye birşeyler dahil etmek gibi.

replace : boolean bir değer alır. Direktif elementi veya niteliğin bağlandığı element ile şablonun derlenmesi ile üretilen çıktı basitçe yer değiştirir.

module.directive('myDirective', function () {
    return {
        restrict: "EA",
        replace: true,
        template: 'Hello World' 
}; 
});

Örneği baz alarak izah etmek gerekirse;

<my-directive></my-directive>

kodu render edildikten sonra örnekte ki şablonda belirtilen kodla yer değiştirecektir yani sonuç şu şekilde olacaktır.

Hello World

controller : Angularjs direktiflere özel controller lar geliştirmemize olanak sağlar. Bu, normal bir controller geliştirmekten farklı değldir. Aradaki fark ise biri modül üzerine, diğeri ise direktif içerisinde tanımlanırlar.

module.directive('myDirective', function () {
    return {
        restrict: "EA",
        template: '{{ hello }} {{ world }}',
        controller: function($scope) {
            $scope.hello = "Hello";
            $scope.world = "World";
        }
    };
});

Görüldüğü üzere hiçbir fark yoktur.
Not:Makaleyi yazan arkadaşın eline sağlık.alıntıdır…

AngularJS Custom Direktif Tanımlama

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<script>
 
var app = angular.module("main", [])
.directive("myElement", function () {
return {
restrict: "E",
link: function ($scope, element, atttributes) {
element.html("Hello World!")
}
}
});
 
// restrict E olursa element (<my-element></my-element>)
// restrict A olursa attribute (<div my-element></div>)
// restrict C olursa class (<div class="my-element"></div>)
// veya bir arada da olabilir (restrict: "EA" veya restrict: "EAC")
</script>
</head>
<body ng-app="main">
<my-element></my-element>
</body>
</html>
 

AngularJS $interval kullanımı

Angular ile zaman işlemlerini interval ile yapabiliyoruz, aşağıdaki örnekte 100den 0 kadar sayan kod mevcuttur.

var github = angular.module('app', []);
github.controller('homeCtrl', ['$scope', '$interval', function ($scope, $interval) {
$scope.counter = 100;
var countBack = function () {
$scope.counter--;
if ($scope.counter < 1) {
$scope.counter = null;
}
};
$interval(countBack, 100, $scope.counter);
}]);

Html;

<div ng-app="app">
<div ng-controller="homeCtrl">
Sayaç:{{counter}}
</div>
</div>

AngularJS Direktifleri

Aşağıda tüm direktifler bulunmaktadır, yakın zamanda açıklamalarını ekleyeceğim.
Merak ettikleriniz için ve tüm liste için tıklayınız.
a
form
input
input[checkbox]
input[date]
input[datetime-local]
input[email]
input[month]
input[number]
input[radio]
input[text]
input[time]
input[url]
input[week]
ngApp
ngBind
ngBindHtml
ngBindTemplate
ngBlur
ngChange
ngChecked
ngClass
ngClassEven
ngClassOdd
ngClick
ngCloak
ngController
ngCopy
ngCsp
ngCut
ngDblclick
ngDisabled
ngFocus
ngForm
ngHide
ngHref
ngIf
ngInclude
ngInit
ngJq
ngKeydown
ngKeypress
ngKeyup
ngList
ngModel
ngModelOptions
ngMousedown
ngMouseenter
ngMouseleave
ngMousemove
ngMouseover
ngMouseup
ngNonBindable
ngOpen
ngOptions
ngPaste
ngPluralize
ngReadonly
ngRepeat
ngSelected
ngShow
ngSrc
ngSrcset
ngStyle
ngSubmit
ngSwitch
ngTransclude
ngValue
script
select
textarea

AngularJS Tab Örneği

Angular ile tab uygulaması, sıfır js kod ile 🙂

<body ng-app ng-init="tab = 'tab1'">
 
<div id="tab">
 
<ul class="tab">
<li ng-class="{active: tab == 'tab1'}">
<a href="#" ng-click="tab = 'tab1'">1. tab</a>
</li>
<li ng-class="{active: tab == 'tab2'}">
<a href="#" ng-click="tab = 'tab2'">2. tab</a>
</li>
<li ng-class="{active: tab == 'tab3'}">
<a href="#" ng-click="tab = 'tab3'">3. tab</a>
</li>
</ul>
 
<div ng-switch="tab">
<div class="tab-content" ng-switch-when="tab1">
1. tab içeriği
</div>
<div class="tab-content" ng-switch-when="tab2">
2. tab içeriği
</div>
<div class="tab-content" ng-switch-when="tab3">
3. tab içeriği
</div>
</div>
 
</div>
 
</body>