분류 전체보기 (9) 썸네일형 리스트형 (6) 컴포넌트 템플릿, 스타일, 셀렉터 수정하기 이번시간에는 컴포넌트 템플릿, 스타일을 수정해보도록 하겠습니다. products.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-products', templateUrl: './products.component.html', styleUrls: ['./products.component.css'] }) export class ProductsComponent { } 지난 시간에 ng g c products 로 생성했던 products.component.ts 파일입니다. 우선 templateUrl 로 지정되어있는 products.component.html 의 내용을 보시죠. 내용이 이렇게 짧아 굳이 html 파.. (5) 새 컴포넌트 만들기 오늘은 컴포넌트를 만들어볼 건데요~ 전에 봤던 이놈과 같은 걸 직접 만들어 보려 합니다. app.component.html 의 내용을 간단하게 아래와 같이 바꿀게요. this is AppComponent! 상품정보를 출력하고 싶다고 가정해봅시다. 일반적으로 app 폴더안에 하위 폴더로 생성합니다. app 폴더 안에 product 폴더를 만들어주세요. 그리고 product 폴더에 ts 파일과 html 파일을 만들겠습니다. product.component.ts // 아래의 @component 데코레이터를 사용하기 위한 import import { Component } from '@angular/core'; // @component 데코레이터 사용 @Component({ selector: 'app-produc.. (4) Angular 프로젝트에 bootstrap 적용 지난 시간에는 간단하게 ngModel 을 사용해봤는데요. 이번에는 쉽게 스타일링을 하기 위해 부트스트랩을 프로젝트에 설정해보도록 하겠습니다. 일단 설정을 하려면 설치를 해야겠죠? 저는 3버전을 설치할게요. 서버 종료 후 다음 명령어를 칩시다. > npm install --save bootstrap@3 다음 명령어를 치면 node_modules 폴더 안에 bootstrap이 설치가 됩니다. 설치가 완료됐으면 angular.json 안에 styles 구성요소를 보면 "src/styles.css" 가 이미 있습니다. src/style.css를 들어가보면 /* You can add global styles to this file, and also import other style files */ 다음과 같은 내.. (3) ngModel 사용해보기 저번에는 간단하게 텍스트를 변경해봤는데 이번엔 제가 입력한대로 타이틀을 변경 시키고 싶습니다. 그런데 app.component.html 에 너무 내용이 많아 모두 삭제하고 다음과 같이 수정! {{ title }} 여기서 [(ngModel)] 이게 뭘까요? 설명하기 전에 데이터바인딩이 뭔지 알아야 하는데 이건 검색하면 수두룩하게 나오니 패스ㅋ 처음 이해하기 쉽게 말하면 말 그대로 데이터를 묶어 일치 시키는 것이라고 생각하면 될 것 같습니다. 이것도 뭔 소린지 모르겠다면 이따가 동작해보면 알게 됩니다! 다시 이 [(ngModel)] 이란 것은 양방향 데이터 바인딩하는데 사용되는 앵귤러 문법입니다. 하지만 찾아보니 정확하게 양방향 바인딩은 아니고 [ngModel]="title", (ngModelChange)=.. (2) 앵귤러 앱 첫 편집 저번에 angular 앱 생성 후 ng serve 명령어를 쳐서 이렇게 페이지를 띄웠습니다. 이제 이 페이지를 직접 수정해 보려고 합니다. ㅎㅎ 저기 my-first-app is running! 저기를 고칠게요! 생성한 앱 폴더를 들어가시면 수많은 파일들이 많을텐데요. 이 페이지의 파일은 src > app > app.component.html 입니다. 나머지 파일들이 뭔지는 나중에 자세하게 알아보겠습니당. 저 부분의 코드는 344 라인의 {{ title }} app is running! 이 부분입니다. {{ title }} app is running! 이 {{ title }} 이 뭔지는 잘은 모르겠지만 프로젝트 생성할 때 이름을 넣어줬는데 그 이름과 엮여있나 보네요! this app {{ title }}.. 부모 scope 에서 자식 scope 함수 호출하기 부모 scope에서 자식 scope에 있는 함수를 써야 하는 상황이 생겼다. 바로 밑에 상황처럼. function ParentCntl($scope) { // 이곳에서 someEvent()를 호출하고 싶다! } function ChildCntl($scope) { $scope.someEvent = function() { // someEvent } } 하지만 이제 막 angularJS 써보고 알아가는 단계라서 잘 모른다규,,, ㅠㅠ 구글신께 여쭤봐야지. 신이 응답해주셨다. $broadcast 과 $on 이놈을 사용하면 된다고 한다. function ParentCntl($scope) { // 이곳에서 someEvent()를 호출하고 싶다! $scope.$broadcast('callChildMethod'); } .. (1) Angular 시작 1. node.js 설치 Angular 시작 하기 앞서 npm(Node Package Manager) 가 필요합니다! https://nodejs.org/ko/ 이곳에서 다운 받읍시다! 설치가 완료되면 콘솔창에 node -v 명령을 쳐서 무사히 설치가 되었는지 확인합니다. > npm -v 무사히 설치 되었다면 버전이 뜰겁니다! 2. angular 설치 본격적으로 시작해볼까요~ https://cli.angular.io/ angular cli 홈페이지 입니다. 들어가서 함 보셔유. > npm install -g @angular/cli@latest 저는 @latest 를 추가로 붙혀서 설치하겠습니다. 설치가 잘 되었으면 이제 app 생성을 해보겠습니다. 3. app 생성 및 실행 app 생성할 폴더로 이동해서 .. Angular 란? 실은 이런 설명글, 소개글 같은 건 쓰고싶지 않았습니다. 조금만 찾아보면 저보다 더 굇수분들이 잘 설명해 놓은 글이 많기 때문에 무의미하다고 생각했는데 그래도 이런 글이 없으면 뭔가 허전하잖아요 ㅎㅎ 그래서 정말 짧게 핵심만 쓸겁니다! 저도 이제 배우기 시작해서 잘 모르는 건 비밀.. (´͈ ᵕ `͈ ) 우선 이 자식 Angular 란 놈은 무엇인가! Angular is JavaScript Framework which allows you to create reactive Single-Page-Applications(SPAs). 해석하면 앵귤러는 반응형 단일페이지 응용프로그램을 만들도록 해주는 자바스크립트 프레임워크다... 훔,, 더 쓸게 없네용.. 실은 저게 다 설명한 거라고 생각합니다. 장단점, 다른 .. 이전 1 2 다음
