Angular Mini Router

by Tommy

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.4.8/angular-sanitize.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  
  <div ng-repeat="c in components">
    {{$index}}: {{c}}
  </div>
  
  <br/>
    
  <h4>
    With ng-repeat
  </h4>
  
  <div ng-repeat="c in components" util-router="c" class="black-box">
    <div class="blue-box">
      <p><strong>Top Level Data is accessible</strong></p>
      {{topLevelData.a}}
      <br/>      
      {{topLevelData.b}}
    </div>
    {{name || '"name" not defined'}}
    <br/>
    "c" <small>(from ng-repeat scope)</small>: {{c}}
    <br/>
    {{component.name}}
    <br/>
    {{component.c}}
    <br/>
    <input type="text" ng-model="component.name" />
  </div>

  
  <br/>
  
  <h4>
    Standalone
  </h4>
  
  <div util-router="components[0]" class="blue-box">
    <strong>{{component.name}}</strong>
    <br/>
    {{component.c}}    
    <br/>
    <input type="text" ng-model="component.name" />
  </div>
  
  <br/>
  {{component || '"component" not defined here'}}
  <br/>
  {{c || '"c" not defined here'}}
  
</div>

CSS

.blue-box {
  border: 1px blue solid; 
  margin: 5px; 
  padding:5px;
}

.black-box {
  border: 1px black solid; 
  margin: 5px; 
  padding:5px;
}

JavaScript

angular.module('app',[])

	.controller('routeCtrl1', [
  '$scope','Component',
  function($scope, Component){
  	Component.name += '11111';
  }])
  
  .controller('routeCtrl2', [
  '$scope','Component',
  function($scope, Component){
  	$scope.name = Component.name + '2';
  }])
  
  .controller('defaultRouteCtrl',[
  '$scope','Component',
  function($scope, Component){
  	$scope.name = Component.name + ' Default';
  }])
  
  .directive('utilRouter',[
  '$controller','$parse',
  function($controller, $parse){
  
  	return {
    	restrict: 'A',
      scope: true,
      link: function(scope, elem, attrs){
      	
        var input = $parse(attrs.utilRouter)(scope);
        scope.component =input;
        var c = input.c;
        
        try {
        	$controller(c, {$scope: scope, Component: input});
        } catch (err){
        	c = 'defaultRouteCtrl';
        	$controller('defaultRouteCtrl', {$scope: scope, Component: input});
        }
        elem.attr('data-controller', c);
      }
    };
  
  }])
	.controller('ctrl',[
  '$scope',
  function($scope){
  
  	$scope.topLevelData = {
    	a: '1',
      b: '22',
      c: '333'    
    };
  
  	$scope.components = [
    	{
      	c: 'routeCtrl1',
        name: 'First Component'
      },
      {
      	c: 'fakeCtrl',
        name: 'Second Component'
      },
      {
      	c: 'routeCtrl2',
        name: 'Third Component'
      }    
    ];
  }]);