Friday, 15 September 2017

Angular Project

1) create Two Folder :- Controllers and Factory (WebApplication2 is project name)

-----------------------------------------MytestConroller.js---------------------------------------------------------


angular.module('WebApplication2.Controllers').controller('MytestController', MytestController);

MytestController.$inject = ['$scope', 'MyButtonClickEvent', '$http'];

function MytestController($scope, MyButtonClickEvent, $http) {

    var vm = this;
    $scope.username = 'World';
    $scope.sayHello = function () {

        //First Code

        //$scope.greeting = MyButtonClickEvent.BtnClick($scope.username);

        //MyButtonClickEvent.GetData($scope.username).then(function (result) {

        //    $scope.greeting = result.data.aaData;
        //})

        ///Second Code

        var item = { 'msgName': $scope.username }

        MyButtonClickEvent.GetDataClass(item).then(function (result) {
            debugger
            $scope.greeting = result.data.aaData.msgName;
        })

        // third code

        //var item = [];
        //item.push({ msgName: $scope.username });
        
        //MyButtonClickEvent.GetDataList(item).then(function (result) {            
        //    $scope.greeting = result.data.aaData[0].msgName;
        //})
    };


}
-----------------------------------------MytestFactory.js---------------------------------------------------------

angular.module('WebApplication2.Services').service('MyButtonClickEvent', MyButtonClickEvent);

MyButtonClickEvent.$inject = ['$http'];

function MyButtonClickEvent($http) {

    var list = {};
    list.BtnClick = function (data) {
        return 'Hello  ' + data;
    }
    list.GetData = function (data) {

        return $http({
            url: '/Mytest/GetMsg',
            method: "GET",
            params: { MyData: data },
        });

    };
    list.GetDataClass = function (data) {

        return $http({
            url: '/Mytest/GetMsgClass',
            method: "GET",
            params: data
        });

    };

    list.GetDataList = function (myObject) {
        
        return $http({
            url: '/Mytest/GetMsgList',
            method: "post",
            data: myObject
        });

    };
    return list;


}
-----------------------------------App.js--------------------------------------------------------------------

angular.module('WebApplication2', ['WebApplication2.Controllers', 'WebApplication2.Services']);

angular.module('WebApplication2.Controllers', []);

angular.module('WebApplication2.Services', []);


-----------------------------------Index.cshtml----------------------------------------------------------
<div ng-controller="MytestController">
    Your name:
    <input type="text" ng-model="username">
    <button ng-click='sayHello()'>greet</button>
    <hr>
    {{greeting}}
</div>


<script src="~/Scripts/App.js"></script>
<script src="~/Scripts/Controllers/MytestConroller.js"></script>
<script src="~/Scripts/Factory/MytestFactory.js"></script>


-------------------------------------Controller.cs--------------------------------------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace WebApplication2.Controllers
{
    public class MytestController : Controller
    {
        // GET: Mytest
        public ActionResult Index()
        {
            return View();
        }
        [HttpGet]
        public JsonResult GetMsg(string MyData)
        {

            var JsonResult = Json(new { aaData = MyData }, JsonRequestBehavior.AllowGet);
            JsonResult.MaxJsonLength = Int32.MaxValue;
            return JsonResult;
        }


        [HttpGet]
        public JsonResult GetMsgClass(myList MyData)
        {

            var JsonResult = Json(new { aaData = MyData }, JsonRequestBehavior.AllowGet);
            JsonResult.MaxJsonLength = Int32.MaxValue;
            return JsonResult;
        }

        [HttpPost]
        public JsonResult GetMsgList(List<myList> MyData)
        {

            var JsonResult = Json(new { aaData = MyData }, JsonRequestBehavior.AllowGet);
            JsonResult.MaxJsonLength = Int32.MaxValue;
            return JsonResult;
        }
    }


}
public class myList
{
    public string msgName { get; set; }
}

----------------------------------Layout.cshtml-------------------------
<html ng-app="WebApplication2">
<head>
</head>
<body>
</body>
</html>

No comments:

Post a Comment

Row based styling for Primeng DataTable using Angualr 2,4

------------------------------------Component.Html---------------- < p -dataTable id = "Tbl" [ rowStyleClass ]= " Fu...