typeScript 썸네일형 리스트형 AngularJs 2 - routing 2 라우팅를 사용하기 위해 2016/03/06 - [프로그래밍/AngularJs] - AngularJs 2 - routing 의 내용과 같이 페이지를 만들었다. 페이지 내에서의 링크 클릭은 브라우저의 주소창을 바꾸면서 서버로 전송없이 서비스를 한다. 하지만, 브라우저 주소창에 바로 해당 주소를 입력하면 서버로 전송 후 서비스가 된다. 서비스가 된다는 전제는 index.html이 로딩된다는 가정하에서이다. 만약, 여러 서블릿들이 서비스 되어야 하는 상황이라면 무조건 index.html페이지를 로딩하지 못하므로, 제대로 서비스가 되지 않을 것이다. 하나의 해결책은 angular의 라우팅에 등록한 주소를 요청하면 서버에서 index.html을 서비스 해주는 것이다. embedded jetty 서버의 경우를 예로 .. 더보기 AngularJs 2 - routing 웹페이지의 네비게이션 기능을 제공하는 것이 routing 이다. 이제껏 code example을 제공하는 페이지를 만들었다. 이와는 별도로 code tutorial이라는 페이지를 추가해보자. 이 두 페이지의 접근은 어떻게 될까? 메인 페이지에서 각각의 페이지에 대한 링크(흔히 네비게이션 바라고 한다.)를 제공하고 이걸 클릭하면 각각의 페이지가 보이도록한다. 일단 이런 기능을 하는 메인페이지를 만들고, routing을 붙여보자. 4번째 줄처럼 이 인덱스 페이지가 router의 베이스 path임을 설정해 준다. 그리고 router는 AngularJs의 core 서비스가 아니고 별도로 존재하므로, 20번째 줄에 보이듯이 router.js를 추가해준다. 이글을 쓰고 있는 시점에서 router.min.js는 제대.. 더보기 AngularJs 2- service 이제까지는 code example을 CodeComponent의 필드값을 이용해 받았다. 만약 example들을 코드내의 하드코딩이 아닌 인터넷 어딘가에서 가져온다고 생각해보자(또는 DB일 수도있다). 물론 CodeComponent 내에 이런 역할을 하는 코드를 직접 넣을 수도 있을 것이다. 그럼 다른 콤포넌트들(CodeComponent의 하위 콤포넌트가 아니라면) 이 값을 사용하기 위해 또 같은 코딩을 해야 할까? 물론 이 경우에만 필요한 것은 아니고 하나의 예만 생각해 본 것이다. 뭐 어쨋든 필요하니 만들어 두었을 것이고 이를 이용하도록 해보자. 현재 우리가 필요한 것은 ExampleCodes라는 sample code 배열만 받으면 된다. service 코드는 다음과 같이 될 것이다. Injectabl.. 더보기 AngularJs 2 - Multiple Components 이전에 만들었던 app.component의 이름을 변경하고, code title list와 code content를 분리하여 독립된 component로 만들어보자. app.component.ts -> code.component.ts app.component.html -> code.component.html 위 코드에서 ,라는 태그는 표준 HTML 태그가 아니므로, 브라우저는 이른 조용히 무시할 것이다. AngularJs도 역시 마찬가지. 이를 처리하도록 하려면 이를 위한 component가 있다는 것을 알려주어야 한다. 위 내용은 code.component.ts의 내용이며, 4번째 줄의 directives : [CodeTitlesComponent, CodeContentComponent] 부분이 그 역할을.. 더보기 AngularJs 2 - 데이터 바인딩 - One Way 이전 글의 AppComponent에서 click 이벤트에 의한 select를 구현했다. 선택된 항목에 대한 표시를 해주는게 사용자에게 편할 것이다. 이를 위해 프로퍼티 바인딩이라는 것이 필요하다. 말은 거창하지만 코드는 길지 않다. 4번째 줄의 [class.selected] = selected === code라는 코드가 하는 일을 AngularJs 에서는 바인딩이라고 부른다. 예는 엄밀히는 CSS class 바인딩이라고 하는데 쓰는 방법은 프로퍼티도 같다. [] 안에 바인딩할 이름이 들어가면 된다. 바인딩에 대한 자세한 설명은 가이드를 참고하자. 더보기 AngularJs 2 - click 이벤트 처리 이전에 만들었던 angularjs 소스코드를 보여주는 예제에서는 제목과 내용을 전부 보여주었다. 이를 좀 바꾸어 일단 제목만 보이게 하고, 원하는 제목을 선택했을 때 내용을 보여주도록 해보자. app.component.html의 내용을 위와 같이 변경한다. 여기서 이전과 달라진 4번째 줄의 (click) = "onSelect(code)" 라는 것이 click 이벤트가 발생하면 onSelect(code)라는 AppComponent의 메소드로 처리하겠다는 의미이다. 8번째 줄은 AppComponent의 selected 필드 값의 conent내용를 보여주겠다는 의미인데, 이전에는 이 필드가 없었다. 예상할 수 있듯이, onSelect 메소드의 인자로 넘어온 code값으로 selected필드를 지정한다. 더보기 AngularJs 2 - 스타일 적용하기 app.componet 에 css 를 적용해 보자 이는 app.component.ts파일에 한줄 추가 하는 것으로 쉽게 적용가능하다. styleUrls : ['css/app.component.css'] css 디렉토의 app.component.css파일을 스타일로 적용하라는 의미이다. 더보기 AngularJs 2 - display data 이전에 작성했던 허전한 화면을 조금 채워 보자. angularjs 관련 코드를 보여주는 리스트를 만들기로한다. 우선, 보여줄 코드에 대한 정의를 code.example.ts라는 파일로 만든다. 우선 제목과 내용에 해당하는 title, content라는 필드만으로 정의한다. code.example.ts 위 interface를 사용하여 실제 보여줄 내용을 담은 리스트 클래스를 examples라는 새로운 디렉토리 밑에 작성한다. mock-example-codes.ts 이렇게 만들어진 내용을 어디에 보여줄 것인가? 우선은 별 내용도 없는 페이지인 app.component.html에 보여주자. 바뀐 코드는 위와 같고, 2번째 줄에서 *ngIf, *ngFor라는 지시자를 사용했는데 이는 다른 언어들의 if 와 fo.. 더보기 AngularJs 2 - template.html 분리 & 변수 치환 이전글에서 app.component.ts의 template라는 필드를 정의 했었다. 이것은 보여지는 html 코드인데 이는 별도의 파일로 분리가 가능하다. app.component.ts template라는 필드가 templateUrl이라는 필드로 바뀌었고 내용은 새로만들 app.component.html이라는 파일명이다. AppComponent라는 클래스 안에 title이란 필드의 값을 html에서 변환할 값으로 정의했다. 이제 app.component.html 파일을 만들어보자. 이전 app.component.ts파일에 template 필드의 내용과 같지만 {{title }}이라는 부분이 보일 것이다.AngularJs에서는 "{{}}"를 사용하여 치환될 변수를 지정한다. 이제 이 {{title}}이라는.. 더보기 AngularJs 2 - main.ts & app.component.ts 이전에 만들었던 프로젝트 디렉토리 밑에 app 이라는 디렉토리를 만들자. 물론 꼭 그렇게 해야되는 것은 아니지만, 일반적인 룰을 따라 주는 것이 편하다. app 디렉토리에 main.ts 와 app.componet.ts 파일을 만든다. main.ts index.html에서 import한다고 했던 app/main 파일이다. 3번째 줄에서 AppComponent라는 모듈을 import하는데 이는 app.component.ts 파일에서 만들어진 것이다. app.component.ts 6번째 줄에서 AppComponet라는 이름으로 export 하고 있다. @Component 데코레이터 함수에 의해 이 콤포넌트가 어떻게 생성되고 사용되어야 하는지 메타데이터를 통해 알려진다. 3번째 줄의 selector라는 필드를.. 더보기 이전 1 2 다음