angularjs sunumu

AngularJS ile tek sayfa web uygulamaları

MVC, MVVM, MVP ve MVW/MV* nedir?

● Model–View–Controller (MVC) kullanıcı arayüzleri geliştirmek için bir mimari kalıp.

● MVC UI geliştirmede yeni ufuklar açmıştır. Kendi sorumlulukları (single responsibility) üzerinden

yazılım yapıları oluşturma ve tanımlama yaklaşımlarının ilklerinden biridir.

Single Page Application nedir?

● Tüm uygulama dosyaları (HTML, JavaScript ve CSS) kullanıcı tarafına tek bir seferde yüklenir.

● Aslında bir tane uygulama dosyası vardır. Diğer html şablonları ve datalar, dinamik olarak,

gerektikçe bu ana dosyaya gömülür.

● Amaç daha akıcı bir kullanıcı deneyimi sunmaktır.

● Masaüstü uygulaması gibi hızlı çalışan web uygulamaları geliştirilebilir.

Neden adı AngularJS? Neden kullanılan namespace “ng”?

● Çünkü HTML’de açısal parantezler (“<” ve “>” kullanılır)

● “ng”nin telaffuzu “Angular”a benzer

AngularJS nedir?

● Bir JavaScript kütüphanesi değildir. Direk çağırıp kullanabileceğimiz metodlar sunmaz. (angular global objesi ve sunduğu birkaç metot dışında)

● jQuery gibi bir DOM manipülasyon kütüphanesi (jQLite adında küçültülüp özelleştirilmiş bir jQuery

kütüphanesi kullansa da) değildir

● Web uygulamalarında daha çok HTML tarafına odaklanır

● MVC, MVVM, MVP ve MVW/MV* (Model View Whatever) mimari kalıplarına uyar

● Single Page Application (SPA) geliştirilir

● Bir Javascript Web Çatısıdır (Framework)

● AngularJS, web uygulamasının farklı bileşenlerini birbirine bağlarken ve kullanıcı arayüzleri

geliştiriyorken, deklaratif kodun imperatif koddan daha iyi olduğu felsefesi etrafında geliştirilmiştir

Neden AngularJS?

● Direktifler, yeni tag’ler, ifadeler, özellikler, HTML şablonları ile HTML’i geliştirir

● TDD’ye teşvik eder

● MVC/MVVM mimari tasarım kalıplarına teşvik eder

● Kod yeniden kullanılırlığı (reusability) sağlar

● Single Page Application geliştirmeye uygundur

● Bir çok yenilikçi ve kolaylaştırıcı özelliği vardır

Öne çıkan özellikleri

● Deklaratif HTML yaklaşımı

● Kolay uygulanabilen iki taraflı data-binding

● Yeniden kullanılabilir bileşenler

● Dependency injection

● Unit test ve End ro End Entegrasyon testi

yazmak kolaydır

● Gelişmiş yönlendirme (routing) desteği

● Şablon (templating) desteği

● Modules

● Servisler

● Filtreler

● Direktifler

● Form doğrulaması

● Çoklu dil desteği

HTML Derleyicisi

Geliştirici, browser’a yeni HTML söz dizimleri öğretebilir, herhangi bir HTML elemanına yeni davranışlar,

özellikler tanımlayabilir.

Derleyivi, DOM’u baştan sona tarayan bir AngularJS servisidir. Derleme iki fazda yapılır:

1. Derleme (compile): Tüm DOM taranır ve direktiflerin hepsi toparlanır.

2. Bağlama (link): Her direktif bir scope ile bağlanır.

İfadeler

HTML şablonu içinde JavaScript ifadeleri yer alabilir:

<body>

1 + 2 = {{ 1 + 2 }}

</body>

Direktifler

Günümüzün HTML bileşenleridirler. HTML’i genişletirler.

Direktifler HTML’de:

1. HTML elemanı, <messages />

2. HTML elemanı özelliği <div draggable></div>,

3. class adı <div class=”list-class”></div>.

olarak tanımlanabilir.

ng-repeat örneği

<div ng-repeat=”user in users”>

<div><a href=”u#/user/{{ user.id }}”>{{ user.name }}</a></div>

<div>{{ user.description }}</div>

</div>

diğer...

ngShow:<div ng-show=”myValue”></div>

ngSwitch:<div ng-switch=”page”>

<div ng-switch-when=”settings”>Settings</div>

<div ng-switch-when=”home”>Home</div>

<div ng-switch-default>back</div>

</div>

ngModel:<input name=”name” ng-model=”user.name”></input>

Data Binding

Modelleriniz ile View’lerinizi bağlayın:

<input name=”name” ng-model=”user.name”></input>

Filtreler

View’deki ifadelerinizi formatlayın.

<div ng-repeat=”user in users”>

<div><a href=”u#/user/{{ user.id }}”>{{ user.name | uppercase }}</a></div>

<div>{{ user.dateOfBirth | date:’MM/dd/yyyy’ }}</div>

<div>{{ user.dateOfBirth | date:’medium’ }}</div>

<div>{{ user.description }}</div>

</div>

Kendi filtrelerinizi kolaylıkla oluşturabilirsiniz.

Kısmi Görünümler

Sayfanız Single Page Application olduğu için buna ihtiyacınız olacaktır.

Yönlendirmeler (routing) ile bağladığınız her bir sayfanız için farklı HTML şablonları gösterebilirsiniz.

<body>

<div class=”container”>

<div ng-view></div>

</div>

</body>

Modüller

Uygulamanızın yapısını oluşturur.

Her modülü aşağıdaki gibi tanımlayabilirsiniz:

var angularJSModule = angular.module(‘MyModule, []);

Modüllerin içinde:

● controller’lar● service’ler● filter’lar● directive’ler

tanımlayabilirsiniz

ng-app

Angular’a, uygulamanın bir parçasının bir modül tarafından yönetileceğini söylemek için ngApp kullanın:

app.js içinde:


index.html içinde:

<body ng-app=”MyModule”>

<div class=”container”>

<div ng-view></div>

</div>

</body>

Test edilebilir ve yönetilebilir bir uygulama geliştirin.

Aşağıda gibi, modülünüze routing tanımlamaları yapabilmeniz için routeProvider’ı enjekte edin:


angularJSModule.config(function ($routeProvider) {

});

ya da

angularJSModule.config([‘$routeProvider’, function ($routeProvider) {

}]);

Dependency Injection

Uygulamanıza yönlendirmeler tanımlamak için modülünüzü konfigüre edin.

angularJSModule.config([‘$routeProvider’, function ($routeProvider) {

$routeProvider.when(’/users’, {)templateUrl: ’views/users.html’controller: ’UsersCtrl’

});

$routeProvider.otherwise({templateUrl: ’common/404.html’

});

}]);

Burada “http://localhost/#/users” sayfasını ziyaret ettiğiniz zaman view’deki ng-view direktifinin tanımlı olduğu elemana “views/users.html” sayfası yerleştirilecektir.

Modüllerinizi konfigüre edin

http://localhost/#/users

View’leriniz için veri sağlayıcılardır.

angularJSModule.controller(‘UsersCtrl’, [‘$scope’, function ($scope) {

$scope.users = [{id: 123,name: ‘Okan’,dateOfBirth: ...,description: ...

}];

}]);

View’de:

<div ng-repeat=”user in users”> <div><a href=”u#/user/{{ user.id }}”>{{ user.name }}</a></div> <div>{{ user.description }}</div></div>

Controller’lar

View’lerinizin omurgasını oluşturur.

Bir controller ile scope’a veri veya fonksiyon tanımlayabilirsiniz ve view’den bunlara erişebilirsiniz.

Her direktifin kendi özel izole scope’u olabilir.

Scope

Uygulamanız için çeşitli araç metodlar tanımlayabilirsiniz.

angularJSModule.factory(‘UsersService’, [‘$scope’, function () {

return {getAllUsers: {

return [{ id: 123, name: ‘Okan’, dateOfBirth: ‘1981-01-01’, description: ‘Software Developer’ }];

}};

}]);

Bu service’leri controller’larınıza veya diğer service’lere veya filter’lara enjekte edebilirsiniz.

angularJSModule.controller(‘UsersCtrl’, [‘$scope, UsersService’, function ($scope, UsersService) {

$scope.users = UsersService.getAllUsers();

}]);

Service’ler

Directive’ler AngularJS’nin güçlü tarafıdır. Fakat biraz karmaşık bir yapıya sahiptirler.

angularJSModule.directive(‘footerElement’, [function () {

return {template: ‘<p class=”footer”>Copyright © 2015 Telenity, Inc. All Rights Reserved.</p>’,replace: true

};

}]);

View’de:

<div footer-element></div>

Directive’ler

● Batarang - AngularJS uygulamaları için.● Bower - bağımlılık yönetimi aracıdır. (by Twitter)● Grunt - görev yönetimi sağlar (minification, compression, preparation...)● Yeoman - öntanımlı quickstart uygulamalar yaratır.● Karma - test başlatıcı bir araçtır.● AngularUI - çeşitli kullanışlı bileşenler sunar (datepicker, Bootstrap CSS...)● Restangular - restful servis iletişimi sağlar.● Angular Translate - çoklu dil desteği için bir araçtır.● https://ide.c9.io - cloud IDE

AngularJS - https://angularjs.org/

Quickstart Training - http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro

Framework’ler, kütüphaneler ve araçlar

https://ide.c9.io

https://ide.c9.io

Teşekkürler