Nested Views, Routing, And Deep Linking With AngularJS

controller-misc.js

// Make sure this change is relevant to this controller.
if ( ! renderContext.isChangeRelevant() ) {

	return;

}

controller.js

(function( ng, app ){

	"use strict";

	app.controller(
		"pets.detail.DetailController",
		function( $scope, requestContext, _ ) {


			// ...
			// Other methods defined here.
			// ...


			// Get the render context local to this controller (and relevant params).
			var renderContext = requestContext.getRenderContext( "standard.pets.detail", "petID" );


			// --- Define Scope Variables. ---------------------- //


			// Get the relevant route IDs.
			$scope.petID = requestContext.getParamAsInt( "petID" );

			// The subview indicates which view is going to be rendered on the page.
			$scope.subview = renderContext.getNextSection();


			// --- Bind To Scope Events. ------------------------ //


			// I handle changes to the request context.
			$scope.$on(
				"requestContextChanged",
				function() {

					// Make sure this change is relevant to this controller.
					if ( ! renderContext.isChangeRelevant() ) {

						return;

					}

					// Get the relevant route IDs.
					$scope.petID = requestContext.getParamAsInt( "petID" );

					// Update the view that is being rendered.
					$scope.subview = renderContext.getNextSection();

					// If the relevant ID has changed, refresh the view.
					if ( requestContext.hasParamChanged( "petID" ) ) {

						loadRemoteData();

					}

				}
			);


			// --- Initialize. ---------------------------------- //


			// Load the "remote" data.
			loadRemoteData();


		}
	);

})( angular, Demo );

view.htm

<div ng-controller="pets.detail.DetailController">


	<!-- More code here. -->


	<!-- Include SubView Content. -->
	<div ng-switch="subview">
		<div ng-switch-when="background" ng-include=" ... "></div>
		<div ng-switch-when="diet" ng-include=" ... "></div>
		<div ng-switch-when="medicalHistory" ng-include=" ... "></div>
	</div>


	<!-- More code here. -->


</div>