angular 기초정리

파일명은 -(하이픈)과 .(점)으로 구분

파일명은 camelCase방식이 아닌, -(하이픈)으로 구분하여 파일명 작성.

ex)  approval-list.component.ts (O)        approvalListComponent.ts (X)

파일내 Class명은 camelCase로 작성.(angularCLI통해서 생성하면 camelCase방식으로 생성되서 신경쓸필요없음.

camelCase: backColor처럼 연결된 단어의 첫 글자는 소문자로, 이후 연결된 단어들의 첫 글자는 대문자로 표기한다.

@Component({
  selector: 'app-approval-list',
  templateUrl: './approval-list.component.html',
  styleUrls: ['./approval-list.component.css']
})
export class ApprovalListComponent implements OnInit {
 // ... 소스 생략 ...
}

그외 angular 개발스타일 가이드 : http://alexband.tistory.com/51

변수/상수 선언

• 변수 : let 변수명

• 상수 : const 상수명

• 타입 지정 : let name:string;    const SIZE:number = 5;    let isShow:boolean = true;

*ngIf

<tr *ngIf="approvalList?.length==0">
    <td colspan="4"  class="text-center">신청된 결재가 없습니다.</td>
</tr>

*ngFor

<tr *ngFor="let approval of approvalList" (click)='viewDetail(approval)'>
    <td>
        {{approval.applyNm}}
    </td>
    <td class="text-center">{{approval.userNm}}</td>
    <td class="text-center">{{approval.applyDeptApprStsNm}}</td>
</tr>

ngSwitch, *ngSwitchCase, *ngSwitchDefault

<div style="" [ngSwitch]="apprInfo.APPR_STS_1">
    <div style="display: inline-block; width:75px;">팀　장</div>
    <strong class="text-gray-dark" *ngSwitchCase='1'>
        {{apprInfo.USER_NM_1}} 승인. {{apprInfo.APPR_DT_1}}
    </strong>
    <strong class="text-gray-dark" *ngSwitchCase='2'>
        {{apprInfo.USER_NM_1}} 반려. {{apprInfo.APPR_DT_1}}
        <div style="margin-left: 80px;">
            {{apprInfo.CANCLE_REASON}}
        </div>
    </strong>
    <strong class="text-gray-dark" *ngSwitchCase='3'>생략</strong>
    <strong class="text-gray-dark" *ngSwitchDefault>
        {{apprInfo.USER_NM_1}} 결재 처리중
    </strong>
</div>

angular(typescript)에서는

 - constructor(생성자), property(속성, 변수), method(함수)를 선언할 수 있다.

 - class안에 static변수, static메소드를 선언가능하다.(는 아직 angular에서 안써봄.. public으로 선언하면 되는거같긴한데 추후 쓸일있을때....)

 - class 상속이 가능하다. 

 - Angular : implements - ex) export class ApprovalListComponent implements OnInit { ... }

 - Typescript : extends - ex) class Horse extends Animal { ... }

콜백function안에서 다른 function호출시 에러발생할때

// 에러발생
getApproval(){
    setTimeout(function(){
         this.getApprovalDetail(); // 에러발생
    }, 500);
}
 
getApprovalDetail(){
    console.log("getApprovalDetail()");
}
 
//=====================================================
// 화살표 함수(Arrow Functions) 
getApproval(){
    setTimeout(()=>{
         this.getApprovalDetail(); // 호출됨
    }, 500);
}
 
getApprovalDetail(){
    console.log("getApprovalDetail()");
}

ng build후 배포 후, url이동 또는 새로고침시 404에러 발생할때.

• 톰켓 해결방안(타 웹서버도 같은방법으로 활용) : http://secr.tistory.com/398