[Angular js][asp.net mvc] Angular js 사용법

오늘은 Angualr js를 asp.net mvc에서 사용하는 방법을 포스팅하겠습니다.

	

	

            
                직번
                이름
                기능조직
            
			
            
            검 색
       
	

            

                
{{item.usr_idno}}
                
{{item.usr_namk}}
                
{{item.usr_jtttnm}}
                
{{item.usr_funcnm}}
                
{{item.usr_funccd}}
            
        

일단 html을 먼저 볼게요.

ng-app은 단 하나 선언할 수 있고 ng-controller는 부분 별로 자기가 원하는 곳을 지정할 수 있습니다.

ng-click을 통해 controller에 있는 함수를 불러 실행할 수 있습니다.

var userApp = angular.module("myApp", ['ngAnimate']);

//service
 userApp.service('userService', function ($http) {
        this.getData = function (search, search_group) {
            var res = $http({
                method: 'POST',
                url: '/approvalline/SearchApprUser',
                data: {
                    search: search,
                    search_group: search_group,
                },
                headers: {
                    'Content-Type': 'application/json; charset=UTF-8'
                }
            });

            return res;
        };
 });

//controller
userApp.controller('myCtrl', function ($scope, userService) {
        $scope.Message = '';
        $scope.search_group = "ID";
        $scope.search_user = function () {
            var userlist = userService.getData($scope.search, $scope.search_group);
            userlist.then(function (resp) {
                var users = resp.data;
                $scope.Users = users;
            });
        }
});

controller의 지시를 수행하는 service를 만들었습니다. 'userService'라는 이름을 주었고 post방식으로 json형태의 값을 가져올 수 있습니다.

json 형태의 데이터를 return시켜 controller에서 받아 scope내에 있는 Users에게 넣어줍니다.

그럼 Html에 포함되어 있는 Users가 for문을 돌면서 테이블에 데이터를 넣고 결과를 보여줍니다.

asp.net mvc의 controller에서 service의 호출을 받는 함수를 보여드릴게요.

public JsonResult SearchApprUser(string search="", string search_group="")
{
        List users = db2.GB_INT_GET_APPR_LINE_USERS(search, search_group).ToList();
        return Json(users, JsonRequestBehavior.AllowGet);
}

controller에서 프로시저를 호출해 List로 데이터를 받아오고 그 데이터를 json형태로 넘겨주면 service에서 이를 받아 활용할 수 있습니다.