Visual Studio 2015 ile Angular 2' ye Giriş. 0

[ionian 65]

Arkadaşlar Merhaba;

Google' ın başarılı mvvm javascript framework' ü Angular' ın 2. sürümünü büyük bir merakla bekliyordum ve geçtiğimiz günlerde betası yayımlandı. Ben de ilk defa bugün deneme fırsatı yakaladım. Yalnız bu sürüm önceki sürümden çok farklı ve kurulum + konfigürasyon işlemleri bildiğimiz javascript kütüphaneleri kadar kolay değil. Ben de merak eden arkadaşlar için ufak çaplı bir başlangıç rehberi hazırladım. Buradaki örnekte çok basit bir html sayfası hazırlayacağız.

Benim burada kullanacağım ide visual studio 2015. Ek olarak mutlaka Update 1 güncellemesi yüklü olmak zorunda;
https://www.visualstudio.com/post-download-vs?sku=community&clcid=0x409

Angular2 ile uygulama geliştiriken kullanacağımız dil typescript olacak. Ek olarak javascript ve dart' ta kullanabilirsiniz ama Angular ekibi de typescript' i tercih ediyor. Typescript hakkında bilgi verecek olursak; Microsoft' da technical fellow olan ve daha önce C#, Delphi, Turbo Pascal gibi dillerin baş mimari Anders Hejlsberg tarafından geliştirilmiş görece yeni bir dildir. Ek özellikleri;

•     Derleme zamanlı tip kontrolü sağlar.
•     class, interface, encapsulation, inheritance gibi object-oriented programlamanın temel prensiplerini destekler.
•     Derlenmiş çıktı olarak yalın javascript kodu üretir.

Bir kere alıştıktan sonra plain-javascript yazmanın çok da sağlıklı olmadığını hemen anlamaya başlıyorsunuz. Ek olarak proje büyüdükçe typescript kullanmakla ne kadar iyi bir karar vermiş olduğunuzu anlayacaksınız. Zaten outlook.com, asana gibi yoğun javascript kullanılan uygulamalar typescript ile geliştiriliyor.
Typescript' i indirmek için aşağıdaki linki kullanabilirsiniz;
http://www.typescriptlang.org/


Son olarak ta ASP.NET 5 RC indirmeniz gerekli;
https://get.asp.net/


Tüm yükleme işlemleri tamamlandıktan sonra yeni bir proje oluşturalım;

Yalnız en başta belirteyim; bu proje şablonu klasik asp.net proje yapılarından çok farklı. NuGet yerine node.js den gelen npm kullanılıyor ve klasör dizilimi hatta sln dosyasının yapısı da çok değişik. Visual studio kullanmanıza rağmen daha çok java veya node.js projesi geliştiriyormuşsunuz gibi hissedeceksiniz.

Proje oluştururken
File > New > Project > Asp.Net Web Application > Asp.Net 5 Templates > Empty seçeneklerini seçiyoruz;





Projemizi oluşturdukdan sonra Startup.cs sınıfımızın Configure methoduna şu kodları ekleyin;
 

app.UseDefaultFiles();
app.UseStaticFiles();

Yukarıdaki kodu eklediğiniz de visual studio tarafından hata alcaksınız. Önüne geçnek için 'project.json' konfigürasyon dosyamızın dependencies bölümüne
"Microsoft.AspNet.StaticFiles": "1.0.0-rc1-final"
referansını ekleyin ve kaydedin. Ardından ide' niz references kısmını restore edecek ve startup.cs deki hata giderilşmiş olacak.;



Angular2 beta aşamasında ve dağıtımı şu an npm (node package manager) üzerinden yapılıyor. Bizim de visual studio tarafında npm i konfigüre etmemiz için projeye sağ tıklayıp; add > new item > NPM Configuration File' ı seçmemiz gerekli. Ardın oluşturulan package.json dosyasına şu kısımları kopyalayın;

{
  "version": "0.0.0",
  "name": "Angular2QuikStart",
  "dependencies": {
    "angular2": "2.0.0-beta.8",
    "systemjs": "0.19.22",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.5.15",
    "bootstrap": "^3.3.5",
    "jquery": "^2.1.4",
    "typescript": "1.8.7"
  },
  "devDependencies": {
    "gulp": "^3.9.1"
  }
}

Dosyayı kaydettikten sonra dependencies kısmının restore olduğunu ve projenin src dizinine yeni bir 'node_modules' adında bir klasör oluşturulduğunu göreceksiniz. İşte bu klasörün içinde angular2' nin ihtiyaç duyduğu tüm typescript/javascript dosyaları mevcut.

Asp.Net Core uygulamalarında tüm sabit dosyalar, scriptler, resimler vs. wwwroot klasörünün altında bulunmalı. Dolayısıyla bizim  'node_modules' klasöründeki gerekli dosyaları 'wwwroot' altına taşımamız gerek. Bunu elle yapmak yerine Gulp' ı kullanacağız. Bunun için yine projemize sağ tıklayıp > add > new item > Gulp Configuration File seçiyoruz. Oluşan 'gulpfile.js' dosyasına aşağıdaki kodu kopyalıcaz;
 

/// <binding AfterBuild='moveToLibs' />
var gulp = require('gulp');
 
gulp.task('moveToLibs', function (done) {
    gulp.src([
      'node_modules/angular2/bundles/js',
      'node_modules/angular2/bundles/angular2.*.js*',
      'node_modules/angular2/bundles/angular2-polyfills.js',
      'node_modules/angular2/bundles/http.*.js*',
      'node_modules/angular2/bundles/router.*.js*',
      'node_modules/es6-shim/es6-shim.min.js*',
      'node_modules/angular2/es6/dev/src/testing/shims_for_IE.js',
      'node_modules/systemjs/dist/*.*',
      'node_modules/jquery/dist/jquery.*js',
      'node_modules/bootstrap/dist/js/bootstrap*.js',
      'node_modules/rxjs/bundles/Rx.js'
    ]).pipe(gulp.dest('./wwwroot/libs/'));
 
    gulp.src([
      'node_modules/bootstrap/dist/css/bootstrap.css'
    ]).pipe(gulp.dest('./wwwroot/libs/css'));
});

yukarıda en başa eklemiz olduğumuz

/// <binding AfterBuild='moveToLibs' />

satırı sayesinde derleme işlemlerinde sonra ilgili dosyalar 'wwwroot/libs' klasörüne kopyalanacak.

Şimdiki adımda ise typescript i konfigüre etmemiz gerekli;
bunun için projeye sağ tıklayıp yeni klasör ekleyelim ve adı 'app' olsun.

Sonra yine projeye sağ tıklayıp add > new item > TypeScipt JSON Configuration File ekleyelim ve aşağıda kodu yeni oluşan 'tsconfig.json' dosyasına kopyalayalım;

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "noEmitOnError": true,
    "noImplicitAny": false,
    "outDir": "../wwwroot/app/",
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules"
  ]
}

Bu sayede typescript kodlarımız derlenerek plain-javascript' e çevirilecek ve "/wwwroot/app/" klasörüne kopyalacak.


İşte nihayet biraz angular yazabiliriz. Öncelikle oluşturduğumuz app klasörüne 'app.component.ts' adında bir typescript dosyası ekleyelim ve aşağıdaki kodu kopyalayalım;

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: `<h1>{{title}}</h1>
    <div><label>Rating</label>{{hero.rating}}</div>
    <div><label>Name </label>{{hero.name}}</div>
    <div><label>Description</label>{{hero.description}}</div>
    <div><label>Motto</label>{{hero.motto}}</div>
    `
})

export class AppComponent {
    public title = "Best Game Character";
    public hero: GameHero = {
        rating: 5, name: "geralt of rivia", description: "White Wolf", motto: "If I'm to choose between one evil and another, I'd rather not choose at all."
    };
}

interface GameHero {
    rating: number,
    name: string,
    description?: string,
    motto?: string
}

şimdi ise ön yükleme için main adında yine bir typescript dosyası oluşturalım  ve oluşan 'main.ts' dosyasına şu kodları ekleyelim;

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);

 
Son olarak bir html sayfasına ihtiyacımız var. Bunun için wwwroot klasöüne sağ tıklayarak "index.html" adında bir html dosyası ekleyelim ve bu oluşan dosyaya aşağıdaki kodları kopyalayalım;

<!DOCTYPE html>

<style>
    label {
        display: block;
        width: 100px;
    }
</style>

<html>
<head>
    <meta charset="utf-8" />
    <title>Angular 2 with ASP.NET 5</title>
    <link href="libs/css/bootstrap.css" rel="stylesheet" />

    <script src="libs/es6-shim.min.js"></script>
    <script src="libs/system-polyfills.js"></script>
    <script src="libs/shims_for_IE.js"></script>
    <script src="libs/angular2-polyfills.js"></script>
    <script src="libs/system.js"></script>
    <script src="libs/rx.js"></script>
    <script src="libs/angular2.dev.js"></script>

    <script>
        System.config({
            packages: {
                app: {
                    defaultExtension: 'js'
                }
            }
        });
    </script>
    <script>

        System.import('app/main')
              .then(null, console.error.bind(console));
    </script>

</head>


<body>
    <my-app>Loading...</my-app>
</body>
</html>

Projeyi çalıştırdığımızda oluşturduğumuz template' in nasılda güzel html e dönüştünü görebilirsiniz. Ayrıca projenin tamamını aşağıdan indirebilirsiniz;
https://drive.google.com/open?id=0BwknnP77KksudURZRlhOVlc2UUk
 
 
Peki niçin angular2' yi öğrenmek gerek derseniz bence front-end geliştirmenin geleceği burada yatıyor. Hem desktop hem de mobil, hem web hem de native tarafta angular2 kendine oldukça fazla destekçi bulacaktır. Ayrıca siz de benim gibi back-end' ciyseniz ama yine de zamanınızın çok büyük bölümü front-end' de de geçiyorsa jquery' nin, razor' ın gerekli yeterliliği ve tatmini sağlamadığını göreceksiniz. Angular2 ise işte tam burada bir kahraman gibi karşınıza çıkıyor. Zevkli, yaratıcı ve keyif veren kodlamalar dilerim.

Kaynaklar;
https://angular.io/docs/ts/latest/quickstart.html
http://www.mithunvp.com/angular-2-in-asp-net-5-typescript-visual-studio-2015/