angular js
자바 스크립트 기반 프레임워크로 프론트 영역에서 서버처럼 mvc 구조를 고안하기 위해 제안되었다. 그동안 jquery만 사용하다가 angular js를 접하고 보니 편해서 기본 문법에 대해서 정리한다.
(html 부분 작성은 pug로 하였다)
본문의 문법들은 angular js 일부 기능으로 그 외에 기능들은 angular js 공식 document에서 확인할 수 있습니다
app 등록
기본적으로 angular js를 활용하는데 있어 중요한 점은 해당 로직의 scope이다.
angular js는 다양한 방법으로 scope를 지정할 수 있는데 대표적으로 ng-app이 있다.
< pug code >
.tutorial(ng-app="my-app")
.container
//bootstarp 테스트
div.row
div.col-6.bg-primary fdsa
div.col-6.bg-danger fdsaf
< js code >
var app = angular.module("my-app", []); app.controller("myCtrl", function($scope) {
$scope.hello = "Hello World"; })
;
이제부터 my-app의 scope function 안에서 angular js 문법들을 알아보겠다
ng-bind
해당 view 안에서 데이터를 bind 할 수 있는 기능이다.
< pug code >
// ng-bind html간 데이터 이동
div.mb-2 * html간 데이터 이동
input.form-control(type='text' ng-model='user.name')
div 그냥 중괄호: {{user.name}}
| bind :
span(ng-bind="user.name")
입력시 바로 data bind 되어서 span 및 중괄호 부분으로 넘어간다.
ng-click
onclick과 같은 함수이다. 기본적으로 angular js는 ng 문법 안이 js와 같도록 적용되어 있다.
< pug code >
// ng-click dic 함수 변수 테스트
div.mb-2 * dic 변수 테스트
button(ng-click="event.test_console()") 테스트 콘솔
< javascript >
$scope.event = {
test_console: async () => {
console.log("test console")
}
}
ng-mouse-*
angular js의 마우스 이벤트이다. 간단하게 호출 함수를 설정할 수 있다.
< pug code >
// ng-mouse* 마우스 event
div.mb-2 * 마우스 이벤트
button(ng-mousedown="test_counter = test_counter+1" ng-init="test_counter=0") moude down
button(ng-mouseenter="test_counter = test_counter+1" ng-init="test_counter=0") mouse enter
div count:{{test_counter}}
< javascript >
$scope.test_change = function() {
$scope.test_counter++;
};
ng-href
동적으로 href 경로를 지정할 수 있다.
< pug code >
// ng-href 마우스 링크
div.mb-2 * html 링크 테스트
div ng-href 테스트
a(ng-href="/{}") 링크 1
a(ng-href="{{test_value}}") 링크
< javascript >
$scope.test_value = "/login/test value"
ng-model : form data bind
form의 데이터들을 model 지정으로 손쉽게 가져올 수 있다.
< pug code >
div.mb-2 * form 데이터 테스트
form(name="test_form1")
label value1:
input(type="checkbox" ng-model="test_check_model.value1"
ng-true-value="'YES'" ng-false-value="'NO'")
label value2:
input(type="checkbox" ng-model="test_check_model.value2")
div
span {{test_check_model.value1}}
span {{test_check_model.value2}}
ng-bind html
html을 bind한다.손쉽게 삽입할 수 있다.
< pug code >
// ng-bind-html html 바인드
div.mb-2 * html 바인드
div(ng-bind-html="test_html")
< javascript >
$scope.test_html =
`I am an <code>HTML</code>string with
<a href="#">links!</a>`;
ng-change : checkbox 변화 감지
check box의 check 상태를 감지한다.
< pug code >
// ng-change
div.mb-2 * ng-change
input(type="checkbox" ng-change="test_change()" ng-model="test_change_counter")
div {{test_counter}}
< javascript >
$scope.test_change = function() {
$scope.test_counter++;
};
ng-class
element의 class를 동적으로 지정할 수 있다.
< pug code >
div.bg-dark hello
div.mb-2 * ng-class 테스트
div(ng-class="test_class_color").text-white 배경은 검게
div(ng-class="is_exist ? 'bg-danger':'bg-primary'") if문 같이씀 배경 빨갛게
div(ng-class="test_bool_dic") if문 딕셔너리 넘기기
< javascript >
$scope.is_exist = true;
ng-show
요소를 보이거나 안보이게 설정할 수 있다.
< pug code >
// ng-show html 요소 숨기기
div.mb-2 * html 요소 숨기기
button(ng-click="show=!show") show
div(ng-show="show")
div i`m only show is ture
ng-if : 조건문
ng-if를 활용해 해당 요소에 대해 동적으로 설정할 수 있다.
< pug code >
div.mb-2 * 조건문
div(ng-switch="" on="user.name")
div(ng-switch-when="test") switch맞게 입력하셨습니다.
div(ng-if="user.name=='test'") if문 맞게 입력하셨습니다.
< javascript >
$scope.user.name = 'test';
ng-repeat
element에 대해 반복문을 짤 수 있다.
< pug code >
//ng-repeat 반복문
div.mb-2 * 반복문 (html 데이터 이동 이용)
ul
li(ng-repeat="test_arr in test_dic_array") {{test_arr.name}} 는 {{test_arr.value}}
< javascript >
/ 반복문 위한 dic array
$scope.test_dic_array = [
{
name:"test_array",country:"test_array_value"
},
{
name:"test_array2",country:"test_array_value2"
},
{
name:"test_array3",country:"test_array_value3"
},
{
name:"test_array4",country:"test_array_value4"
}
]