title: Angular directive for route provider
body: <p>The <a href="http://docs.angularjs.org/tutorial/step_07" rel="nofollow">angular tutorial</a> invokes the <code>route provider</code> <strong>explicitly</strong> below, (being adapted for the sake of succinctness)</p>
  
  <pre><code>angular.module('myApp', []).
    config(['$routeProvider', function($routeProvider) {
      $routeProvider.
        when('/myResource1', 
          {templateUrl: 'partials/myView1.html', controller: MyController1}).
        when('/myResource2', 
          {templateUrl: 'partials/myView2.html', controller: MyController2}).
        otherwise({redirectTo: '/index.html'});
    }]);
  </code></pre>
  
  <p>Can we define the <code>route provider</code> <strong>separately</strong>, then invoke it by means of <code>angular directive</code> below? Is there such a directive existing? Otherwise, how to make through with it?</p>
  
  <pre><code>function MyRouteProvider($routeProvider) {
      $routeProvider.
        when('/myResource1', 
          {templateUrl: 'partials/myView1.html', controller: MyController1}).
        when('/myResource2', 
          {templateUrl: 'partials/myView2.html', controller: MyController2}).
        otherwise({redirectTo: '/index.html'});
  };
  </code></pre>
  
  <pre><code>&lt;html ng-app="myApp"&gt;
  &lt;head&gt;
    &lt;script src="lib/angular.js"&gt;&lt;/script&gt;
    &lt;script src="js/MyControllers.js"&gt;&lt;/script&gt;
    &lt;script src="js/MyRouteProvider.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-routeProvider="MyRouteProvider"&gt;
  
  ...
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <pre><code>myApp
    |__index.html
    |__js
    |   |__MyControllers.js
    |   |__MyRouteProvider.js
    |__partials
        |__myView1.html
        |__myView2.html
  </code></pre>