Angular Recipes ve Shopping Uygulaması 1.Kısım

Angular anlatımlarıma, yeni konuları öğrendikçe, bunları uygulamak üzere uygulamalar ekleyeceğim.

Şimdiye kadar anlatıklarımı tek bir uygulama da topluyorum.

Birden çok component’ in olduğu, pek çok directive’ in kullanıldığı basit bir uygulama ile başlıyoruz.

Uygulamanın bu konuda anlatılan kısmını içeren hali canlı olarak şu şekildedir;

Öncelikle aşağıdaki adımları uygulayalım;

• https://gelistir.net/165/angular-cli-kurulumu/ Teknik olarak olmazsa olmaz değil lakin pratikte olmazsa olmaz !
• https://gelistir.net/168/angular-cli-komutlari/#ng_new Yeni bir angular uygulaması oluşturuyoruz. Sorulara vereceğiz cevaplar ;

Would you like to add Angular routing? No
Which stylesheet format would you like to use? CSS

• https://gelistir.net/185/angular-projesine-bootstrap-eklemek/ projemize bootstrap css framework’ ü ekliyoruz.
• https://gelistir.net/190/bir-angular-uygulamasi-nasil-calismaya-baslar/ incelemekte fayda var.
• https://gelistir.net/168/angular-cli-komutlari/#ng_serve komutunu uygulayarak, projemizi çalıştırıyoruz.

Projemize bootstrap css framework’ ü dahil etmemizin sebebi, Sadece Angular’ ı anlatırken, zaman kaybettirecek css tanımlamaları ile uğraşmamak.

Uygulamanın kodlarının çalıştığı halini konunun sonunda bulabilirsiniz**

• Root Component
• Header Component
• Footer Component
• ve diğer component’ lerden oluşacak.

Teknik olarak problem olmasa da, pratikte düzen sağlaması açısından, tüm component’ leri app klasörü seviyesinde oluşturmamalıyız !!!

App klasörü seviyesinde sadece Root, Header ve Footer component olması daha sağlıklı bir klasör yapısı olacaktır.

Root component olarak adlandırdığımız AppComponent halihazırda, cli üzerinden uygulamamızı oluşturduğumuz için bulunuyor.

Uygulama’ nın içeriği;

Uygulamamız internette binlerce kez örneklendirilmiş, tarif ve alışveriş listesi örneği olacak;

• Tarif listesi, tarif’ in içeriği
• Alışveriş listesi ve alışveriş listesinin düzenlenmesi

HeaderComponent

Şimdi ilk olarak HeaderComponent’ i oluşturalım.
Aşağıdaki komut ile cli üzerinden component’ lerimizi oluşturacağız.

ng generate component componentIsmi

Lakin ilk component’ i elle kendimiz oluşturmamız faydalı olacaktır.

src/app klasörü altında header klasörü açıyoruz ve içerisinde "header.component.ts" TypeScript dosyasını oluşturuyoruz.

CLI ile yapmak istiyorum derseniz,

ng generate component header

komutu ile de gerçekleştirebilirsiniz.

Component class’ ımızda öncelikle Component interface’ i import ediyoruz;

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

Ardından Component decorator ile Component’ imizin tanımlamalarını yapıyoruz;

@Component({
    selector : 'app-header',
    templateUrl: './header.component.html'
})

Component decorator, javascript objesi içerisinde selector, templateUrl vb. gibi parametrelere sahip olabilir.

selector parametresi, component’ in hangi element ismi ile template’ lerde yer alacağını belirtir. Header Component

<app-header></app-header>

Element’ i ile varlık gösterecek.

templateUrl ise, component’ in template’ inin html dosyasını belirtir.

Ve en son, Component class’ ızı tanımlıyoruz;

export class HeaderComponent {

}

Component’ in son hali;

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

@Component({
    selector : 'app-header',
    templateUrl: './header.component.html'
})

export class HeaderComponent {

}

header klasöründe header.component.html dosyasımızı da oluşturup içine şimdilik herhangi bir şey yazıyoruz.

Component’ lerin hepsinin app module’ de belirtilmiş olması gerekiyor. Eğer ki component’ i cli ile oluşturmadıysak, bu işlemi de elle yapmamız gerekiyor.

app.module.ts dosyasında öncelikle HeaderComponent’ i import ediyoruz;

import { HeaderComponent } from './header/header.component';

Ardından declarations dizisine, component’ imizi eklememiz gerekiyor ;

declarations: [
    AppComponent,
    HeaderComponent
  ],

Artık headerComponent’ i appComponent’ e yani master layout olarak ta adlandırabileceğimiz, uygulamamızın ana template’ ine ekleyelim;

app.component.html dosyasına ekliyoruz;

<app-header></app-header>

Sonuç;

Header Component’ in içinde navigation bar olması lazım. Lakin navigation bar’ ın html ve css tanımlamaları ile uğraşmıyoruz, direk bootstrap’ in navigation component’ ini kullanıyoruz, çünkü konumuz css değil Angular 🙂

<nav class="navbar navbar-default">

    <div class="container-fluid">

        <div class="navbar-header">
            <a href="#" class="navbar-brand">Recipe Book</a>
        </div>

        <div class="collapse navbar-collapse">

            <ul class="nav navbar-nav">
                <li><a href="#">Recipes</a></li>
                <li><a href="#">Shopping List</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" role="button">Manage <span class="caret"></span> </a>

                    <ul class="dropdown-menu">
                        <li><a href="#">Save Data</a></li>
                        <li><a href="#">Fetch Data</a></li>
                    </ul>

                </li>

            </ul>

        </div>

    </div>

</nav>

Recipes Component

Recipes Component’ in 3 alt component’ i olacak.

• Recipe Detail
• Recipe List
• Recipe Item (Recipe List’ in alt component’ i)

Alt Component’ ler Recipe Component klasörünün içinde olacak. Bu sayede daha derli toplu bir klasör anlayışı uygulamış olacağız.

Öncelikle Recipe Component’ i oluşturuyoruz;

ng-cli ile yeni bir component oluşturma komutunu yazarken, komutun kısaltılmış hali ile yazıcam;

ng g c recipes

"g" harfi "generate" , "c" harfi component keyword’ ünün kısaltılmış hali.

Ardından alt component’ leri oluşturmaya başlıyoruz. Alt component’ leri oluşturken, recipes klasörü içinde olmasını sağlamak amaçlı, component isminin başına recipe klasör ismini de ekliyorum;

ng g c recipes/recipe-detail
ng g c recipes/recipe-list
ng g c recipes/recipe-list/recipe-item

recipe-item component’ in de recipe-list component’ in altında oluşturulduğunu gözden kaçırmayın 🙂

Component oluşturmayı ng-cli ile yaptığım için, app module dosyasında, gerekli import ve declaration işlemlerinin otomatik yapıldığına da dikkat çekerim.

import { RecipesComponent } from './recipes/recipes.component';
import { RecipeDetailComponent } from './recipes/recipe-detail/recipe-detail.component';
import { RecipeListComponent } from './recipes/recipe-list/recipe-list.component';
import { RecipeItemComponent } from './recipes/recipe-list/recipe-item/recipe-item.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    RecipesComponent,
    RecipeDetailComponent,
    RecipeListComponent,
    RecipeItemComponent
  ],

Model ile çalışmak

Model, teknik açından bir javascript objesidir. Javascript objesi ile veri yapılarımızı kodlarız.

Örneğin;

book = {
    id:1
    name : 'to be or not to be',
    price: 99999
}

Eğer ki, uygulamamızda varlık gösterecek veri yapılarını model olarak tanımlarsak, verimiz ile çalıştığımız her kod parçasında bu objeleri kullanır, daha sağlıklı bir mapleme yapabiliriz. Model oluştururken, model’ in her bir niteliğinin veri tipini de belirtebilirsiniz, bu sayede yanlış veri tipinde bir mapleme yapmaya kalktığınızda uyarı alabilirsiniz.

Angular da model bir TypeScript class’ ıdır ve modelIsmi.model.ts adında oluşturulur.

Recipe Model

recipes klasörü altında, recipe.model.ts dosyası oluşturup, aşağıdaki gibi dolduruyoruz;

export class Recipe {
    public name: string;
    public description: string;
    public imagePath: string;

    constructor(name: string, description:string, imagePath: string){
        this.name = name;
        this.description = description;
        this.imagePath = imagePath;
    }

}

TypeScript class, "export class" ifadesi ile tanımlanıyor.

Tüm öznitelikleri kendine özgü bir access-modifier(erişim düzenleyici) ile tanımlayabilirsiniz(public, private, protected) ve veri tipini yazabilirsiniz. Veri tipini belirlememek isterseniz, any ifadesini kullanabilirsiniz.

constructor kısmında, ise klasik oop pratikleri işlemeye devam ediyor.

Recipes Component’ te Veri ile çalışmak

Recipe Model’ i oluşturduğumuza göre artık "dummy" data oluşturup, Recipe Component ve alt component’ ler de kullanabiliriz.

Henüz Angular’ da ilk uygulama örneğinde olduğumuz için, HTTP request ile serverdan veri alıp, çalışamayacağız. Onun yerine verilerimizi kendimiz tanımlayacağız.

Recipe List Component’ te öncelikle Recipe Model’ i import ediyoruz, ardından Recipe Model’ lerden oluşturduğumuz Recipe Objelerini barındıracak recipe array’ ini açıp, içini dolduruyoruz;

import { Component, OnInit } from '@angular/core';
import {Recipe} from '../recipe.model';

@Component({
  selector: 'app-recipe-list',
  templateUrl: './recipe-list.component.html',
  styleUrls: ['./recipe-list.component.css']
})
export class RecipeListComponent implements OnInit {

  recipes : Recipe[] = [
    new Recipe('Tarif 1','şu şekilde yapılır','https://tinyurl.com/y6n4zlm7')
  ]

  constructor() { }

  ngOnInit() {
  }

}

• recipes adında, Recipe Model’ in den oluşturulmuş objeleri barındıran bir dizi açıp, içerisine Recipe objesi girdik.

Recipe dizisini listelemek

ngFor directive’ i ile recipes dizisini listeleyeceğiz, lakin listelerken bazı html elementlerine ihtiyacımız var, bunları yine bootstrap’ in component’ lerinden alıyoruz. Html ve css kısmına takılmadan şu kodu yazıyoruz;

recipe-list.component.html

<div class="row">
    <div class="col-xs-12">
        <button class="btn btn-success">New Recipe</button>
    </div>
</div>
<hr>
<div class="row">
    <div class="col-xs-12">
        <a href="#" class="list-group-item clearfix" *ngFor="let recipe of recipes">
            <div class="pull-left">
                <h4 class="list-group-item-heading">{{recipe.name}}</h4>
                <p class="list-group-item-text">{{recipe.description}}</p>
            </div>
            <span class="pull-right">
                <img src="{{recipe.imagePath}}" class="img-responsive">
            </span>
        </a>
        <app-recipe-item></app-recipe-item>
    </div>
</div>

Ardından app.component.html template’ ine recipe-list component’ in selector’ ünü ekliyoruz;

<app-header></app-header>

<app-recipe-list></app-recipe-list>

Recipe Detaylarını Göstermek

Öncelikle app.component.html template’ inde değişikliğe gidelim;

<app-header></app-header>

<div class="container">

<app-recipes></app-recipes>

</div>

Recipes Component de list ve detail component’ lerini barındırsın;

<div class="row">

    <div class="col-md-5">
        <app-recipe-list>

        </app-recipe-list>
    </div>

    <div class="col-md-7">

        <app-recipe-detail>

        </app-recipe-detail>

    </div>

</div>

Recipe Detail Component‘ te, Recipe’ in detaylarını daha net görebileceğiz ve ilgili recipe üzerinde aksiyon alabileceğiz, örneğin recipe’ i shopping list’ e ekleme, çıkarma ve recipe’ i düzenleme gibi.

Recipe Detail Component Template’ in de, 1 adet Recipe’ i detayları ile göstermek için şu template’ i geliştirelim;

<div class="row">
    <div class="col-xs-12">
<img src="" alt="" class="img-responsive">
    </div>
</div>

<div class="row">
    <div class="col-xs-12">
        <h1>Recipe Name</h1>
    </div>
</div>

<div class="row">
    <div class="col-xs-12">
        <div class="button-group">
            <button class="btn btn-primary dropdown-toggle">Manage Recipe
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">Add ingredients to shopping list</a></li>
                <li><a href="#">Edit Recipe</a></li>
                <li><a href="#">Delete Recipe</a></li>

            </ul>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-xs-12">
        Description
    </div>
</div>

<div class="row">
    <div class="col-xs-12">
        ingredients 
    </div>
</div>

Şimdilik recipe list’ teki recipe lere tıklama event’ ini yazmadığımız için, detail kısmında statik içerik var. Lakin 2.Kısım’ da devamını ele alıcaz.