Mean Stack 으로 만드는 만화 사이트 #6

일단 이 만화세상이라는 부분을 바꾸고 싶다.

스크린샷 2015-12-09 오후 6.44.05.png

이부분이 현재 페이지에 맞게 동적으로 바뀌었으면 좋겠다. 이걸 하기 위해서는 Angular 의 scope 범위에 대해서 알아야 한다.

현재 우리들은

스크린샷 2015-12-09 오후 6.50.23.png

이런 식의 scope범위가 설정 되어 었다. RootScope는 언제나 모든 scope의 제일 최상위에 있는 scope이다. 우리는 항상 App이라는 controller 곳에서 사이드바나 fab이 사라지고 지워지는 작업을 해왔다. 이 AppController은 index.html의 body부분에 설정되어 있다. 즉 우리가 무슨 controller을 만들건 그건 무조건 AppController의 child가 된다. (우리가 그렇게 설정을 했었다) 그 다음 ng-view는 body안에 있다. 우리가 angularApp.js에서 config 설정을 통해 ng-view가 어떤 template을 가지고 어떤 controller을 가질지 설정을 하였었다. 만약 우리가 /zangsisi/lists에 접속한다면 ng-view는 list.html을 가지고 그때 controller는 listCtrl이 된다. AppController안에 listCtrl이 있는 상태이다. 만약 우리가 view의 url로 이동한다면 ng-view는 view.html로 바뀌고 controller는 viewCtrl을 이용한다. 이때도 viewCtrl은 AppController의 child다. Angular는 일반적으로 자신이 가진 scope의 범위만을 controll할 수 있다.  다른언어 들로 설명하면 함수안의 지역변수 같은 느낌이다. 하지만 parent의 scope에 대해서는 접근이 가능하다. 우리가 parent의 scope에 접근 하기 위해서는 $parent라는 것을 쓰면 된다. 만약 viewCtrl에서 $scope.$parent.a를 사용한다면 그건 view의 parent인 AppController의a를 사용하는 것이다. 또한 Angular는 $rootScope를  지원한다. 이것을 통해 우리는 다른 부모 자식간의 scope들을 넘나들수 있다. 그러면 형제 들같은 부모 자식간의 scope가 아니면 어떻게 데이터를 주고 받지? 라고 할텐데 이부분은 Angular service등을 이용하여 줄 수 있다. 이미 얘기가 길어졌다. 그부분은 나중에 설명한다. angular scope에 대해 검색하면 좋은 예제나 설명이 많을 것이다. 꼭 검색한다음 알아보길 바란다. 아무튼 우리는 이것을 이용하여 동적으로 타이틀을 바꿀것이다.

일단 header.html에 들어가서 만화세상 이라고 써진 부분을  {{nowTitle}}로 수정하자. 그다음

스크린샷 2015-12-09 오후 9.19.13.png

이렇게 각각의 경우에 $scope.$parent.nowTitle을 적당하게 수정해 준다. 이제 다시 확인해 보면 각각의 경우마다 잘 바뀌는걸 확인 할 수 있을 것이다. 됐다. 그리고 검색창을 없앴다. 이 사이트는 검색이 별로 안 중요하다. 그러면 남는 헤더에 무엇을 넣으면 좋을지 생각해보자. (아직은 별 생각이 없다 나중에 무엇을 넣으면 좋을지 생각해보자.) 그리고 현재는 만화를 1편를 보면 그 다음화를 보기 위해서는 다시 리스트 페이지로 돌아가야 된다. 이부분이 조금 별로 인 것 같다. 고쳐보자. 어떻게 고칠 수 있을까? 우리는 만화를 index로 참조하고 있다. index +1 ,index-1 이 아마 다음화, 이전화 일 것이다. 추가해 보자.

스크린샷 2015-12-09 오후 9.53.17.png이런식으로 하였다. 그다음 view.html에서 마지막 부분에 적당히 버튼을 추가해 주면 잘 된다. 그러면 드디어 그럴사한 zangsisi.net 이라는 만화사이트의 미러사이트를 만들었다. 그러면 다음 #7에는 다음 사이트인 minitoon.net 이라는 사이트를 크롤링 해보도록 하자. 이 사이트는 로그인을 하지 않으면 보이지 않는 내용이 보이지 않는 사이트 이다. 우리는 이 사이트를 크롤링 하기 위해 세션과 함께 크롤링 request를 보내도록 해야한다. 자세한 부분은 #7에서 하도록 하자. (방금 알았다. #6의 포스팅의 git commit 이 6이 아니라 7로 되어있다. 죄송합니다.ㅠㅠ 그래도 순서를 보면 알수 있으니 용서해 주세요 ㅠㅠ)

Advertisements

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

w

%s에 연결하는 중