Webinar Angular JS’e Giriş
Selamlar;
Öncelikle webinar’a katılan tüm arkadaşlara teşekkür ederim. Umarım sizin için faydalı olmuştur. Kaçıranlar için webinar kaydı ve kodları aşağıdadır.
Single Page uygulamaların popüler olduğu günümüzde client side uygulamalar gittikçe önem kazanmaktadır. Bununla birlikte Javascript büyük bir yükselişe geçmiştir. İşte tam bu noktada javascript frameworkleri, dinamik sayfa tanımlamada olmaz ise olmazlar arasına girmiştir. Bu webinar’da javascript frameworklerinden AngularJS üzerine konuşacağız.
Konular:
- Kendimi tanıtım ve AngularJS neden lazım
- Javascript’de Abstarction ve Module kavramı ile AngularJS’i tanımlama
- Controller & MultiController & Model & View
- Services($scope,$http.get,$log,$interval) , Asenkron $http.get
- Filters(filter | orderBy | number | currency | json) & Custome Filter
- Directives & Custom Directive [ A,E ]
- Injection
Kaynaklar:
- Scott Alen video ve yazıları.
- www.angularjs.org.
- Google yayınları.
Webinar Kaydı:
Öncelikle Javascript ile AngularJS’deki Abstarction ve Module kavramlarına aşağıdaki gibi deyinilmiştir. İlgili kodlar script.js altındadır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
//Javascript Abstraction var DoCoding = function (f) { f(); }; var coding1 = function () { console.log("Codin1 Start!!"); try { console.log("Coding1"); } catch (ex) { console.log(ex); } console.log("Codin1 End!!"); }; var coding2 = function () { console.log("Coding2"); }; DoCoding(coding1); DoCoding(coding2); //Javascript Modules (function () { var CreateCoder = function () { var counter = 0; var task1 = function () { counter++; console.log("task1 :" + counter); }; var task2 = function () { counter++; console.log("task2 :" + counter); }; return { Job1: task1, Job2: task2 }; }; var coder = CreateCoder(); coder.Job1(); coder.Job2(); coder.Job2(); coder.Job2(); })(); |
https://api.github.com/users/ servisinden girilen user bilgisi $http.get servisi ile alınmıştır. Nested yapı kullanılarak çekilen user’ın repos_url’leri de bir alt kırılım olarak yine $http.get servisi kullanılarak çekilmiştir. Daha sonra filter | orderBy | number | json ve custom filter gibi çeşitli filitreler bu çekilen data üzerinde uygulanmıştır. İlgili kod aşağıdadır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$http.get("https://api.github.com/users/" + key).success(function (response) { $log.info("All User Data Taken!"); $scope.User = response; if (intervalCount) { $interval.cancel(intervalCount); $scope.counter = null; } $http.get($scope.User.repos_url).success(function (data) { $log.info("All User Repos Data Taken!"); $scope.repos = data; }).error(function (ex) { $log.info(ex); }) }).error(function (ex) { $.log.info(ex); }); } |
Ekran Çıktısı:
Custom Filter ile true – false Has Wiki değeri semboller ile gösterilmiştir. Kodu aşağıdadır:
1 2 3 4 5 |
directApp.filter("chekcMark", function () { return function (input) { return input ? '\u2713' : '\u2718'; } }); |
Datanın search edilip çekildiği ve detayın gösterildiği Index.cshtml aşağıdaki gibidir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
@{ Layout = null; } <!DOCTYPE html> <html ng-app="app"> <head> <script src="~/Scripts/angular.min.js"></script> <script src="~/Scripts/Scripts.js"></script> <script src="~/Scripts/directApp.js"></script> <meta name="viewport" content="width=device-width" /> <title>http://www.borakasmer.com</title> </head> <body ng-controller="MainController"> <div ng-controller="SubController"> <h1 style="color:red">{{SubMessage}}</h1> </div> <h1>{{counter}}</h1> <div search-User></div> <div class="Group" ng-show="User"> <div>Name:{{User.name}}</div> <div>Location:{{User.location}}</div> <user-Detail></user-Detail> <hr /> <div> <div>Select Degeri:{{orderKey}}</div> <select ng-model="orderKey"> <option>name</option> <option>language</option> <option selected="selected">-stargazers_count</option> <option selected="selected">+stargazers_count</option> </select> </div> {{filterKey}} <div>Filter:<input type="text" ng-model="filterKey" placeholder="search user detail..." /></div> <div ng-include="'UserRepo'"></div> </div> </body> </html> |
1-)Yukarıdaki <div search-User></div> Attribute Directive dir. Kodu aşağıdadır:
1 2 3 4 5 |
directApp.directive("searchUser", function () { return { restrict: 'A', template: 'Search User:<input type="text" placeholder="seacrh user.." autofocus ng-model="searchKey"><input type="button" value="Search User" ng-click="Search(searchKey)" />' }; |
2-)Yukarıdaki <user-Detail></user-Detail> Element Directive dir. Burda json filter kullanılmıştır. Kodu aşağıdadır.
1 2 3 4 5 6 |
directApp.directive("userDetail", function () { return { restrict: 'E', template: '<div>Image:<img ng-src="{{User.avatar_url}}" width="200" title="{{User.name}}" /><textarea rows="20" cols="100">{{User | json}}</textarea></div>' }; }); |
3-)Yukarıdaki <div ng-include=”‘UserRepo'”></div> ayrı bir sayfadır. Kodu aşağıdaki gibidir. Burda orderBy, filter ve checkMark custom filterları kullanılmıştır. UserRepo.cshtml:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>UserRepo</title> </head> <body> <table> <tr> <th>Name</th> <th>Language</th> <th>Star</th> <th>Has Wiki</th> </tr> <tr ng-repeat="repo in repos | orderBy:orderKey | filter:filterKey"> <td>{{repo.name}}</td> <td>{{repo.language}}</td> <td>{{repo.stargazers_count | number:1}}</td> <td>{{repo.has_wiki | chekcMark}}</td> </tr> </table> </body> </html> |
Scripts.js kodları aşağıdaki gibidir: $scope.Search functionı ile istenen user aranmaktadır. Anlatılan örnek servisler aşağıdadır.
- $scope MainController’da modelin en tepesidir. AngularJs’de Conrollerlarda tanımlı modelin en tepesi $scope’dur.
- $http burda github servisine bağlanılıp data çekmeye yarar.
- $log webbrowser’ın console tarafında mesaj vermeye yarar.
- $interval belli zaman aralıkları ile ilgili methodu çağrır. Bir çeşit timerdır. Mesela burda 5sn geri sayarak search işlemini gerçekleştirmektedir.
$scope, $http, $log, $interval
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
(function (angular) { function MainController($scope, $http, $log, $interval) { $scope.orderKey = "-stargazers_count"; $scope.searchKey = "angular"; $scope.counter = 5; var countBack = function () { $scope.counter--; if ($scope.counter < 1) { $scope.Search($scope.searchKey); $scope.counter = null; } }; var intervalCount = null; var Count = function () { intervalCount = $interval(countBack, 1000, $scope.counter); } Count(); $scope.Search = function (key) { $http.get("https://api.github.com/users/" + key).success(function (response) { $log.info("All User Data Taken!"); $scope.User = response; if (intervalCount) { $interval.cancel(intervalCount); $scope.counter = null; } $http.get($scope.User.repos_url).success(function (data) { $log.info("All User Repos Data Taken!"); $scope.repos = data; }).error(function (ex) { $log.info(ex); }) }).error(function (ex) { $.log.info(ex); }); } }; var app = angular.module("app", ['directApp']); app.controller("MainController", MainController); })(angular); |
Yukarıdaki var app = angular.module(“app”, [‘directApp’]); deki directApp başka bir module dür. Sisteme yanda görüldüğü gibi inject edilmiştir. SubController, Custom Filter ve Directiveler bunun altında tanımlanmıştır.
directApp.js: Kodu aşağıdaki gibidir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
function SubController($scope) { $scope.SubMessage = 'SubMessage directApp Controller!!!'; } var directApp = angular.module("directApp", []); directApp.controller('SubController', SubController); directApp.filter("chekcMark", function () { return function (input) { return input ? '\u2713' : '\u2718'; } }); directApp.directive("userDetail", function () { return { restrict: 'E', template: '<div>Image:<img ng-src="{{User.avatar_url}}" width="200" title="{{User.name}}" /><textarea rows="20" cols="100">{{User | json}}</textarea></div>' }; }); directApp.directive("searchUser", function () { return { restrict: 'A', template: 'Search User:<input type="text" placeholder="seacrh user.." autofocus ng-model="searchKey"><input type="button" value="Search User" ng-click="Search(searchKey)" />' }; }); |
SubController’daki $scope.SubMessage index.cshtml’de aşağıdaki gibi gösterilmiştir. Böyle inject edilen directApp modulüne ait SubController’ın SubMessage değeri index sayfasına basılır.
Böylece geldik bir webinarın daha sonuna. Bu webinarda AngularJS’e giriş yaptık.
Yeni bir webinarda görüşmek üzere hepinize hoşçakalın.
Source Code: http://www.borakasmer.com/projects/AngularJsWebinar.rar
Hocam elinize sağlık;
Çok başarılı bir webinarmış. Dün izleyemedim. Bugün videosunu baştan sona izledim. Kaçırdığıma pişman oldum.
Keşke sizin gibi insanlar daha çok olsa.
İyi çalışmalar.
Teşekkürler Veli;
Elimden geleni yapıyorum.
Selamlar hocam;
En cok felsefe kismini begendim. Module ve Abstraction mantigi ile AngularJs biraz daha kafamda oturdu.
Iyi tatiller hocam.
Selamlar hocam;
Webinar çok başarılı imiş. Malesef ben kaçırmışım. Ama neyseki sonradan yayınladınız. Ekipçek izledik. Halen konuşuyoruz kendi aramızda. İlk kez bu konuyu gören bir arkadaşım var. Konudan çok sizin hatasız yazmanıza takıldı:)
İyi çalışmalar.
Selamlar Hocam;
Cidden çok güzel bir sunum olmuş. Benim çok işime yaradı. Emeğinize sağlık. Şunuda belirtmeden geçemiyecem cidden çok deneyimli ve bilgilisiniz.
İyi akşamlar..
Hocam Teşekkürler, her makaleniz ayrı ayrı çok faydalı, yeni webinarlarınızı da bekliyoruz.
Teşekkürler Berkay…
Teşekkür ederim çok güzel bir paylaşım. Herhalde sıkı takipçiniz olacağım :)
Teşekkürler Ramazan;
çok güzel webinar olmuş. Teşekkür ederim çok güzel bir paylaşım
Teşekkür ederim Erhun.
İşine yaradı ise ne mutlu bana:)
Elinize sağlık baya iyi.
Teşekkürler Samet;
İşine yaradı ise ne mutlu bana:)
çok güzel bir webinar olmuş emeğinize sağlık.
Teşekkürler Numan,
İşine yaradı ise ne mutlu bana…
Hocam merhabalar. Guzel bir webinar olmus cok tesekkur ederim. Yalniz bir yeri anlamadim. Sayfada debug yapmadan degisiklikler aninda oldu. Gozden kacirdigim yer neresi anlamadim.
Teşekkürler Emre,
Hatırladığım kadarı ile arkada çalışan bir IIS listener vardı. Ve script’de olan değişik durumunda, açık sayfaları refresh ediyordu. Aynı sass vs less’de olduğu gibi, değişen css durumununun monitor edilip, değişim durumunda yeni bir derlenmenin olması gibi. Bu da kodlama anında büyük kolaylık sağlıyor.
İyi çalışmalar.