Angular Bootstrap and Jquery Component, Http Client, Services, Declaration, Routing

Angular typeScript ile kullanılır. Angular’da geliştirme yapabilmek için bir editöre ve bir node’a ihtiyacımız var. Editör bizim kodlarımızı yazdığımız onu compile ettiğimiz klasörleyebildiğimiz ve o klasörlere rahat erişebildiğimiz, referanslar ekleyebildiğimiz kod yazmamıza yardımcı olan ortamlardır. -- Editörler vasıtasıyla çok daha rahat kod yazarız.

Birazda node ’dan bahsedelim. Node sitesine gittiğimiz zaman son sürümü bilgisayarımıza indirip kurabiliriz. Node ile javascript uygulamalarını çalıştırabiliyoruz yani yayına alabiliriyoruz veya node’ın package manager (npm) vasıtasıyla Angular ’da ihtiyaç duyduğumuz paketleri yönetebiliyoruz. Node paket yönetimi ve yaptığımız bir uygulamayı hızlıca build edip test ortamında yayınlamak için kullanacaz.

Angular CLI (Command Line Interface) ile yeni projeler oluşturabilir ve angular bileşenlerini hızlıca bu bileşen vasıtasıyla oluşturabiliyoruz. Projemizi yayına alacak ortamları kurabiliyoruz.
Angular CLI kurmak için aşağıdaki adımları takip edebiliriz.

kamilkapln:~$ npm install -g @angular/cli 
                             # angularCLI intstall
kamilkapln:~$ ng new angularApp           
                             # created AngularApp Proje
kamilkapln:~$ cd angularApp      
                             # angularApp locate
kamilkapln:~$ ng serve           
                             # angularApp run localhot:4200 default
kamilkapln:~$ ng serve --open         
                             # angularApp scanner open
kamilkapln:~$ ng serve --open --port 1453 
                             # angularApp run localhot:1453 port

Eğer Angular CLI (npm) ‘ı daha önce yüklemiş iseniz ve yeni versiyonu çıkmış ve güncellemek istiyorsanız. Aşağıdaki adımları sırasıyla takip edebiliriz.

Upgrade AngularCLI to the lastestVersion

kamilkaplan:~$ npm uninstall -g angular/cli
kamilkaplan:~$ npm cache clean
kamilkaplan:~$ npm install -g @angular/cli@lastest

Angular Bootstrap ve Jquer Eklemek

Önceliklepackage.json dosyasında dependencies bölümüne

"dependencies": {
  ...
  "bootstrap": "^4.3.1",
  "jquery": "^3.4.1"
},

bootstrap ve jquery ‘i ekliyoruz. Şimdi eklediğimiz paketlerin uygulamaya eklenmesi lazım, node_module ‘in altına eklenmesi lazım. Yeni paketler eklediğimiz için Dependencies ’i güncellemeliyiz. Eğer projemiz çalışıyorsa durdurup npm install komutunu çalıştırıp paketleri yükleyip tekrar projemizi çalıştırabiliriz.
Bootstrapt ve Jquery yüklediğimize göre şimdi bunları kullanalım bunun için angular.json dosyasını açıp gerekli yerlere bootstrapt vejquery klasör yollarını ekleyelim.

"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

Bu işlemide yaptıktan sonra bootstrap sayfasına girip kendimize bir menu seçelim ve çalıştıralım.

Navs

app.component.html

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Angular Component Kullanımı

Dinamik dataları kontrol etmek için angular ’da componentlerden yararlanırız. Uygulamamıza component eklemek çok kolay eğer visual studio code kullanıyorsanız eklentiler > angular files indirmenizi tavsiye ederim.

kamilkaplan:~$ ng generate component <componetName>

diyerek AngularCLI ile componet oluşturduk. Biz bir component oluşturduğumuz zaman componentimiz app.module.js içerisinde declarations içerisine eklemiş oluyoruz.

* Kısacası module içerinde componentleri barındırıyoruz *

kamilkaplan:~$ ng generate component post
kamilkaplan:~$ ng generate component directory

Sizler ile POST ve DIRECORY componentlerimizi oluşturduk. Şimdi bunların kullanımına bakalım.

app.module.ts

import {AppComponent} from './app.component';
import {PostComponent} from './post/post.component';
import {DirectoryComponent} from './directory/directory.component';
@NgModule({
    declarations: [
        AppComponent,
        PostComponent,
        DirectoryComponent,
    ],
    imports: [],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
}

Oluşturulan component leri sayfafımızda görüntülemek için app.component.html içerisine o componentimizin selector ismini vermeliyiz.

post.component.ts

import {Component, OnInit} from '@angular/core';
@Component({
   selector: 'app-post',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.css']
})

directory.component.ts

import {Component, OnInit} from '@angular/core';
@Component({
   selector: 'app-directory',
   templateUrl: './directory.component.html', 
   styleUrls: ['./directory.component.css'],
   providers: [DataService]
})

Şimdi bu componentlerden selector bölümlerini alıyoruz ve bizim app.component.ts içerine o component timizin sayfanın neresinde görünmesini istediğimize göre ekliyoruz.

app.component.html

<div class="container">
    <div class="col-md-6">
        <app-post></app-post>              // POST COMPONENT
    </div>                                     
    <div class="col-md-6">                 
        <app-directory></app-directory>    // DIRECTORY COMPONENT
    </div>
</div>

Angular HttpClientModule Kullanımı

HttpClient module vasıtasıyla API ‘lerimize yani service ‘lerimize istekte bullunup oradaki datayı tüketebiliriz yani alabiliriz. Kısacası Http ile GET POST PUT DELETE gibi operasyonları gerçekleştirebiliriz. Şimdi kendimize hazır bir api bulup buna istekte bulunup ve listeleme işlemi yapalım. Ben bir tane API buldum.

API : https://jsonplaceholder.typicode.com/posts

Öncelikle HttpClientModule ’ü kullanabilmemiz için öncelikleapp.module.ts dosyamızda onu import etmemiz gerekiyor.

import {HttpClientModule} from '@angular/common/http';

Yaptığımız bu işlem ile sadece import etmiş olduk imports sekmesinde ’de HttpClientModule ü yazmalıyız. Bu bize imports sekmesinde tanımlı moduller başkalarının yazdığı ama bizim uygulamamızda kullanmak isteğimiz kısacası import etmek istediğimiz modulleri içerir.

app.module.ts

import {AppComponent} from './app.component';
import {PostComponent} from './post/post.component';
import {DirectoryComponent} from './directory/directory.component';
import {HttpClientModule} from '@angular/common/http';
@NgModule({
    declarations: [
        AppComponent,
        PostComponent,
        DirectoryComponent,
    ],  
    imports: [ 
        HttpClientModule
    ],
    providers: [],                           // global service
    bootstrap: [AppComponent]
})
export class AppModule {
}

Şimdi kullanacağımız API için modelimizi oluşturalım. Bu işlemi neden yapıyoruz diye şimdi soruyorsunuz muhtemelen, sırada cevabı var. Bu işlemi bize API ’den dönen verilerin (columların) bu model tipinde döndüğünü biliyoruz ve ona göre http işlemini yapıyoruz. Yani apideki veriler bu formatta saklı bizim componentlerimize yani .html uzantılı dosyalarımıza yazdırırken kullanacağımız modeldir. Bunu eğer şimdi anlamadıysanız post.component.ts sayfasında çalışırken kesinlikle anlayacaksınız. Bize API ’den dönen değerleri ekrana yazdırmak istediğimizde ne ile yazdıracağımızı tam olarak bilmiyoruz. Bundan dolayı modeli tanımlıyoruz diyebilirim.

Öncelikle ` src ‘nin altında models klasörü oluşturuyoruz. Onun içine postModel adında bir model ekliyoruz.

postModel.ts

export class PostModel {  
   userId: number;  
   id: number;  
   title: string;   
   body: string;
}

Şimdi daha service ’lere gelmediğimiz için Http ile istekte bulunma işlemini şimdilik post.component.ts dosyamızda gerçekleştireceğiz. Normalde bu işlemleri service ile gerçekleştiririz. post.component.ts içerisine gelip HttpClientModule ü içinceki HttpClient sınıfını kullanacağız. Öncelikle onu import etmeliz.

import {HttpClient} from '@angular/common/http';

Import etmiş olduğumuz HttpClient bir service’dir. Service ’ler angular’da constructor içerisinde dependency injection ile oluşturulur.

post.component.ts

import {Component, OnInit} from '@angular/core';
import {HttpClient} from '@angular/common/http';
@Component({
  selector: 'app-post',
  templateUrl: './post.component.html',
  styleUrls: ['./post.component.css'],
})
export class PostComponent implements OnInit {
constructor(public http: HttpClient) {
  }
ngOnInit() {
  }
}

Şimdi http operasyonlarında GET i gerçekleştirelim. Bunun için bir metod tanımlayalım getProducts() bunun içerisinde gelip ürünleri ekranda göstermek istiyoruz. Yalnız bu ürünleri oluşturduğumuz modelde doldurduğumuzda .html sayfaına taşımamız lazım bizede array döndüğü için posts: PostModel[]; tipinde bir array tanımlıyoruz.

post.component.ts

import {Component, OnInit} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {PostModel} from './post.model';
@Component({
  selector: 'app-post',
  templateUrl: './post.component.html',
  styleUrls: ['./post.component.css'],
})
export class PostComponent implements OnInit {
  
  constructor(public http: HttpClient) {
  }
  
  posts: PostModel[];
  _url: string = 'https://jsonplaceholder.typicode.com/posts';
ngOnInit() {                      // page loaded
    this.getPosts();                 
  }                                
                                  
  getPosts() {                    // return model PostModel[] datas
     this.http.get<PostModel[]>(this._url)
       .subscribe(res => {
          this.posts = res
        });  
  }
}

Şimdi http işlemimizi yaptık bunları ben ekranda göstermek istiyorum. Bunun için post.component.html sayfasına gidiyoruz.

<p>
    POST COMPONENT
</p>
<table class="table">
    <tr *ngFor="let post of posts">
        <td>{{post.id}}</td>
        <td>{{post.title}}</td>
        <td>{{post.body}}</td>
    </tr>
</table>

Angular Services (Declaration) Kullanımı

Şimdi Angular ’da önemli bir konudan bahsetmek istiyorum. Az önce biz uygulmamızda getPosts() metodu içerisinde postları çağıracak kodu yazdık. Düşününki bu kodu onlarca sayfada kullanıyoruz. Yani onlarca sayfada listeliyoruz. Bunun için yazmış olduğumuz kodu tekrar tekrar yazmamız gerekir. Bunu yapmamak için Angular ’da service lerden yararlanıyoruz. Yani bu kosumuzu başka bir yere yazıyoruz, oradaki operasyonu kullanacağımız componentin içerisine enjecte ediyoruz. Injection işleminin nasıl yapıldığını birazdan göreceğiz. Bu şekilde service leri kullanıyoruz.

SERVİCE ler aynı zamanda uygulamanın yaşam döngüsünde nesne üretimi içinde ciddi faydalar sağlıyor. Yani daha performanslı uygulamalarda üretmiş oluyoruz. Şimdi uygulamamızda service leri kullanalım. Öncelikle ` src ‘nin altında providers klasörü oluşturuyoruz. Onun içine post adında bir service ekliyoruz.

kamilkaplan:~$ import generate service post  veya  import g s post

Service’ lerde birer class tır. expport edilmesi gerekiyor. En önemliside service olabilmesi için @Injectable decolatörüyle süslenmesi gerekiyor. Yani class injectable ile service haline geliyor.

post.service.ts

import {Injectable} from '@angular/core';
@Injectable({
    providedIn: 'root'
})
export class PostService {
constructor() {
    }
}

Şimdi post.component.ts içerisine yazmış olduğumuz getPosts() metodumuzu service içerisine yani post.service.ts içerisine yazabiliriz.

import {Injectable} from '@angular/core';
import {PostModel} from '../models/post';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs';

@Injectable({
    providedIn: 'root'
})
export class PostService {

    _url: string = 'https://jsonplaceholder.typicode.com/posts';

    constructor(private http: HttpClient) {
    }

    getPosts(): Observable<PostModel[]> {
        return this.http.get<PostModel[]>(this._url);
    }
}

Şimdi biz bu service i kullanmak için post.componet.ts içerisine import etmeliyiz.

import {PostService} from '../../providers/post.service';

import etme işlemini gerçekleştiğine göre bu bir service olduğu için bunu constructor içerisinde tanımlamalıyız.

post.component.ts

import {Component, OnInit} from '@angular/core';
import {PostModel} from '../../models/post';
import {PostService} from '../../providers/post.service';

@Component({
    selector: 'app-post',
    templateUrl: './post.component.html',
    styleUrls: ['./post.component.css'],
    providers: [PostService]                // local service
})
export class PostComponent implements OnInit {
    posts: PostModel[];

    constructor(private postService: PostService) {
    }

    ngOnInit() {
        this.getPosts();
    }

    getPosts() {
        this.postService.getPosts().subscribe(
            res => {
                this.posts = res;
            }
        );
    }
}

Angular Routing Kullanımı

Angularda öncemli konulardan bir taneside router routing mimarisidir. Öncelikle app.module.ts dosyamıza gidip RouterModule ü import etmeliyiz.

import {RouterModule, Routes} from '@angular/router';

Şimdi Angular ’a şunu anlatmamız gerekiyor. Gelen istek adresine bakıp hangi componenti açacağına karar vermesini söylemek için yapıyoruz aslında Routing işlemini. Bunun için bizim app.module.ts dosyasının içinde bir tane sabit tanımlamamız lazım.

const routes: Routes = [
    {path: '', redirectTo: '/post', pathMatch: 'full'},
    {path: 'post', component: PostComponent},
    {path: 'directory', component: DirectoryComponent},
    {path: '**', component: PageNotFoundComponent}
];

Bir module eklediğimiz zaman, bu module ü projemizde kullanabilmemiz için imports kısmına eklememiz lazım.

app.module.ts

import {AppComponent} from './app.component';
import {PostComponent} from './post/post.component';
import {DirectoryComponent} from './directory/directory.component';
import {HttpClientModule} from '@angular/common/http';
import {RouterModule, Routes} from '@angular/router';
const routes: Routes = [
    {path: '', redirectTo: '/post', pathMatch: 'full'},
    {path: 'post', component: PostComponent},
    {path: 'directory', component: DirectoryComponent},
    {path: '**', component: PageNotFoundComponent}
];
@NgModule({
    declarations: [
        AppComponent,
        PostComponent,
        DirectoryComponent,
    ],  
    imports: [ 
        HttpClientModule,
        RouterModule.forRoot(routes)
    ],
    providers: [],                           // global service
    bootstrap: [AppComponent]
})
export class AppModule {
}

Bizim projemizde değişken kısım neresi ise, yani size şöyle anlatayım ilk başta app.component.html içerisinde

<div class="container">
    <div class="col-md-6">
        <app-post></app-post>              // POST COMPONENT
    </div>                                     
    <div class="col-md-6">                 
        <app-directory></app-directory>    // DIRECTORY COMPONENT
    </div>
</div>

post componentimizi sayfanın bir yanına directory componentimizi sayfanın diğer bir yanına vermiştik. Şimdi sayfamızı düzenleyelim. Sayfamızda load (değişken) olacak kısım için yani değişken olan kısım için sayfamızda değişken route a göre değişken olacak kısım ’a
<router-outlet></router-outlet> isimli tag ’i vermemiz gerekiyor.

<div class="container">
    <div class="col-md-3">
         <app-menu></app-menu>                 // sabit kısım
    </div>                                      
    <div class="col-md-9">                     
         <router-outlet></router-outlet>       // değişken kısım
    </div>
</div>

PROJENİN ÇALIŞIR HALİ GİTHUB ADRESİMDE

KamillKAPLAN/Employee.UI

Umarım faydalı bir yazı olmuştur. Herkese mutlu kodlamalar.
KAMİL KAPLAN ( Software Engineer )

Bir sonraki makalede görüşmek ümidi ile sağlıcakla kalın.

KamillKAPLAN - Overview

Kamil KAPLAN - Software Engineer - Sentez Yazılım | LinkedIn