[AngularJS] 주의사항 및 놓친 부분 정리

1. rootScope

rootScope를 사용하면 rootScope 내의 코드들만 실행된다. 그 밑에 변수 선언이나 값을 넣어도 반영되지 않음 !

 

ex)

$rootScope.confirm("정말 등록 하시겠습니까?", function (){
    $http({
        url: Config.serverURL+"...",
        method: 'POST',
        params: $scope.sendParam
    }).then(
    function (){
        $rootScope.alert("성공 하였습니다.");
    }, function () {
    	$rootScope.alert("실패 하였습니다.");
    });
});

////// 여기 이후엔 적용 X /////

 

 

2. data-ng-model vs data-model

angularJS는 two way binding이 가능해서 controller단(js)과 view(html) 사이 양방향으로 데이터를 출력하고 설정할수가 있는데, 모달에서 값을 변경하거나 입력할 때는 ng-model을 사용하고, 변화가 없을 데이터에는 (이미 값이 정해져있는 배열 같은 경우) data-model을 사용한다.

 

ex)

<mu-select
    data-default="선택"
    data-list="nameList"
    data-value="name"
    data-key="name"
    data-model="save.name"
    ng-model="save.name"
    data-change="changeNameInfo(false)">
</mu-select>

• data-default : select box에 디폴트로 고정될 값
• data-list : 해당 list , (단, list에는 값들이 들어있어야함! 리스트명만 맞춰주면 X)
• data-value : 값들을 가져왔을 때 들어있는 데이터들
• data-key : 가져올 값들에 대한 key가 무엇인지. (map형식으로 받아올 때)
• data-model , ng-model : 둘다 있어야함! -> data-model은 view에서 값들을 보여주기 위해서, ng-model은 값을 선택했을 때 controller로 보내기 위한 속성

📍 js에서 값을 가져올 때는 $scope.save.name 하면 html에서 선택한 값을 가져올 수 있다.

 

 

 

3. 모달창에서 데이터들이 fix 되지 않을 때

객체를 생성해서, 그 객체에 '.' 을 붙여서 넘겨줘야 값들이 넘어간다.

모달을 불러오는 funciton안에 $scope.save = {}; 라고 객체를 먼저 생성해 준 뒤에,

모달창에서 데이터 입력 칸에 data-ng-model="save.myName" 이렇게 바인딩 해주면 controller단에서

$scope.save.myName 변수로 값들을 가져올 수 있다.

 

 

 

4. js 컨트롤러에서 RequestParam으로 배열 보내기

자바 단에서 RequestParam을 Map타입에서 ArrayList로 변경해주어도 배열을 받지 못했다 .. 이는 결국 String형으로 , 로 구분하여 넘겨주어서 자바에서 또 split을 사용해서 list로 만들어주었다. 방법 더 찾아보기 ..!!!!!!

 

 

 

5. 비동기로 작동할 땐, defer 

어쩔땐 정상 작동 하고, 어쩔땐 순서가 뒤죽박죽 실행 되어서 원인을 보니 비동기로 분기되어 각각 실행되고 있었기 때문이였다. 이를 해결하기 위해 defer를 사용함!

 

ex)

1. 이름 중복체크를 한다.  

2. 나머지 사항들 비어있는지 확인한다.

3. 등록한다. 

 

* 이름 중복 + 비었는지 확인 => 등록 *

$scope.nameCheck = funciton() {
	//1. 중복 확인
   	var defer = $q.defer(); // defer 객체 생성
    
    	//2. 값 유효 검사
    
    $http({
    }).then(function(res) {
    	///// 원하는 변수 및 함수 실행
   	defer.resolve(res.data);
    });
	return defer.promise;  //promise 객체를 반환함
  }
  
  
  
$scope.save = function() {
	$scope.nameCheck(name).then(function() {   
    	//이후 저장을 위한 로직      
    )}; 
}

save함수가 실행되지만, nameCheck에 defer를 사용했기 때문에, nameCheck 함수가 모두 끝나야 

//이후 저장을 위한 로직 에 작성한 코드들이 실행된다! 

 

 

 

 

💥 위 내용 외에도 if문 사용시 else 타는것 고려하기 등... 주의점이 많지만 잘 적어두고 다음엔 더 잘해야겠다 !!!!!!!!!!!!