본문 바로가기

두두의 IT

[AngularJS] 문법

728x90
ng-app : angularJS 선언
ng-app="모듈명" : 모듈 적용

ng-init="변수명='값'" : 변수 초기화

ng-controller="컨트롤러명"
~.controller('컨트롤러명',[]);

ng-model="스콥변수명.속성"

angular.module('모듈명',[]);

ng-repeat="i in 스콥변수명"
ng-repeat="i in 스콥변수명 | filter:{속성:값}" 
ng-repeat="i in 스콥변수명 | filter:{클릭변수명}" ==> ng-click과 연결

ng-click="함수명(파라미터)"
ng-click="클릭변수명={속성:값}" ==> ng-repeat과 연결

ng-show="불리언값"
ng-show="변수명.$dirty"

<pre>{{변수명 | json }} </pre> ==>변수가 갖고 있는 앵귤러의 키워드

<form ng-submit="함수명(파라미터)">

$scope : 컨트롤러와 html 파일 간의 연결고리
$scope.스콥변수명 = "", {속성:값}, [], [{}], function(){}
$scope.스콥변수명.findIndex(function(파라미터){return ~;})
$scope.스콥변수명.splice(Idx변수,개수)
$scope.스콥변수명.push(변수

$ : angular에서 미리 정의된 키워드

{{ 변수명 }} ==>html에서 사용
model은 html에서 수정한 것이 js에도 적용되어서 양방향 모델임
{{ 변수명 | ngFilter }} ==> date:"yyyy-MM-dd',

html : <abc-def></abc-def>
js : 모듈.directive('abcDef', function(){return { template : '<h1>내용</h1>' } });
js : 모듈.directive('abcDef', function(){return { templateUrl : '파일명.html' } });

로딩 안되면 개발자 도구로 확인

localStorage
- Key, Value 저장소
- localStorage.setItem(key,value)
- loaclStorage.getItem(key) //value, localStorage[key] 접근 가능
- 입력은 무조건 string으로 처리됨
- 최대 약 5mb 용량
- 크롬은 SQLite 사용함

_으로시작하는 변수명은 OOP에서 사용하는 private 변수
대문자 변수명 ; 상수라는 뜻
function($filter, $window){
	var date = $filter('date')(파라미터.date, 'yyyy-MM');
    this.변수 = $window.변수; //브라우저 창 개체를 참조하는 $window 서비스. 전역 창 개체를 직접 사용하는 대신 사용
	$scope.$watch('변수', function(newValue, oldValue){
    	this.drawChart( {} );
    }
}

$watch : scope 객체 상에 존재하는 메서드로, 특정 변수 값의 변화가 있는지를 체크하고 변화가 있으면 미리 등록해놓은 콜백 메서드를 호출하게 됨

'두두의 IT' 카테고리의 다른 글

GraphQL이란?  (0) 2022.05.30
JIRA 프로젝트 만들기  (0) 2022.05.30
[JPA] 원하는 매개변수로 findBy 메소드 생성하기  (0) 2022.05.26
String Boot Model Annotation  (0) 2022.05.20
MAC + Flutter + xCode 설치  (0) 2022.05.18