$route와 page reload

$route는 위치(URL) 변경에 따라 뷰를 전환하는데 쓰인다.

공식 홈피의 API를 함고 해보면 다음과 같다.

---

$route is used for deep-linking URLs to controllers and views (HTML partials). It watches $location.url() and tries to map the path to an existing route definition.

컨트롤러와 뷰에 URL을 깊게 연결하기위해서 쓰이며 $location.url()를 본다고 한다.

또한 기존의 route definition 에 경로를 연결 시도하는데에도 쓰이는거 같다.

$routeProvider's API를 통해서 정의할수 있으며 ngRoute모듈이 설치되어 있어야 사용가능하다.

$route 서비스는 전형적으로 ngview directive와  $routeParams의 결합에 사용된다.

종속성 : $location, $routeParams

---

$route.reload()를 통해서 해당하는 URI에 연결된 뷰단을 새로고침이 가능하다.

페이지 전체를 새로고침하는 것이 아니라 해당 URL에 연계된 뷰단만 새로고침 한다는 것이다. 즉 해더, 푸터는 그냥 그대로인 것이다.

Angular은 뷰단에 대해서 각각 URL를 지정해 놓고 거기에 컨트롤러를 거의 하나씩 배당시켜놓았다.

translate, 즉 다국어 언어 번역을 처리하는데 있어서 보통은 양방향 이라서 적용이 되는데 이번의 경우에는 약간 달랐다.

HTML 페이지 내에서 다시 ng-repeat를 통해서 select 문을 여러개 생성해 놓았다.

select문의 내용 자체가 다시 js 컨트롤 파일에서받아오는데 

js 컨트롤 내의 특정 변수 값이 뷰단의 특정한 버튼을 눌렀을 때 먼저 translate 파일로 인해서  값이 변화하고

그 변화된 값을 다시 가져와서 select 문을 ng repeat로 다시 돌리고

그것을 다시 HTML 문서에 로딩을 해야 했다.

아마.. watch문과 그외 다른 것들을 사용하면 어쩌면 될수도 있겠다고 생각은 들었지만

일단 동료가 나에게 가르쳐 준 방법은 js 값이 변형된 것을 다시 select 문에 ngrepeat로 돌리고 그것을 다시 html에 적용하는 방식으로 $route.reload()를 가르쳐줬다.

참고로 ngtable의 경우에는 굳이 $route.reload()를 하지 않아도 뒤에 reload()를 붙여주면 그것만 알아서 새로고침이 가능하다고 한다.

또한 자바스크립트에서 document.~~~~를 통해서 직접적으로 HTML에 연결되어 있는 translate에 대해서는 굳이 $route를 쓰지 않아도 바로 적용이 된다고 했다.

자세한 내용은 API(밑) 참조

---

Methods

• reload();

  Causes $route service to reload the current route even if $location hasn't changed.

  As a result of that, ngView creates new scope and reinstantiates the controller.

• updateParams(newParams);

  Causes $route service to update the current URL, replacing current route parameters with those specified in newParams. Provided property names that match the route's path segment definitions will be interpolated into the location's path, while remaining properties will be treated as query params.

  Parameters

  Param	Type	Details
  newParams	!Object<string, string>	mapping of URL parameter names to values

Events

• $routeChangeStart

  Broadcasted before a route change. At this point the route services starts resolving all of the dependencies needed for the route change to occur. Typically this involves fetching the view template as well as any dependencies defined in resolve route property. Once all of the dependencies are resolved$routeChangeSuccess is fired.

  The route change (and the $location change that triggered it) can be prevented by callingpreventDefault method of the event. See $rootScope.Scope for more details about event object.

  Type:

  broadcast

  Target:

  root scope

  Parameters

  Param	Type	Details
  angularEvent	Object	Synthetic event object.
  next	Route	Future route information.
  current	Route	Current route information.

• $routeChangeSuccess

  Broadcasted after a route dependencies are resolved. ngView listens for the directive to instantiate the controller and render the view.

  Type:

  broadcast

  Target:

  root scope

  Parameters

  Param	Type	Details
  angularEvent	Object	Synthetic event object.
  current	Route	Current route information.
  previous	RouteUndefined	Previous route information, or undefined if current is first route entered.

• $routeChangeError

  Broadcasted if any of the resolve promises are rejected.

  Type:

  broadcast

  Target:

  root scope

  Parameters

  Param	Type	Details
  angularEvent	Object	Synthetic event object
  current	Route	Current route information.
  previous	Route	Previous route information.
  rejection	Route	Rejection of the promise. Usually the error of the failed promise.

• $routeUpdate

  The reloadOnSearch property has been set to false, and we are reusing the same instance of the Controller.

  Type:

  broadcast

  Target:

  root scope

  Parameters

  Param	Type	Details
  angularEvent	Object	Synthetic event object
  current	Route	Current/previous route information.

Properties

• current

  Object

  Reference to the current route definition. The route definition contains: controller: The controller constructor as define in route definition. locals: A map of locals which is used by $controller service for controller instantiation. The locals contain the resolved values of the resolve map. Additionally the locals also contain: $scope - The current route scope. $template - The current route template HTML.

• routes

  Object

  Object with all route configuration Objects as its properties.