[Angular] 튜토리얼(Introduction, The Application Shell, The Hero Editor)

Angular Tutorial 아래 튜토리얼은 1~3 Introduction The Application Shell The Hero Editor Introduction Tour of Heroes 위 튜토리얼은 Angular의 fundamentals를 커버 할 수 있음 튜토리얼 구성 Use built-in Angular directives to show and hide elements and display lists of hero data. Create Angular components to display hero details and show an array of heroes. Use one-way data binding for read-only data. Add editable fields to upd..

• format_list_bulleted JavaScript FrontEnd/Angular
• · 2021. 4. 29.
• textsms

[Angular] 시작하기

Angular Quick Start Angular CLI를 제공 https://cli.angular.io/ project를 생성 add files testing, budling, deployment cli 설치 $ npm install -g @angular/cli 프로젝트 생성 $ ng new my-dream-app serve app $ ng serve --open (-o는 자동으로 http://localhost:4200/을 열어주는 옵션) angular component 수정 CLI를 통해 Angular component가 생성이 된다. ./src/app/app.component.ts 타이틀을 변경 ./src/app/app.component.css 는 스타일을 변경 프로젝트 구성을 확인 가능 asset..

• format_list_bulleted JavaScript FrontEnd/Angular
• · 2021. 4. 29.
• textsms

AngularJS를 이용한 From Validation.

지금까지 프로젝트를 진행하면서, 많은 유효성 검사 함수를 만들어서 썼다. 아무래도, 내가 너무 시대에 뒤떨어져있었던게 아닌가 생각된다. AngularJS를 활용하면 간편하게 유효성 검사를 할 수 있는데, 아래 간단한 예제를 소개한다. User name: Required! Show Example on Plunker. AngularJS에서는 사용자의 입력에 따른 From Validation을 기본적으로 몇가지 제공한다. Attribute Type Detail ngRequired boolean 필수 입력 체크. ngMinlength number 최소길이 설정. ngMaxlength number 최대길이 설정. ngPattern string 패턴설정. 정규표현식 사용. AngularJS에서 Form의 Prope..

• format_list_bulleted JavaScript FrontEnd/Angular
• · 2021. 4. 13.
• textsms

HighCharts 모듈 사용하기.

아직 AngularJS에 대해서 많은것을 알지는 못하지만, AngularJS의 커스텀 디렉티브는 굉장히 유용할 것 같다. 그 중, HighCharts를 AngualrJS를 통해서 쉽게 사용할 수 있는 HighCharts 모듈을 소개해볼까 한다. 아래 주소에 더 많은 정보가 있다. http://ngmodules.org/modules/highcharts-ng 예제를 확인해보자. HTML HighCharts - angularModule ReLoad JavaScript app.controller('ngCtrl', function($scope) { $scope.loadChart = function() { var rnd = []; for (var i = 0; i < 10; i++) { rnd.push(Math.fl..

• format_list_bulleted JavaScript FrontEnd/Angular
• · 2021. 4. 13.
• textsms

AngularJS 양방향 데이터 바인딩

AngularJS에서는 ng-model 디렉티브를 사용하여, 양방향 데이터 바인딩이 가능하다. 먼저 jQuery를 사용한 아래 예제를 확인해보자. InputText Element에 값을 입력할때 마다, p Element의 값을 변경해주는 예제이다. HTML 파일. Javascript 파일. $(function(){ $("#txtText").keyup(function() { $("#p").text($(this).val()); }); }); 예제 확인 소스를 확인해보면, txtText Id를 가진, InputText Element의 keyup 이벤트시, p Id를 가진 pElement의 text를 InputText 엘리번트의 값으로 변경해주고 있다. 물론, 이렇게 보면 이 소스 또한 그리 복잡하지는 않을 수..

• format_list_bulleted JavaScript FrontEnd/Angular
• · 2021. 4. 13.
• textsms

AngularJS와 jQuery의 간단한 비교..

요즘 시간이 날때마다, AngularJS를 조금씩 공부하고 있다. AngularJS는 보통 자바스크립트 MVW(Model View Whatever) 프레임워크라고 하고, jQuery는 자바스크립트 Library라고 한다. 예전부터 AngularJS에 대한 궁금증을 가지고 있었는데.. 드디어 시간을 내서 AngularJS에 대해서 공부를 했다. 아래 소스를 보면, 간단하게 AngualrJS와 jQuery의 차이점에 대해서 파악해 볼 수 있다. 동일한 결과를 가져오는 두가지의 소스이다. 먼저, jQuery를 이용한 방법이다. 먼저, HTML에는 TABLE과, TBODY를 설정했다. 이어서, Javascript 파일에서 아래의 ArrayData를 $.each를 사용해서 반복한다. $(function() { v..

• format_list_bulleted JavaScript FrontEnd/Angular
• · 2021. 4. 13.
• textsms