AngularJS 2 İlk Bakış ve İlk Proje

Bu yazımda Angular-2 de angular2’in yeni özelliklerinden, avantajlarından ve angular2 ile bir uygulamanın nasıl build edileceğinden bahsedeceğim.

Öncelikle, Angular2’den kısaca bahsedeyim. Günümüzde AngularJs, çok kullanılan ve ünlü bir JavaScript framework. Single Page Application ve web application geliştiriciler için çok popüler olan js framework. Google, AngularJS’in final versiyonu olan AngularJS2’yi yeni özellikleriyle bizlere sundu.

AngularJS Nedir?

Genel olarak özetlersek AngularJS:

  • MVC Yapısında bir frameworktur.
  • Single Page Application frameworkudur
  • Client Side Template oluşturmaya uygundur.
  • TDD (Test Driven Development)’a uygundur ve yazdığımız kodları kolayca unit test yapabiliriz.
  • Custom olarak Html taglerinde attribute tanıtmaya ve oluşturmaya imkan sağlar (Directives)
  • Dependency Injectionı destekler

Neden AngularJS2’yi Kullanmalıyız ?

  • Performans açısından Angular1’den daha hızlıdır.
  • Angular2 Mobil app development aşamasında daha güçlüdür. Angular2 tamamen mobil geliştirme odaklı olarak geliştirilmiştir.
  • Cross-platform bir frameworktur.
  • Browserların son versiyonlarına destek vermektedir. Ayrıca IE9+ ve Android 4.1+ gibi eksi browser versiyonlarına da destek vermektedir.
  • Angular2 component bazlı bir frameworktur. Angular2de scopelar ve controllerlar kaldırılıp, componentler ve directivelere yerleştirilmiştir.
  • Typescript kullanımını destekler.
  • Mobilde viewları daha hızlı render etmek için server side rendering kullanır.

AngularJS2 ile Proje Oluşturma

Öncelikle bir klasör oluşturalım ve ismini angular2-demo olarak verelim. Örneğin C: sürücüsüne gidip, klasörü oluşturup içine gidelim:

mkdir angular2-demo
cd angular2-demo

Burada visual studio code kullanacağım. Dilerseniz bu adresten Visual Studio Code’u indirebilirsiniz : Link

Klasörü visual studio code üzerinde açıyorum:

1

İlk olarak tsconfig.json typescript config dosyasını ekleyelim.

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

Şimdi ise typings.json dosyasını ekleyelim. Typings.json dosyası angular2 applicationınızdaki TypeScript değişkenlerini tanımlamak için kullanılır.

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160621231320"
  }
}

Sonraki adımda da package.json dosyasını oluşturalım. Package json dosyası gereksinimiz olan packageların tanımladığı config dosyasıdır. Bu packagelar npm (Node Package Manager) ile yüklenecektir. Bunun için package.json dosyasını oluşturduktan sonra npm install komutu çalıştırılmalıdır. Package.json dosyası aşağıdaki gibidir.

{
  "name": "angular2-demo",
  "version": "1.0.0",
  "scripts": {
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install"
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.7",
    "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"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.1.0",
    "typescript": "^1.7.5",
    "typings":"^0.6.8"
  }
}

Package.json dosyasını oluşturduktan sonra Node.js command prompta gidip package.json dosyasının bulunduğu klasöre gidip npm install etmemiz gerekmektedir.

npm install

Npm ile packageları install ettikten sonra visual studio codeda node_modules klasörünün geldiğini göreceğiz.

1

Bundan sonraki adımda ise oluşturacağımız app componentlerin tutulduğu app isminde bir klasör oluşturalım. Aşağıdaki komutları kullanabiliriz:

mkdir app
cd app

Şimdi ise oluşturduğumuz app klasörünün altında .ts uzantılı bir typescript dosyası ekleyelim. Oluşturacağımız dosyanın adı app.component.ts olsun.

import {Component, View} from "angular2/core";

@Component({
   selector: 'my-app'
})

@View({
  template: '


<h2>My First Angular 2 App</h2>



'
})

export class AppComponent {

}
  • Yukarıdaki kod blogu, angular2/core modülü, Component ve View packagelarını import eder.
  • @Component, component classı ile metadatayı ilişkilendiren bir decorator görevini görür
  • my-app html taglerin component olarak kullanılabilmesini sağlar.
  • @View, angular’ın templatei nasıl render edeceğini belirler.

Sıradaki işlem olarak, main.ts dosyasını oluşturalım.

import {bootstrap} from "angular2/platform/browser"
import {AppComponent} from "./app.component"

bootstrap(AppComponent);
  • main.ts dosyası Angulara componentin yüklenmesini söyler.
  • Projeyi başlatmak için boostrap fonksiyonuna ihtiyacımız var. Componenti yüklemek ve oluşturduğumuz app’ı çalıştırmak için yukarıda oluşturduğumuz app.component.ts dosyasını import edip, bu dosyadaki AppComponent‘i boostrap fonksiyonu ile initialize etmemiz gerekmektedir.

Şimdi ise angular2-demo/ klasörünün altına index.html ekleyelim.

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fes6-shim%2F0.33.3%2Fes6-shim.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fsystemjs%2F0.19.20%2Fsystem-polyfills.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcode.angularjs.org%2F2.0.0-beta.6%2Fangular2-polyfills.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcode.angularjs.org%2Ftools%2Fsystem.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcode.angularjs.org%2Ftools%2Ftypescript.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcode.angularjs.org%2F2.0.0-beta.6%2FRx.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcode.angularjs.org%2F2.0.0-beta.6%2Fangular2.dev.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20%20%20System.config(%7B%0A%20%20%20%20%20%20%20%20transpiler%3A%20'typescript'%2C%0A%20%20%20%20%20%20%20%20typescriptOptions%3A%20%7B%20emitDecoratorMetadata%3A%20true%20%7D%2C%0A%20%20%20%20%20%20%20%20packages%3A%20%7B'app'%3A%20%7BdefaultExtension%3A%20'ts'%7D%7D%2C%0A%20%20%20%20%20%20%20%20map%3A%20%7B%20'app'%3A%20'.%2Fapp'%20%7D%0A%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20System.import('app%2Fmain')%0A%20%20%20%20%20%20%20%20%20%20%20%20.then(null%2C%20console.error.bind(console))%3B%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
  </head>
<body>
   <my-app>Loading...</my-app>
</body>
</html>

Son olarak projemizi compile ve run etmek için aşağıdaki komutu command promptan çalıştırıyoruz.

npm start

Komutu çalıştırdıktan sonra karşımıza aşağıdaki ekran gelecektir:

1

Visual studio codedaki projemizin son hali şu şekilde olacaktır:

1

Reklamlar