[Angular.js][앵귤러js] AngularJS 9일차 [View, $routeprovider, 뷰, 라우트프로바이더]

안녕하세요 슬릭데브 입니다 ^^

주말부터 월요일까지 데이터베이스와 연결하는 방법을 올리려고 생각해봤는데

그 전에 배워야 할게 남아있어서 9일차 내용을 이제 올리게 되었습니다.

데이터베이스와 연결편은 이번 주말에 올릴 예정입니다.

오늘은 View, $routeProvider, Scope 에 대해서 더 자세히 배워보겠습니다.

---

Angular.js 는 Single Page Application (SPA 앱) 을 만들수 있다는 장점이 있지만 여러 page 들을 만드려면 어떡해 해야하는지 배워보겠습니다.

• ng-view : 화면에서 다른 page를 삽입할 장소를 만들어 줍니다.
• ng-template : Script 에서 HTML view 를 만들어줍니다. "id" 속성이 있는데 $routeProvider가 id를 이용해서 view 와 controller를 이어줍니다.
• $routeProvider : Service 중에 하나로 url 설정을 해주고 html page 와 controller를 연결시켜줍니다.

오늘도 예제를 통해서 배워봅시다.

ng-view 예제:

<div> 태크에서 ng-view를 넣어줍니다.

ng-template 예제:

<script> 태그 안에 ng-template 을(를) 넣어줍니다.

$routeProvider 예제:

제가 여러 예제들을 공부하면서 보니까 파일을 js 파일과 html 파일 2개만 있었습니다.

저번 글에서는 파일을 controller 따로 module 따로 만들었는데 요즘엔 module과 controller를 하나의 파일에 넣어줍니다.

• routeProvider 는 $routeProvider 키를 config 에서 설정해줍니다.

• when 은 template url 과 controller 를 설정해줍니다.

• otherwise 는 default 페이지를 설정해줍니다.

---

App.js 코드

searchrestaurant.html 코드

이렇게 하시고 브라우저로 작동시키면 아래와 같이 나옵니다.

이런 방법으로 로그인 화면을 만들수 있습니다.

다음에 데이터베이스 연결하고 로그인 화면을 만들겠습니다.

---

질문은 댓글로 남겨주세요!

매일 글을 올리도록 하겠습니다.

감사합니다.

//슬릭데브

추가: 소스코드

9일차 코드.zip