ANGULARJS 2

Google in “Superheroic” olarak javascript tabanlı Model-View-ViewModel mantığıyla çalışan bir kütüphanedir. Angular JS V1 2010 yılında ilk olarak çıkmış olup  geliştirilmesi devam etmektedir. Ancak bu yazımızın konusu olan Angular JS v2 ile daha komplike ve sorun çözücü hale geldiğini söylememiz mümkün. İki versiyonun karşılaştırılması ayrı bir yazı konusu olduğundan bu konuyu atlayıp başlangıcımızı yapalım.

Github : https://github.com/Gmotes/AngularJS2

NPM paket yönetim sistemini kullanıyor olacağız. Kendisiyle Node.js yazımızda tanışmıştık. NPM inin kullanacağı json dosyaları aşağıdaki gibi.

Package.json

Tsconfig.json

Typings.json

Package.json

Tipik bir package.json örneği. Bu kısımda özellikle “dependencies” kısmı önemli.  Hangi AngularJS kütüphanelerini kullanacağımızı belirtiyoruz. “devdependencies” ile ayırdığımız kütüphaneler ise production da kullanılmayacak kütüphanelerdir. (Ayrıntılı bilgi için  https://docs.npmjs.com/files/package.json)

{

  "name": "angular2Ornek",

  "version": "1.0.0",

  "scripts": {

    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",

    "lite": "lite-server",

    "postinstall": "typings install",

    "tsc": "tsc",

    "tsc:w": "tsc -w",

    "typings": "typings"

  },

  "license": "ISC",

  "dependencies": {

    "@angular/common": "2.0.0",

    "@angular/compiler": "2.0.0",

    "@angular/core": "2.0.0",

    "@angular/forms": "2.0.0",

    "@angular/http": "2.0.0",

    "@angular/platform-browser": "2.0.0",

    "@angular/platform-browser-dynamic": "2.0.0",

    "@angular/router": "3.0.0",

    "@angular/upgrade": "2.0.0",

    "core-js": "^2.4.1",

    "reflect-metadata": "^0.1.3",

    "rxjs": "5.0.0-beta.12",

    "systemjs": "0.19.27",

    "zone.js": "^0.6.23",

    "angular2-in-memory-web-api": "0.0.20",

    "bootstrap": "^3.3.6"

  },

  "devDependencies": {

    "concurrently": "^2.2.0",

    "lite-server": "^2.2.2",

    "typescript": "^2.0.2",

    "typings":"^1.3.2"

  }

}

TsConfig.js

Bu kısım AngularJS 2 ile gelen ts (typescript) uzantılı dosyaların derlenmesi amacıyla oluşturulan dosya.

{

  "compilerOptions": {

    "target": "es5",

    "module": "commonjs",

    "moduleResolution": "node",

    "sourceMap": true,

    "emitDecoratorMetadata": true,

    "experimentalDecorators": true,

    "removeComments": false,

    "noImplicitAny": false

  }

}

Bu dosyalara ilaveten systemjs.config.js ekliyoruz.

 (function (global) {

  System.config({

    paths: {

      // paths serve as alias

      'npm:': 'node_modules/'

    },

    // map tells the System loader where to look for things

    map: {

      // our app is within the app folder

      app: 'app',

      // angular bundles

      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',

      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',

      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',

      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',

      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',

      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',

      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',

      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      // other libraries

      'rxjs':                       'npm:rxjs',

      'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',

    },

 

    packages: {

      app: {

        main: './main.js',

        defaultExtension: 'js'

      },

      rxjs: {

        defaultExtension: 'js'

      },

      'angular2-in-memory-web-api': {

        main: './index.js',

        defaultExtension: 'js'

      }

    }

  });

})(this);

Nasıl başlıyoruz?

Öncelikle Node.js ile birlikte npm yi bilgisayarımıza yüklüyoruz. Boş bir klasör açıp bu 3 dosyayı koyduktan sonra “npm install” komutunu çalıştırıyoruz.

 “app” adıyla bir klasör oluşturalım. Bu klasörde 3 adet dosya oluşturalım. Sırasıyla isimleri;

“main.ts”,” app.module.ts” ve “app.component.ts” olsun.

Main.ts

Java dan anımsayacağınız üzere aslında uygulamamızı run edebilmek için kullanacağız.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

const platform = platformBrowserDynamic();

platform.bootstrapModule(AppModule);

Bu kısımda AngularJS 2 sözdizimine bakmakta yarar var. 

import { AppModule } from './app.module';   bu kod satırında app.module isimli dosyadan oluşacak sınıfdan bir örnek alıp AppModule ismiyle kullanıma alıyoruz.

‘@angular/platform-browser-dynamic'  bu kod ile de dependecy olarak aldığımız platform-browser-dynamic kütüphanesinden örnek alıyoruz.

App.module.ts

Typescriptimizi aşağıdaki gibi oluşturalım.

import { NgModule }      from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule }   from '@angular/forms';

import { AppComponent }  from './app.component';

@NgModule({

  imports: [

    BrowserModule,

    FormsModule

  ],

  declarations: [

    AppComponent           

  ],

  bootstrap: [ AppComponent ]

})

export class AppModule { }

Bu kısımda AppComponent sınıfını module içerisinde tanımlamış oluyoruz.

App.component.ts

“HelloWorld” dedik. Dikkatimizi selector kısmı çeksin. HTML kısmında tag olarak referans vereceğiz.

(Bu kısmı githubdan alınız.)

Son olarak ana klasöre index.html ekleyerek tamamlayalım.

(Bu kısmı githubdan alınız.)

Dosya yapımız :

"npm start" komutu ile uygulamamızı test ediyoruz.