AngularJs란
- JavaScript에 MVC 의 개념을 도입한 것(model,view,controller)
- AngularJS는 웹페이지가 로드될 때, 자동으로 시작된다.
-model->view view->model 의 성향때문에 angularjs를 mvvm framework라고도 한다.
AngularJs사용하기 위한 링크설정
AngularJS — Superheroic JavaScript MVW Framework
document.createElement('tabs'); document.createElement('pane'); document.createElement('ng-pluralize'); Your
angularjs.org
위링크의 download에서legacy-uncompressed설정
cdn링크 복사
views가 아니라 webapp에 test91.html을 만들고 script항목에 위에서 복사한 cdn링크를 붙여넣는다.
AngularJs사용1
1: ng-show와 ng-hide
ng-show 상태가 true일때 보인다.
2.checkbox의 체크여부를 ischecked라는 모델명으로 관리한다.
ng-show="isChecked" 체크박스를 체크하면 이미지가 보인다.
3.input요소에 입력한 문자열을 msg라는 모델명으로 관리하여 p영역에 그대로 노출되게한다.
<title>webapp/angular/test01.html</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js"></script>
</head>
<!-- body안에서 일어나는 일은 default 컨트롤러로 처리하겠다는 의미 -->
<body ng-app>
<div class="container">
<!-- ng-xxx는 디렉티브라고 한다 -->
<h1>ng-show ng-hide directive</h1>
<img src="../resources/images/kim1.png" ng-show="true"/>
<img src="../resources/images/rabbit_1.png" ng-hide="true"/>
<br/>
<label>
<!-- checkbox의 체크여부를 isChecked라는 모델명으로 관리하기 -->
<input type="checkbox" ng-model="isChecked"/> 보이게할지 여부
</label>
<br/>
<img src="../resources/images/image1.png" ng-show="isChecked"/>
<br/>
<!-- input요소에 입력한 문자열을 msg라는 모델명으로 관리하기 -->
<input type="text" ng-model="msg" placeholder="문자열 입력..."/>
<!-- msg라는 모델안에 들어있는 문자열을 출력하기 -->
<p>{{msg}}</p>
<p ng-bind="msg"></p>
</div>
</body>
AngularJs사용2
1.checkbox의 ng-model과 button의 ng-class 를 이용하여 버튼의 색깔,길이 바꾸기
<title>webapp/angular/test02.html</title>
<link rel="stylesheet" href="../resources/css/bootstrap.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js"></script>
</head>
<body ng-app>
<div class="container">
<button class="btn" ng-class="{'btn-primary':true}">버튼</button>
<br/>
<label>
<input type="checkbox" ng-model="isPrimary"/>Primary
</label>
<label >
<input type="checkbox" ng-model="isBlock" />Block
</label>
<br/>
<button class="btn" ng-class="{'btn-primary':isPrimary,'btn-block':isBlock}">버튼</button>
<br/>
2. select를 이용하여 button의 class="btn{{color}}변경하기
<select ng-model="color"ng-init="color='btn-primary'">
<option value="btn-primary" >primary</option>
<option value="btn-success" >success</option>
<option value="btn-info" >info</option>
<option value="btn-danger" >danger</option>
</select>
<br/>
<button class="btn {{color}}">버튼</button>
'프로그래밍 기초 > JAVASCRIPT' 카테고리의 다른 글
| [JavaScript]Angular프레임워크 2- id validation (0) | 2020.02.11 |
|---|
