안녕하세요 angular로 SPA 형식의 웹을 작성하다가 SPA의 특성인지 아래와 같은 문제점이 발생했습니다.

    <div ng-include="'src/app/html/header-m.html'"></div>

        <div ng-view=""></div>

    <div ng-include="'src/app/html/footer-m.html'"></div>

이런식으로 head와 foot는 공통적으로 쓰고 가운데 컨텐츠만 라우터에 따라 html을 바꾸도록 했습니다.

매 페이지마다 발동 되는 함수가 있습니다. 

예를 들어 매 페이지마다 pc와 mobile을 구분후 기기에 따라 라우터를 다르게 입장

mobile인데 pc화면으로 볼경우 강제적으로 mobile 화면으로 전환 이런식으로 매 페이지마다 동작을 시키는 함수 입니다.

그땐 SPA 개념이 아니기 때문에 매 페이지시 head와 foot html을 불러왔기 때문에 항상 head에 정의한 함수가 발동이 됬었습니다.

허나 angular로 head에 정의를 하니깐 첫 입장시만 발동하고 그뒤엔 가운데   

        <div ng-view=""></div> 만 바뀌기 때문에 불러오는 html에 정의한 함수만 발동이 되고 있습니다.

이 방식이라면 저는 head에 정의가 아니라 모든 html에 같은 함수를 정의해야 합니다ㅠ....

그렇다고 SPA를 포기하고 window.location 으로 매 페이지마다 로딩을 시킬수도 없습니다;;

이러한 현상을 해결할려면 어떻게 해야 할까요? 지금 당장은 모든 html에 같은 함수를 정의해서 동작은 시키고 있습니다.

나중에 구글 analytics 도 넣어야 하는데;; ( 이전까진 analytics도 head 에 한번만 정의 ) SPA라 이러한 문제점을 격을줄은 몰랐습니다;

지금또 제가 생각한 방법은 ng-view로 html을 부를때 컨트롤단을 2가지를 불르는 방법 입니다. 

만약  /aaa로 라우터 입장시  aaa.html 소환

<div ng-view></div> 영역이 aaa.html 소환

aaa.html

<div ng-controller="aaa관련 컨트롤">

//여기에 aaa.html내용 작성

</div>

이런식으로 그외에 다른 라우터일시 xxx.html에서도 마찬가지로

는 무조건 정의하게 되면 어느 페이지든지 공통 함수 컨트롤을 발동시키게 할까요?

다른 방법이 있다면 조언해 주시면 감사하겠습니다.