기본 콘텐츠로 건너뛰기

[Angular] Controller

[Angular] Controller Step02_controller.html // angular 모듈 만들기 var myApp = angular.module( "myApp" ,[]); // Ctrl1 이라는 이름의 컨트롤러 만들기 myApp.controller( "Ctrl1" ,[ "$scope" , function ($scope){ $scope. name = "김구라" ; $scope.clicked = function (){ alert ( "버튼을 눌렀네?" ); }; $scope.nums = [ 10 , 20 , 30 , 40 , 50 ]; }]); // Ctrl2 이라는 이름의 컨트롤러 만들기 myApp.controller( "Ctrl2" ,[ "$scope" , function ($scope){ $scope. name = "원숭이" ; $scope.friends = [ {num: 1 , name : "김구라" ,addr: "노량진" }, {num: 2 , name : "해골" ,addr: "행신동" }, {num: 3 , name : "원숭이" ,addr: "동물원" } ]; }]); 내이름은 : {{name}} 눌러보셈 {{tmp}} 너의 이름은 : {{name}} 번호 이름 주소 {{tmp.num}} from http://heekim0719.tistory.com/164 by ccl(A) rewrite - 2020-03-07 09:21:16

[Angular] Router 라우터 정리

[Angular] Router 라우터 정리 Angular2 버전 이후를 기준으로 정리한 글입니다. 라우터는 URL을 사용하여 특정 영역에 어떤 뷰를 보여 줄지 결정하는 기능을 제공한다. 전통적인 서버사이드 렌더링을 하는 웹 사이트는 주소가 바뀔 때마다 서버에 전체 페이지를 요청하고 전체 페이지를 화면에 렌더링한다. 매 요청시 전체 페이지를 새로 랜더링하는 것은 비효율적이기 때문에 라우터를 이용하여 필요한 부분만 랜더링을 한다면 효율적일 것이다. 라우터는 URL에 해당하는 컴포넌트를 화면에 노출하고 네비게이션을 할 수 있는 기능을 가지고 있다. Router 구성 요소 Router – 라우터를 구현하는 객체이다. Navigate() 함수와 navigateByUrl() 함수를 사용하여 경로를 이동할 수 있다. RouterOulet – 라우터가 컴포넌트를 태그에 렌더링하는 영역을 구현하는 Directive이다. Routes – 특정 URL에 연결되는 컴포넌트를 지정하는 배열이다. RouterLink – HTML의 앵커 태그는 브라우저의 URL 주소를 변경하는 것이다. 앵귤러에서 RouterLink를 사용하면 라우터를 통해 렌더링할 컴포넌트를 변경할 수 있다. ActivatedRoute – 현재 동작하는 라우터 인스턴스 객체이다. Router 설정 라우터를 사용하기 위해서는 먼저 Router 모듈을 import 해야 한다. import { RouterModule, Routes } from '@angular/router'; 라우터에서 컴포넌트는 고유의 URL과 매칭된다. URL과 컴포넌트는 아래와 같이 Routes 객체를 설정하여 지정할 수 있다. 아래의 예에서는 디폴트 path에서는 MainComponent가 노출이 되고 product-list path에서는 ProductListComponent가 노출이 되도록 설정을 한 것을 볼 수 있다. const routes: Routes = [ { pa...

[Angular 02] 앵귤러 시작하기

[Angular 02] 앵귤러 시작하기 [Angular 02] 앵귤러 시작하기 1. 타입스크립트 타입스크립트는 Microsoft에 의해 개발/관리되고 있는 오픈소스 프로그래밍 언어이며, 자바스크립트를 확장한 언어입니다. 자바스크립트 ECMA(European Computer Manufactureres Association) Script 표준을 따르고 있습니다. 타입스크립트의 가장 큰 특징은 자바스크립트에 타입을 추가한 언어입니다. 2. 타입스크립트 설치 MS는 타입스크리트를 오픈 소스로 공개하고 npm을 통해서 패키지로 손쉽게 설치할 수 있게 하였습니다. npm install -g typescript 설치가 끝났다면 터미널에서 tsc 명령을 사용할 수 있습니다. tsc는 타입스크립트 소스를 자바 스크립트로 컴파일하기 위한 명령어 입니다. 'tsc --version'을 입력하여 버전이 출력되는지 확인해 보자. tsc --version 3. 앵귤러 CLI 앵귤러 CLI는 프로젝트 생성부터 템플릿 코드 자동 생성, 개발 서버, 배포, 테스트 등 앵귤러 프로젝트를 진행하는 데 필요한 거의 모든 기능을 제공해 주는 만능 개발 도구이며, 표준 스타일 가이드를 제공합니다. Angular 프로젝트 생성 Angular 컴포넌트, 디렉티브, 파이브, 클래스, 인터페이스 등의 구성 요소 Unit/E2E 테스트 환경지원 프로젝트 패키징 배포 앵귤러 CLI를 설치해 보자. npm i @angular/cli -g 설치가 완료되면 ng 명령어를 사용할 수 있습니다. 앵귤러 CLI는 터미널 환경에서 명령을 통하여 실행합니다. ng만 입력한 후 실행하면 터미널의 모든 명령어를 확인할 수 있습니다. 아래 명령어로 버전을 확인해보자. ng --version 4. 프로젝트 생성 앵귤러 CLI의 프로젝트 생성 명령은 ng new 입니다. ng new 명령은 앵규럴 프로젝트에 필요한 기본 설정 파일뿐...

Angular2 시작하기

Angular2 시작하기 Angular2 시작하기 1. NodeJS 설치 - https://nodejs.org/ko/ NodeJS 공식 홈페이지 접속하여 Node를 다운 후 설치. 2. NPM 을 통한 Angular-Cli 설치 Window Command 를 통하여 npm install -g @angular/cli 명령어를 실행한다. 위와 같이 정상적으로 angular-cli 가 설치되었다면 Project 가 위치할 폴더를 생성. 참고 사이트 : https://cli.angular.io/ 3. Angular-cli 를 통한 Angular Project 생성. Window Command 를 통한 ng new [폴더명] 위와 같이 Angular 기본 프로젝트가 생성됨. 해당 프로젝트로 폴더로 이동하여 ng serve 명령어 실행 Node 를 통해 Angular 프로젝트 실행. http://localhost:4200 접속하게되면 위와같이 Angular 프로젝트 실행된다. 앞으로 Angular2 의 개념들을 포스팅하면서 Spring-Boot , Spring Project의 Angular-cli 를 이용하여 ng build 하여 포팅하는 글을 올리겠습니다. from http://overclassbysin.tistory.com/3 by ccl(A) rewrite - 2020-03-07 07:55:13

ANGULAR MODULE FAQS(번역 중)

ANGULAR MODULE FAQS(번역 중) 2016.10.10에 업데이트된 Angular 공식 사이트 문서를 번역한 것입니다. 본 번역은 연습용이며 문법적인 오류와 과도한 의역이 있을 수 있습니다. Answers to frequencly asked questions about @NgModule FAQs Angulr Modules은 application이 결합력이 있는 기능 블럭으로 구성하는 것을 도와줍니다. Angular Modules chapter는 개념을 다루고 다양한 예제와 lazy loaded modules에서부터 @NgModule까지 단계적으로 접근합니다. 그러나, 이 챕터(FAQs)에서는 Angular Module의 설계 및 구현에 대해 많은 개발자들이 물어 본 질문에 대하여 답변합니다. FAQs를 읽기전에 Angular Modules chapter를 읽고 오세요. Declarations declarations에 추가해야하는 class는 무엇인가요? declarable은 무엇인가요? declarations에 추가하면 안되는 class는 무엇인가요? 왜 같은 Component를 여러 NgModule의 property에 나열 해야하나요? " Can't bind to 'x' since it isn't a known property of 'y' "의 의미는 무엇인가요? Imports 내가 import해야 하는것은 무엇인가요? BrowserModule, CommonModule을 import 해야 하나요? 같은 module을 두번 import하면 어떻게 되나요? Exports 내가 export해야 하는 것은 무엇인가요? 내가 export 하면 안되는 것은 무엇인가요? class와 module을 re-export 할 수 있나요? forRoot의 method에는 무엇이 있나요? Service Providers Entry ...

(번역)Angular - User Input

(번역)Angular - User Input (번역)Angular - User Input User input triggers DOM events. We listen to those events with event bindings that funnel updated values back into our components and models. User input은 DOM 이벤트를 실행시킵니다. 우리는 그 이벤트들을 component들과 model들에게 업데이트된 값을 제공하는 이벤트 바인딩을 통해 듣습니다. User actions such as clicking a link, pushing a button, and entering text raise DOM events. This page explains how to bind those events to component event handlers using the Angular event binding syntax. 링크나 버튼을 눌러 텍스트를 타고 들어가는 유저들의 액션은 DOM 이벤트를 일으킵니다. 이 페이지는 그러한 이벤트들을 어떻게 Angular syntax를 이용해 component이벤트 핸들러들로 묶을 수 있는지 설명합니다. Binding to user input events User input이벤트에 바인딩하기(묶기) You can use Angular event bindings to respond to any DOM event. Many DOM events are triggered by user input. Binding to these events provides a way to get input from the user. 여러분은 Angular이벤트 바인딩을 어느 DOM이벤트에나 응답하도록 사용할 수 있습니다. 이런 DOM이벤트에 바인딩을 해두면 사용자들로부터 input을 받을 수 있게됩니다. To bind to a DOM event, surround the D...

[angular js] 앵귤러 js 개념

[angular js] 앵귤러 js 개념 앵귤러(Angular) JS 입문 요즘 2013년도부터 이슈인 앵귤러(Angular)JS에 대하여 공부해보자 (공부한 앵귤러JS는 버전 1.X기준으로 작성되었다. 2.X부터 많은 변화를 겪는다고 들었는데 그 부분은 나중에 추가적으로 덧붙이도록 할 예정이다.) 먼저 앵귤러(Angular)JS란 구글이 개발한 클라이언트 측 프레임워크이다. 압축된 제이쿼리(jQuery)라이브러리와 마찬가지로 자바스크립트로 작성된 프레이워크다. 본질적으로 앵귤러 JS를 사용하는 이유는 잘 설계된 좋은 구조의 웹 페이지와 애플리케이션을 구현할 수 있는 프레임워크를 제공하자는 것이 앵귤러 JS의 기원이다. 앵귤러 JS와 유사한 자바스크립트 프레임워크로는 BackBond.js, Ember. Meteor 등과 있으나 현재 앵귤러JS는 현시점에서 가장 좋은 디자인과 기능을 가지고 있다. 1. 앵귤러(Angular)JS 사용이유 계속 위에서 앵귤러JS가 좋다고 반복적으로 나오는데 정확히 뭐가 좋은 것일까 하는 의구심이 들 수 있다. 책에서는 1. 앵귤러 JS 프레임워크는 MVC 정확 구현이 가능하게 하고 MVC구현을 쉽게 할 수 있음 . 2. 양방향 데이터 바인딩 3. 다른 프레임워크와의 호환성 을 들고 있다. 앵귤러JS는 html특성상 다이나믹 application을 위해 디자인된 것이 아닌 것은 누구나 알 수 있을 것이다. html은 정적인 마크업요소로서 요소를 생성한다던지 어떠한 요소가 변했을 때에 대한 일정부분을 필터링 한다던지와 같은 다양한 동적 action에 대한부분을 처리할 수 없다. 그렇기 때문에 자바스크립트를 이용하여 DOM을 수정하여 처리하는 것이 주된 방법이었다. 그러나 앵귤러 JS는 HTML을 확장시켜 다이나믹 application을 지원한다는게 굉장히 매력적인 요소이다. 그 외에도 MVC로 나누어 유지보수와 재사용성을 높여 코드의 양을 줄이는 장점을 보이고 있다. ...