Reco Everything you wanna value. 자세히보기

[IT|Programming]/HTML related

Learning AngularJS

kipid 2019. 2. 18. 16:05
반응형
m.logPrint() is working!

<eq> and <eqq> tags are rendered to MathJax format, being enclosed by \ ( \ ) and \ [ \ ].

docuK1 scripts started!
If this log is not closed automatically, there must be an error somewhere in your document or scripts.

Table of Contents is filled out.

Auto numberings of sections (div.sec>h2, div.subsec>h3, div.subsubsec>h4), <eqq> tags, and <figure> tags are done.

<cite> and <refer> tags are rendered to show bubble reference.

<codeprint> tags are printed to corresponding <pre> tags, only when the tags exist in the document.


Current styles (dark/bright mode, font-family, font-size, line-height) are shown.

kakao.js with id="kakao-js-sdk" is loaded.

New ShortKeys (T: Table of Contents, F: Forward Section, D: Previous Section, L: To 전체목록/[Lists]) are set.

m.delayPad=0;
m.wait=1024;
wait 849ms.
Doing delayed-load. : 2
▼ Hide
Toggle a mess
Go (FS)
TofC
DocuK Log
Backward
Forward
RRA
Lists
CmtZ
CmtX
Handle CmtZ
Log in
out focus
이 글이 도움이 되셨다면, 광고 클릭 한번씩만 부탁드립니다 =ㅂ=ㅋ.
(If this article was helpful, please click the ad once. Thank you. ;)
Mode: Bright; Font: Noto Sans KR; font-size: 18.0px (10.0); line-height: 1.6;
width: 1280, height: 720, version: 3.3.3
dg:plink (Document Global Permanent Link): https://kipid.tistory.com/127
document.referrer: Empty
This document is rendered by docuK (See also SEE (Super Easy Edit) of docuK and pure SEE).

Learning AngularJS

AngularJS 라고 JavaScript 를 확장해서 쓰는 framework 가 있다고 한다 . jQuery 랑 비슷한 놈이라고 생각해도 되는데, jQuery 가 HTML DOM (Document Object Model) 기반으로 selector 및 chainning 을 구현해 놓은 것이라면, AngularJS 는 MVC (Model–View–Controller) 기반으로 동적인 페이지 (Dynamic page) 를 쉽게 만들기 위한 목적으로 만들어진 감이 크다고 생각된다.
뭐 개인적으론 당장 동적인 페이지를 필요로하지 않아서, 배울 필요성을 당장 느끼지는 못하는데... 멋진 dynamical HTML page 를 만들고 싶다면 꼭 배워둬야만 하는 framework 라 생각된다. (최근 google 의 support 로 폭발적인 성장을 하는듯한...)
ps. 그런데 잠깐 기초기능만 테스트 해봤는데, 왜 난 jQuery 가 더 편한거 같지?ㅋ 제대로 안써봐서 강점을 아직은 잘 모르겠음. 그냥 <span class="parameter-name"></span> 식으로 해서 처리해도 뭐...

T1.Introduction

▼ Show/Hide
뭔가 첫 느낌에는 animation 에 특화된 건줄 알았는데... 그냥 jQuery 의 on() response 를 간단하게 짤 수 있도록 도와준것 뿐인듯한 기분이?
jQuery 에서 다음과 같이 작성되어야 하는 event handler 가 (뭔가 이상하게 짜놔서 개인적으로 조금 고쳤음.)
On the left side of codes is there a hiden button to toggle/switch scrollability ({max-height:some} or {max-height:none}).
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
	var $greeting=$('#greeting');
	$('#name').on("input", function() {
		$greeting.text('안녕하세요, '+this.value+' !!!');
	});
});
</script>
</head>

<body>
	<input id="name" type="text"/>
	<p id="greeting"></p>
</body>
</html>
AngularJS 를 이용하면 다음과 같이 간단해 지는듯?
On the left side of codes is there a hiden button to toggle/switch scrollability ({max-height:some} or {max-height:none}).
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
</head>

<body>
	<input type="text" ng-model="yourName"/>
	<p>안녕하세요, {\{yourName}} !!!</p>
	<!-- \ 빼시길... 여기있는 쌍중괄호도 AngularJS 가 처리해 버려서 code 가 이상해 지는듯. -->
</body>
</html>

T1.1.Actual implementation Example

T1.1.1.jQuery

안녕하세요, !!!

T1.1.2.AngularJS

안녕하세요, !!!
▲ Hide
Toggle a mess
* 홍보/Promoting Recoeve.net (3S | Slow/Sexy/Sincere SNS)
유튜브 음악, K-Pop MV 들을 광고없이 목록재생 해서 보세요.
접속하셔서 가입 후 별점만 드레그 하시면 자신의 페이지에 저장 됩니다.
그리고 자신의 페이지로 이동한 뒤 추천 받기 (단축키 R) 를 누르시면 자신이 점수 메긴것들로 이웃 (이웃보기 단축키 B) 을 자동으로 찾아주고 그 이웃들로부터 추천을 받을 수 있습니다.
Toggle a mess
이 글이 도움이 되셨다면, 광고 클릭 한번씩만 부탁드립니다 =ㅂ=ㅋ.
(If this article was helpful, please click the ad once. Thank you. ;)
반응형