title: understanding routes and templates html in angularjs, simples example possible
body: <p>I'm trying to embed angularjs into my existing asp.net mvc4 app. </p>
  
  <p>(Views/Shared/)
  <strong>_Layout.cshtml</strong></p>
  
  <pre><code>&lt;html data-ng-app="myApp"&gt;
       &lt;head&gt;
         &lt;script src="~/Scripts/angular.min.js"&gt;&lt;/script&gt;
         &lt;script src="/js/main.js"&gt;&lt;/script&gt;     
       &lt;/head&gt;
     &lt;body&gt;
          @RenderBody()
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>/js/main.js</strong></p>
  
  <pre><code>var app = angular.module("myApp", []);
  module.config(function ($routeProvider) {
      $routeProvider.when("/topics", {
          controller: "topicsController",
          templateUrl: "/js/templates/topicsView.html"
      });
      $routeProvider.otherwise({ redirectTo: "/" });
  });
  
  app.controller("topicsController", function ($scope) {
      $scope.testData = "some dummy data";
  });
  </code></pre>
  
  <p><strong>/js/templates/topicsView.html</strong></p>
  
  <pre><code>&lt;h1&gt;topics template view, dummy object &lt;/h1&gt;
  {{ testData }}
  </code></pre>
  
  <p>and inside <strong>/Views/Home/Index.cshtml</strong></p>
  
  <pre><code>&lt;div data-ng-view=""&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I'm trying to navigate to /topics using <strong>#/topics</strong> url but nothing is rendered (blank page, not 404), not even h1 title from <code>templates/topicsView.html</code></p>
  
  <p>What I'm doing wrong?</p>