AngularJ2 Data Binding ve Data Display

Merhaba, bir önceki makalemde nasıl yeni bir angularJs2 projesi oluşturacağımdan bahsetmiştim. Bu makalemde ise angularjs2’de data binding ve data display’den bahsedeceğim.

Önceki makalemde oluşturduğum app klasörünün altına data_binding_main.ts doyasını ekliyorum.


import {bootstrap} from 'angular2/platform/browser';           //importing bootstrap function
import {AppComponent} from "./data_binding_app.component";     //importing component function

bootstrap(AppComponent);

Şimdi de data_binding_app.component.ts isminde içinde component barındıran bir TypeScript dosyası ekleyelim


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

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

@View({
  template: `


<h3>İsim : {{name}}</h3>



<h3>Soyisim : {{surname}}</h3>



<h3>Şehir : {{City}}</h3>



<h2>Showing data using array property with NgFor</h2>



<h3>My favorite is: {{myfavorite}}</h3>


List of Favorites:


<ul>


<li *ngFor="#favorite of favorites" (click)="onItemClicked(favorite)">
          {{ favorite }}
       </li>

    </ul>

    <input type="text" [(ngModel)]="clickedItem">
    `
})

export class AppComponent {
   name: 'Mustafa';
   surname:'Alkan';

City: string;
constructor() {
   this.City = 'İzmir';
}

favorites = ['Sport', 'Music', 'Sinema', 'Swimming'];
   myfavorite = this.favorites[1];

   public clickedItem = "";
     onItemClicked(Item) {
        this.clickedItem = Item;
     }
}

Yukarıda yaptığımız işleri kısaca özetlemek istersek, AppComponent ismiyle yarattığımız component içerisinde name, surname ve City olarak 3 değişken oluşturup, bunlara değer atadık. Önceki makalemde anlattığım üzere, AngularJS2’de scopelar kaldırılmıştı ve artık bu gibi değişkenleri componentler içerisinde tanımladığımızı söylemiştik. Böylece component içerisinde oluşturduğumuz dataları son kullanıcıya view içinde göstermiş olduk.

Favorites isminde bir array nesnesi oluşturduk ve array içerisindeki her bir itemi view içerisindeki templatede *ng-for directive ile bind ettik. Listemizdeki herhangi bir nesneye tıkladığımızda, gidip aşağıdaki text inputta görünmesini istiyorsak bunu da aşağıda gördüğümüz click eventi ile gerçekleştirebiliriz.

(click)="onItemClicked(favorite)"

onItemClicked fonksiyonu ise, AppComponent içerisinde tanımlanmış bir fonksiyondur ve görevi clickedItem değişkenine, fonksiyon içerisinde gelen parametreyi set etmektir.

public clickedItem = "";
     onItemClicked(Item) {
        this.clickedItem = Item;
     }
<input type="text" [(ngModel)]="clickedItem">

Şimdi databinding.html dosyasımızı oluşturalım.


<html>
   <head>
      <title>Data Binding</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
      <script src="https://code.angularjs.org/2.0.0-beta.6/angular2-polyfills.js"></script>
      <script src="https://code.angularjs.org/tools/system.js"></script>
      <script src="https://code.angularjs.org/tools/typescript.js"></script>
      <script src="https://code.angularjs.org/2.0.0-beta.6/Rx.js"></script>
      <script src="https://code.angularjs.org/2.0.0-beta.6/angular2.dev.js"></script>
      <script>
         System.config({
           transpiler: 'typescript',
           typescriptOptions: { emitDecoratorMetadata: true },
           packages: {'app': {defaultExtension: 'ts'}},
           map: { 'app': './app' }
         });
         System.import('app/data_binding_main')
               .then(null, console.error.bind(console));
      </script>
   </head>
   <body>
      <my-app>Loading...</my-app>
   </body>
</html>

NodeJS command promptan databinding.html dosyasını içeren klasöre gidelim ve projemizi npm start komutuyla çalıştıralım.

1

Reklamlar

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

AngularJS, Asp.net Mvc 5 ve Web Api ile Crud İşlemlerinin Gerçekleştirilmesi

  • Visual studiomuzu başlatıyoruz.
  • Create a new project.
  • Web template seçiyoruz ve ardından ASP.NET Web Application seçiyoruz.
  • Projeye isim verip, projenin oluşturalacağı dizini seçiyoruz.
  • Next tıklıyoruz.
  • MVC seçiyoruz ve code referanslardan Web Apiyi seçip projemize dahil ediyoruz.

MVC template

Kolay bir örnek olması açısından education adında bir entity type oluşturuyorum.

public partial class Education
    {
        public Education()
        {
            this.Members = new List<Member>();
        }

        public int ID { get; set; }
        public string Education1 { get; set; }
        public virtual ICollection<Member> Members { get; set; }
    }

Yeni bir context class oluşturalım.

public class EducationContext : DbContext
{
     public EducationContext()
         : base("name=DefaultConnection")
     {
         base.Configuration.ProxyCreationEnabled = false;
     }
     public DbSet<Education> Education{ get; set; }
     public DbSet<Member> Member{ get; set; }
}

Şimdi ise tüm entity classlar için tek tek repository oluşturmaktansa Generic Repository oluşturacağız ve her bir poco classlar için tek bir repository yeterli olacak.

public class GenericRepository<TEntity> : IGenericRepository<TEntity> where TEntity : class
    {
        private readonly EducationContext _context;
        private readonly DbSet<TEntity> _dbSet;

        public GenericRepository(EducationContext context)
        {
            _context = context;
            _dbSet = context.Set<TEntity>();
        }

        /// <summary>
        /// Tüm kayıtlar.
        /// </summary>
        /// <returns></returns>
        public virtual IQueryable<TEntity> GetAll()
        {
            return _dbSet;
        }

        /// <summary>
        /// Kayıt bul.
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
        public virtual TEntity Find(int id)
        {
            return _dbSet.Find(id);
        }

        /// <summary>
        /// Kayıt ekle.
        /// </summary>
        /// <param name="entity"></param>
        public virtual void Insert(TEntity entity)
        {
            _dbSet.Add(entity);
            _context.SaveChanges();
        }

        /// <summary>
        /// Kayıt güncelle.
        /// </summary>
        /// <param name="entity"></param>
        public virtual void Update(TEntity entity)
        {
            _dbSet.Attach(entity);
            _context.Entry(entity).State = EntityState.Modified;
            _context.SaveChanges();
        }

        /// <summary>
        /// Kayıt sil.
        /// </summary>
        /// <param name="entity">Kayıt</param>
        public virtual void Delete(TEntity entity)
        {
            if (_context.Entry(entity).State == EntityState.Detached)
            {
                _dbSet.Attach(entity);
            }
            _dbSet.Remove(entity);
            _context.SaveChanges();
        }
    }

Generic Repository’i türettiğimiz IGenericRepository interfacesini oluşturalım.

public interface IGenericRepository where TEntity : class
{
/// Tüm kayıtlar.
IQueryable GetAll(); ///
/// Kayıt bul. ///
TEntity Find(int id); ///
/// Kayıt ekle. ///
void Insert(TEntity entity); ///
/// Kayıt güncelle. ///
void Update(TEntity entityToUpdate); ///
/// Kayıt sil. ///
void Delete(TEntity entityToDelete);
}

Web api controller oluşturmadan önce education bilgileriyle işlem yapabilmek için service oluşturalım.

public class EducationService : IEducationService
    {
        private readonly IGenericRepository<Education> _educationRepository;

        public EducationService(IGenericRepository<Education> educationRepository)
        {
            _educationRepository = educationRepository;
        }
        public IQueryable<Education> GetAll()
        {
            var educations = _educationRepository.GetAll();
            return educations;
        }
        public Education Find(int id)
        {
            var educations = _educationRepository.GetAll().FirstOrDefault(a => a.ID == id);
            return educations;
        }

        public void Insert(Education education)
        {
            _educationRepository.Insert(education);
        }

        public void Update(Education education)
        {
            _educationRepository.Update(education);
        }

        public void Delete(Education education)
        {
            _educationRepository.Delete(education);
        }
    }

Şimdi ise servisimizin türetildiği IEducationService interfacesini oluşturalım

public interface IEducationService
{
IQueryable GetAll(); ///
Education Find(int id); ///
void Insert(Education education);
void Update(Education education);
void Delete(Education education); 

}

Şimdi sıra geldi web apiyi oluşturmaya. Web api controllerin içerisinde tüm transactionları gerçekleştirmek için tüm http methodları kullanacağız. Bunlar: GET, POST, PUT, DELETE methodlarıdır.

public class EducationApiController : ApiController
    {
        private readonly IEducationService service =  ServiceFactory.Get<IEducationService>();

        [HttpGet()]
        //[Route("api/educations")]
        public IEnumerable<Education> Get()
        {
                var list = service.GetAll().ToList().AsEnumerable();
                return list;
            
        }
        //[Route("api/education/{id}")]
        public Education Get(int id)
        {
            try
            {
                var education = service.GetAll().FirstOrDefault(p => p.ID == id);
                if(education == null)
                {
                    throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.NotFound));
                }
                return education;
            }
            catch(Exception ex)
            {
                return null;
            }
        }

        public HttpResponseMessage Post(Education education)
        {

                try
                {
                    var education1 = new Education();
                    service.Insert(education);

                    HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Created, education1);
                    response.Headers.Location = new Uri(Url.Link("DefaultApi", new { id = education1.ID }));
                    return response;
                }
                catch(Exception ex)
                {
                    return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState);
                    //unitofwork.Rollback();
                }
                
        }

        public HttpResponseMessage Put(Education education)
        {
            if (!ModelState.IsValid)
            {
                return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState);
            }

            try
            {
                service.Update(education);
            }
            catch (DbUpdateConcurrencyException ex)
            {
                return Request.CreateErrorResponse(HttpStatusCode.NotFound, ex);
            }

            return Request.CreateResponse(HttpStatusCode.OK);
        }

        public HttpResponseMessage Delete(int id)
        {
            var education1 = new Education();
            education1 = service.Find(id);
            if (education1 == null)
            {
                return Request.CreateResponse(HttpStatusCode.NotFound);
            }
            try
            {
                service.Delete(education1);
            }
            catch (DbUpdateConcurrencyException ex)
            {
                return Request.CreateErrorResponse(HttpStatusCode.NotFound, ex);
            }
            return Request.CreateResponse(HttpStatusCode.OK, education1);
        }


    }

Web api controllerda dependency injection kullanamadığımız için Service Factory adında generic bir helper ekleyeceğiz ve bu helper web api controllera Education Servicein enjekte edilmesini sağlayacak.

public static class ServiceFactory
    {
        public static THelper Get<THelper>()
        {
            if (HttpContext.Current != null)
            {
                var key = string.Concat("factory-", typeof(THelper).Name);
                if (!HttpContext.Current.Items.Contains(key))
                {
                    var resolvedService = DependencyResolver.Current.GetService<THelper>();
                    HttpContext.Current.Items.Add(key, resolvedService);
                }
                return (THelper)HttpContext.Current.Items[key];
            }
            return DependencyResolver.Current.GetService<THelper>();
        }
    }

Şimdi ise Manage Nuget Package Manager kullanarak Angular JS kütüphanelerini solutiona ekleyelim.

search AngularJS

Şimdi yeni bir javascript dosyası oluşturalım ve angular functionları ekleyelim. Bu angular controllerının adına educationController koyduk. İlerde oluşturacağımız view sayfasında controllerı bu isimle çağıracağız.

var myApp = angular.module('myApp', []).controller('educationController',
['$scope', '$http', function ($scope, $http) {
    $scope.loading = true;
    $scope.addMode = false;

    function GetEducations()
    {
        $http.get('/api/EducationApi/').success(function (data) {
            $scope.educations = data;
            $scope.loading = false;
        })
            .error(function () {
                $scope.error = "An Error has occured while loading posts!";
                $scope.loading = false;
            });
    }
    //Used to display the data
    GetEducations();

    $scope.toggleEdit = function () {
        this.education.editMode = !this.education.editMode;
    };
    $scope.toggleAdd = function () {
        $scope.addMode = !$scope.addMode;
    };

    //Used to save a record after edit
    $scope.save = function () {
        $scope.loading = true;
        var educate = this.education;
        $http.put('/api/EducationApi/put',  educate).success(function (data) {
            alert("Saved Successfully!!");
            educate.editMode = false;
            $scope.loading = false;
            GetEducations();
        }).error(function (data) {
            $scope.error = "An Error has occured while Saving Friend! " + data;
            $scope.loading = false;

        });
    };

    //Used to add a new record
    $scope.add = function () {
        $scope.loading = true;
        $http.post('/api/EducationApi/post', this.neweducation).success(function (data) {
            alert("Added Successfully!!");
            $scope.addMode = false;
            $scope.educations.push(data);
            $scope.loading = false;
            GetEducations();
        }).error(function (data) {
            $scope.error = "An Error has occured while Adding Friend! " + data;
            $scope.loading = false;

        });
    };

    //Used to edit a record
    $scope.deleteeducation = function () {
        $scope.loading = true;
        var educationid = this.education.id;
        $http.delete('/api/EducationApi/delete' + educationid).success(function (data) {
            alert("Deleted Successfully!!");
            $.each($scope.educations, function (i) {
                if ($scope.educations[i].ID === educationid) {
                    $scope.educations.splice(i, 1);
                    return false;
                }
            });
            $scope.loading = false;
            GetEducations();
        }).error(function (data) {
            $scope.error = "An Error has occured while Saving Friend! " + data;
            $scope.loading = false;

        });
    };

}]);

Shared klasörü altındaki _Layout.cshtml sayfasını açıp 2 farklı scripti render etmemiz gerekiyor.

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/angularjs")
    @Scripts.Render("~/bundles/education")

Sıradaki işlemimiz view oluşturup bunun üzerinde çalışmak.



@{
    ViewBag.Title = "EducationIndex";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Education </h2>
<style>
    #mydiv {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        background-color: grey;
        opacity: .8;
    }

    .ajax-loader {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -32px; /* -1 * image width / 2 */
        margin-top: -32px; /* -1 * image height / 2 */
        display: block;
    }
</style>
@*<script src="~/Scripts/EducationController.js"></script>*@
<div data-ng-app="myApp">
<div data-ng-controller="educationController" class="container">
    <strong class="error">{{ error }}</strong>
    <div id="mydiv" data-ng-show="loading">
        <img src="~/Images/ajax-loader.gif" class="ajax-loader" />
    </div>
    <p data-ng-hide="addMode"><a data-ng-click="toggleAdd()" href="javascript:;" class="btn btn-primary">Add New</a></p>
    <form name="addEducation" data-ng-show="addMode" style="width:600px;margin:0px auto;">
        <label>Education:</label><input type="text" data-ng-model="neweducation.Education1" required />

        <br />
        <br />
        <input type="submit" value="Add" data-ng-click="add()" data-ng-disabled="!addEducation.$valid" class="btn btn-primary" />
        <input type="button" value="Cancel" data-ng-click="toggleAdd()" class="btn btn-primary" />
        <br /><br />
    </form>
    <table class="table table-bordered table-hover" style="width:800px">
        <tr>
            <th>#</th>
            <td>Education</td>

        </tr>

        <tr data-ng-repeat="education in educations track by $index">
            <td><strong data-ng-hide="education.editMode">{{ education.id }}</strong></td>
            <td>
                <p data-ng-hide="education.editMode">{{ education.education1 }}</p>
                <input data-ng-show="education.editMode" type="text" data-ng-model="education.education1" />
            </td>
            <td>
                <p data-ng-hide="education.editMode"><a data-ng-click="toggleEdit(education)" href="javascript:;">Edit</a> | <a data-ng-click="deleteeducation(education)" href="javascript:;">Delete</a></p>
                <p data-ng-show="education.editMode"><a data-ng-click="save(education)" href="javascript:;">Save</a> | <a data-ng-click="toggleEdit(education)" href="javascript:;">Cancel</a></p>
            </td>
        </tr>
    </table>
    <hr />


</div>
</div>

Şimdi uygulamamızı çalıştıralım.

Ekran Alıntısı1

Ekran Alıntısı2

Ekran Alıntısı3

Ekran Alıntısı4

Bu makalede MVC 5 ile AngularJS ve Web Api ile CRUD işlemleri nasıl yapılır onu öğrendik. Bir dahaki makalede görüşmek dileğiyle..