Webinar Angular JS’e Giriş

Yazar: borsoft · 26 Şubat 2015

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.

//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();
})();

//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();

})();

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.

 $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);
            });
        }

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

directApp.filter("chekcMark", function () {
    return function (input) {
        return input ? '\u2713' : '\u2718';
    }
});

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.

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

Layout = null;

}

<!DOCTYPE html>

<head>

<title>http://www.borakasmer.com</title>

</head>

<h1 style="color:red">{{SubMessage}}</h1>

</div>

<h1>{{counter}}</h1>

<div>Location:{{User.location}}</div>

<user-Detail></user-Detail>

<hr />

<div>

<div>Select Degeri:{{orderKey}}</div>

<option>language</option>

<option selected="selected">-stargazers_count</option>

<option selected="selected">+stargazers_count</option>

</select>

</div>

<div>Filter:<input type="text" ng-model="filterKey" placeholder="search user detail..." /></div>

</div>

</body>

</html>

1-)Yukarıdaki <div search-User></div> Attribute Directive dir. Kodu aşağıdadır:

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)" />'
    };

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.

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("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:

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

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<title>UserRepo</title>

</head>

<body>

<table>

<tr>

<th>Language</th>

</tr>

<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

(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);

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

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)" />'
    };
});

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

Etiketler: angularjs html5 javascript mvc webinar

Bunlar da hoşunuza gidebilir...

Veli dedi ki:

28 Şubat 2015, 20:24

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.

Cevapla
- borsoft dedi ki:
  
  28 Şubat 2015, 20:25
  
  Teşekkürler Veli;
  Elimden geleni yapıyorum.
  
  Cevapla
Murat dedi ki:

28 Şubat 2015, 22:34

Selamlar hocam;
En cok felsefe kismini begendim. Module ve Abstraction mantigi ile AngularJs biraz daha kafamda oturdu.

Iyi tatiller hocam.

Cevapla
Ceyda dedi ki:

1 Mart 2015, 01:57

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.

Cevapla
mehmet dedi ki:

1 Mart 2015, 23:26

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

Cevapla
Berkay dedi ki:

15 Mart 2015, 04:05

Hocam Teşekkürler, her makaleniz ayrı ayrı çok faydalı, yeni webinarlarınızı da bekliyoruz.

Cevapla
- borsoft dedi ki:
  
  15 Mart 2015, 14:21
  
  Teşekkürler Berkay…
  
  Cevapla
Ramazan dedi ki:

7 Eylül 2015, 23:17

Teşekkür ederim çok güzel bir paylaşım. Herhalde sıkı takipçiniz olacağım :)

Cevapla
- borsoft dedi ki:
  
  9 Eylül 2015, 12:00
  
  Teşekkürler Ramazan;
  
  Cevapla
Erhun dedi ki:

20 Eylül 2015, 16:47

çok güzel webinar olmuş. Teşekkür ederim çok güzel bir paylaşım

Cevapla
- borsoft dedi ki:
  
  20 Eylül 2015, 19:15
  
  Teşekkür ederim Erhun.
  İşine yaradı ise ne mutlu bana:)
  
  Cevapla
Samet Çınar dedi ki:

24 Kasım 2015, 14:29

Elinize sağlık baya iyi.

Cevapla
- borsoft dedi ki:
  
  24 Kasım 2015, 15:55
  
  Teşekkürler Samet;
  İşine yaradı ise ne mutlu bana:)
  
  Cevapla
Numan dedi ki:

6 Ekim 2016, 17:48

çok güzel bir webinar olmuş emeğinize sağlık.

Cevapla
- borsoft dedi ki:
  
  7 Ekim 2016, 16:43
  
  Teşekkürler Numan,
  
  İşine yaradı ise ne mutlu bana…
  
  Cevapla
Emre dedi ki:

24 Ekim 2016, 13:40

Hocam merhabalar. Guzel bir webinar olmus cok tesekkur ederim. Yalniz bir yeri anlamadim. Sayfada debug yapmadan degisiklikler aninda oldu. Gozden kacirdigim yer neresi anlamadim.

Cevapla
- borsoft dedi ki:
  
  24 Ekim 2016, 15:39
  
  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.
  
  Cevapla

Webinar Angular JS’e Giriş

Bunlar da hoşunuza gidebilir...

17 Cevaplar

Bir cevap yazın Cevabı iptal et

About

Son Yazılar

Kategoriler

Son Yorumlar

Arşivler

Webinar Angular JS’e Giriş

Bunlar da hoşunuza gidebilir...

Hadi Biraz Oyun Oynayalım…

Angular2 İle ReactiveX

Asp.Net Mvc’de MicroServis Mantığında RabbitMQ ve Dapper ile Error Log Tutma

17 Cevaplar

Bir cevap yazın Cevabı iptal et

About

Son Yazılar

Kategoriler

Son Yorumlar

Arşivler