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><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>
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

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><a href=”u#/user/{{ user.id }}”>{{ user.name }}</a></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

AngularJS sunumu

Recomendados

Recomendados

Más contenido relacionado

Similar a AngularJS sunumu

Similar a AngularJS sunumu (20)

AngularJS sunumu