I'm currently trying to use Visual Studio 2010 to learn some Angular JS and I'm having a problem rendering partials views. I have a shell page index.html and a table which contains some person data inside /partials/list.html. When a user clicks on a button located in the table in list.html they should be taken to another partial view edit.html. When I run the project the I get this as the url in the browser: http://localhost:62807/index.html#/ and the partial view list.html is injected where it needs to be. Here's what those two things look like:
index.html <!DOCTYPE html> <html> <head> <title>Angular JS Routing</title> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"/> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet"> </head> <body> <div ng-app="enterprise" ng-controller="AppController"> <a href="#"><h2>Enterprise Crew</h2></a> <ng-view></ng-view> </div> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.min.js"></script> <script src="js/app.js"></script> </body> </html> here's the partial view injected into the ng-view tag from index.html
<table class="table table-striped" style="width: 250px"> <thead> <tr> <td>Name</td> <td>Description</td> <td> <a href="/new"><i class="glyphicon glyphicon-plus-sign"></i></a> </td> </tr> </thead> <tbody> <tr ng-repeat="person in crew"> <td>{{person.name}}</td> <td>{{person.description}}</td> <td><i class="glyphicon glyphicon-edit"></i></td> </tr> </tbody> </table> Here's what it looks like when it's rendered: 
When the user clicks the plus sign they need to be taken to another partial view edit.html, this is in the same partials folder as list.html. It's HTML looks like
edit.html
<form action=""> <input ng-model="person.name"/> <input ng-model="person.description"/> <button ng-click="save()" class="btn-primary">Save</button> save function not yet implemented </form> When I'm at the URL in my browser http://localhost:62807/index.html#/ everything loads up fine and the list.html partial view is injected where it needs to be. When I hover my mouse over the plus button I get a URL preview of localhost:62807/new. When clicked this should inject the edit.html partial view, but instead I get a 404 error.
Here's the JS.
angular.module('enterprise',['ngRoute']) .config(function($routeProvider){ $routeProvider .when("/",{templateUrl:"partials/list.html"}) .when("/new",{templateUrl:"/partials/edit.html"}) }) //this is the that iterated over in the partial views ng-repeat function AppController($scope){ $scope.crew =[ {name:'Picard',description:'captain'}, {name: 'Riker',description:'number 1'}, {name:'Word',description:'Security'} ] } The problem is somewhere in the routing, I believe. In video tutorials I have followed I notice that the URLs that I get when I run the application include either the project name or the page name in them (in this case index.html is included in the URL). I'm curious why the list.html view gets injected correctly in the first place, and whenever I try to navigate to /new the edit.html partial view isn't correctly injected. I'm playing around with this all locally, so I would like to first of all get it working and then understand what the deal is and why the list.html partial view will render and edit.html doesn't.
/intentional in your"/new"route templateUrl "/partials/edit.html" ?localhost:5555should render index.html with list.html inside of it, and then navigating to /new from the root directory should inject edit.html where list.html was.