앵귤러28 앵귤러 기초(Angular basic) 28. 코드에서 라우팅 하기 이전 포스트에서는 routerLink로 코드 경로 이동을 해왔습니다. 템플릿 이외의 컴포넌트의 코드에서는 어떤 식으로 라우팅을 해야 할까요? 이번 포스트는 아래 내용을 다루고 있습니다. 코드에서 라우팅이 필요한 케이스 Router서비스, navigate메소드 사용하기 영화 상세페이지가 아래와 같이 있습니다. 상세페이지에서 영화 목록 페이지로 다시 이동하는 버튼을 추가 하려고 합니다. 이전에 했던 것처럼 템플릿에서 routerLink의 디렉티브를 사용해서 경로를 이동 할수 있습니다. 하지만 컴포넌트 안에서의 코드로 라우팅 하는 것도 가능합니다. 코드에서 라우팅이 필요한 케이스 어떠한 경우 템플릿의 routerLink대신 코드를 사용해서 라우팅 해야 할까요? 예를 들어 저장 버튼을 생각해 보세요. 유저가 저.. 2022. 2. 7. 앵귤러 기초(Angular basic) 27. 라우팅 파라미터 건네기 현재 페이지에서 다음 페이지로 이동할 때, 다음 페이지에 필요한 정보를 전달해야 될 경우가 많이 생깁니다. 라우팅 하면서 매개변수를 건네는 법에 대해 알아봅시다. 이번 포스트는 아래 내용을 다루고 있습니다. 매개변수를 건네는 경로 설정 snapshot을 이용하여 URL에서 매개변수 가져오기 paramMap을 이용하여 URL에서 매개변수 가져오기 매개 변수 경로 설정 매개 변수를 경로에 전달하는 첫 번째 단계는 매개 변수로 경로를 정의하는 것입니다. 'movies/:id'와 같이 / : 후 표시자를 사용해서 매개변수를 정의할 수 있습니다. 그리고 템플릿에서 routerLink를 설정하고 필요한 매개변수를 전달합니다. 배열의 첫 번째 요소는 문자열 경로이고, 두 번째 요소는 매개변수의 값입니다. 라우터가 U.. 2022. 2. 7. 앵귤러 기초(Angular basic) 26. 라우팅, 메뉴 만들기 라우팅 모듈에 계속해서 RouterLink를 사용해서 라우팅 하는 애플리케이션을 완성해 보겠습니다. 지난 포스트와 내용적으로 이어지니 참고해 주세요. 이번 포스트는 아래 내용을 다루고 있습니다. routerLink디렉티브를 이용한 메뉴 작성 router-outlet 디렉티브로 뷰 지정하기 라우팅 작동 방식 정리 라우팅 라우팅을 통해 유저는 애플리케이션을 탐색합니다. 우리는 흔히 메뉴의 옵션, 링크, 이미지 또는 버튼 등을 클릭해서 애플리케이션(웹페이지)을 탐색하게 됩니다. 또는 URL 뒤에 연결된 URL 세그먼트를 입력하거나 해당 URL에 대한 북마크를 사용하거나 브라우저의 앞으로 또는 뒤로 단추를 누를 수도 있습니다. 개발자는 유저에게 라우팅을 하기 위해 어떤 행위를 해야 하는지 또 그것이 어떻게 보여.. 2022. 2. 4. 앵귤러 기초(Angular basic) 25. 라우팅 모듈 라우팅은 어떻게 작동하게 될까요? 앵귤러 기초 포스트에서 만들고 있는 영화 관리 애플리케이션에 화면을 더 추가한 뒤, 앵귤러 라우팅 콘셉트에 대해 알아보겠습니다. 이번 포스트는 아래의 내용을 다루고 있습니다. Angular CLI로 컴포넌트 추가하기 라우팅 작동 방식 라우팅 모듈 만들기 RouterModule 앱 구성 앱 구성은 아래 다이어그램과 같이 구축할 예정입니다. 현재 진행상태는 회색 박스인 WelcomeComponent와 MovieDetialComponent는 아직 작성하지 않은 상태입니다. Angular CLI로 컴포넌트 추가하기 그럼 추가 컴포넌트를 작성하겠습니다. Angular CLI를 사용하여 코드를 생성하려면 터미널에서 아래와 같이 입력하면 됩니다. ng g c movies/movie-.. 2022. 2. 4. 이전 1 2 3 4 5 ··· 7 다음
