Sunday, March 16, 2014

Angular

Angular

https://www.youtube.com/watch?v=8auBpr_x2FQ  (Bangla)


avaScriptTypeScript
var num = 5;var num : number = 5;
var num = “Speros”;var num : string = “Speros”;
var anydata = 123;var anydata : any = 123;
var list = [1,2,3];var list : Array<number> = [1,2,3];
function square(num){
return num * num ;
    }
function square(num : number) : number {
return num * num ;
}

Angular Project + Video

Basic


AngularJS + WebAPI + EF

 

Country.html



<!DOCTYPE html>
<html ng-app="app">
<head>
    <title></title>
 
    <script src="Scripts/jquery-1.7.1.js"></script>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular-resource.js"></script>
    <script src="Scripts/mrangular/app.js"></script>
    <script src="Scripts/bootstrap.js"></script>
  
   
</head>
<body >
    <div ng-controller="CountryCtrl">
   Country Code: <input type="text" ng-model="country.CountryCode" />
    Country Name:<input type="text" ng-model="country.CountryName" />
        <input type="hidden" ng-model="country.Id" />
    <input type="button" ng-click="addCountry()" value="Save"/>
        <input type="button" ng-click="updateCountry(country)" value="Update"/>

    <table>
        <tr>
            <th>Code</th>
            <th>Name</th>
        </tr>
        <tr ng-repeat="country in countryList">
            <td>{{country.CountryCode}}</td>
            <td>{{country.CountryName}}</td>
            <td><input type="button" value="Update" ng-click="getCountryById(country.Id)"</td>
            <td><input type="button" value="Delete" ng-click="deleteCountry(country.Id)"</td>
        </tr>
    </table>
    </div>
</body>
</html>



app.js



var app = angular.module('app', ['ngResource']);

var url = 'api/Country/';


app.factory('countryfactory', function ($http) {
    return {
        getCountry: function () {
           
            return $http.get(url + 'Get');
        },
        getCountryById: function (id) {
            return $http.get(url + 'Get/' + id);
        },
        addCountry: function (country) {
            return $http.post(url + 'Post', country);
        },
        deleteCountry: function (id) {
            return $http.delete(url + 'Delete/' + id);
        },
        updateCountry: function (country) {
            return $http.put(url + 'Put/' + country.Id, country);
        }
    };
});


app.controller('CountryCtrl', function ($scope, countryfactory) {
    $scope.countryList = [];
    $scope.country = { };
   

    var getAllSuccess = function (data, status) {
       
        $scope.countryList = data;
    };

    var getByIdSuccess = function (data, status) {
        $scope.country = data;
    };

    var updateSuccess = function (data, status, headers, config) {
        $scope.country = {};
        return countryfactory.getCountry().success(getAllSuccess).error(errorCallback);
    };

    var deleteSuccess = function (data, status, headers, config) {
        return countryfactory.getCountry().success(getAllSuccess).error(errorCallback);
    };


    var successCallback = function (data, status, headers, config) {
        return countryfactory.getCountry().success(getAllSuccess).error(errorCallback);
    };

    var saveSuccess = function (data, status, headers, config) {
        successCallback(data, status, headers, config).success(function () {
            $scope.country = { };
        });
    };

    var errorCallback = function (data, status, headers, config) {
    };

    countryfactory.getCountry().success(getAllSuccess).error(errorCallback);

    $scope.addCountry = function () {
       
        countryfactory.addCountry($scope.country).success(saveSuccess).error(errorCallback);
    };

    $scope.deleteCountry = function (id) {
        countryfactory.deleteCountry(id).success(deleteSuccess).error(errorCallback);
    };

    $scope.updateCountry = function (country) {

        countryfactory.updateCountry(country).success(updateSuccess).error(errorCallback);
    };

    $scope.getCountryById = function (id) {
        countryfactory.getCountryById(id).success(getByIdSuccess).error(errorCallback)
    };
});

//module = main function
//App.factory
//  |     | 
//Module  service
    //$http(ngresource)  = $ ajax

CountryController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using MR.Business;
using MR.Data;

namespace MR.Web.Controllers
{
    public class CountryController : ApiController
    {

        CountryBL bl = new CountryBL();
        [HttpGet]
        // GET api/country
        public IEnumerable<Country> Get()
        {
            return bl.GetAll();
        }

        [HttpGet]
        // GET api/country/5
        public Country Get(Guid id)
        {
            return bl.GetBy(id);
        }

        [HttpPost]
        // POST api/country
        public void Post([FromBody] Country country)
        {
          
            bl.Save(country);
        }

        [HttpPut]
        // PUT api/country/5
        public void Put(Guid id, [FromBody]Country country)
        {
            bl.Update(id, country);
        }

        [HttpDelete]
        // DELETE api/country/5
        public void Delete(Guid id)
        {
            bl.Delete(id);
        }
    }
}


CountryBL

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using MR.Data;

namespace MR.Business
{
    public class CountryBL
    {
        public IEnumerable<Country> GetAll()
        {
            var ctx = new MREntities();
            return ctx.Countries.ToList();
        }

        public Country GetBy(Guid id)
        {
            var ctx = new MREntities();
            return ctx.Countries.Find(id);
        }

        public void Save(Country country)
        {
            var ctx = new MREntities();
            country.Id = Guid.NewGuid();
            ctx.Countries.Add(country);
            ctx.SaveChanges();
        }
        public void Update(Guid id, Country country)
        {
            var ctx = new MREntities();
            var query = ctx.Countries.Find(id);
            query.CountryCode = country.CountryCode;
            query.CountryName = country.CountryName;
            //ctx.Countries.Attach(query);
           
            //ctx.Entry(country).State = EntityState.Modified;
            ctx.SaveChanges();
        }

        public void Delete(Guid id)
        {
            var ctx = new MREntities();
            var query = ctx.Countries.Find(id);
            ctx.Countries.Remove(query);
            ctx.SaveChanges();
        }

    }
}

APP_START folder

WebApiConfig.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Http;

namespace MR.Web
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{action}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }
}


http://code.msdn.microsoft.com/CRUD-Grid-Using-AngularJS-84afaf13
Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)