I'm trying to build a SPA with Asp.Net MVC. for this I'm using angularJs routing .This is my project hierarchy.Image may be NSFW.
Clik here to view.
My Layout.cshtl code
<html lang="en" ng-app="ProjectTrackingModule"><head><script src="~/Scripts/jquery-2.1.0.min.js"></script><script src="~/Scripts/angular.min.js"></script><script src="~/Scripts/angular-route.min.js"></script><script src="~/Scripts/app.js"></script></head><body><a href="#Home">Home</a><a href="#Projects">Projects</a><div ng‐view style="margin‐left: 10%; margin‐right: 10%;"></div>//... footer</body></html>My app.Js code is as follow:
var app = angular.module('ProjectTrackingModule', ['ngRoute', 'ui.bootstrap']);app.config(function ($routeProvider) { $routeProvider .when("/Home", { templateUrl: "/Views/Home/Home.cshtml", controller:"HomeController" }) .when("/Projects", { templateUrl: "/Views/ProjectManagement/ProjectDetails.cshtml", controller: "ProjectsController" }) .otherwise({redirectTo:"/Home"})});I want to load my Home.Cshtml partial view inside ng-view. But when I run my application, It only showing Home partial view.
also when I click on Project, then it should render ProjectDetails.cshtml inside ng-view.
code inside ProjectDetails.cshtml
<div ng-controller="ProjectsController"><h2>ProjectDetails</h2></div>