Menu
I am learning angularjs and working on a single page application using the ng-view. Unfortunately, my partial views won't load into my index.cshtml. Instead they load as a separate page. Below is my code:
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div ng-app="employeeInfoApp" ng-controller="employeeCtl">
<div class="col-sm-4">
<!--Example of a Dropdown List-->
<select ng-model="employeeinfo.EmpName" ng-options="employeeinfo.EmpName for employeeinfo in EmployeeInfoes">
<option value="">-- Please Select A Client Company --</option>
</select>
<p></p>
<!-- Example of Table of Data-->
<table>
<thead>
<tr>
<th>Emp Name</th>
<th>Dept Name</th>
<th>Designation</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="emp in EmployeeInfoes">
<td>{{emp.EmpName}}</td>
<td>{{emp.DeptName}}</td>
<td>{{emp.Designation}}</td>
</tr>
</tbody>
</table>
<p></p>
<a href="addemp">Add Employee</a>
<div ng-view class="container"></div>
</div>
</div>
</body>
</html>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-resource.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/Scripts/LegalScripts/legalServices.js"></script>
<script>
//Name the module
var app = angular.module('employeeInfoApp', ['ngResource', 'legalServices', 'ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/addemp', {
templateUrl: 'AddEmp.cshtml',
controller: 'EmployeeInfoController'
}).
otherwise({
redirectTo: '/home'
});
}]);
//Add the controller
app.controller("employeeCtl", ["$scope", "EmployeeInfo", function ($scope, EmployeeInfo) {
$scope.EmployeeInfoes = EmployeeInfo.query();
$scope.SelectedEmployeeInfo = {};
}]);
</script>
691
asked Mar 18 '26 20:03
You can't load .cshtml file directly from its path you need to load it from MVC controller action as it contains razor which which should be parsed using MVC Razor view engine likewise suppose you had Employee controller that will contain an action AddEmp that will return a view indirectly using c#
App.js
$routeProvider.
when('/addemp', {
templateUrl: 'Employee/AddEmp', //you need to call controller action
controller: 'EmployeeInfoController'
}).
The issue here is that I was using Angular 1.4 (which visual studio nuget package manager automatically installs.)
Routing in Angular 1.4 has been changed to accommodate using multiple views (and components) but the old ng-view directive won't work. See this Introduction to Routing in 1.4
http://www.codeproject.com/Articles/891436/Introduction-to-Basics-of-Angular-newRouter
My quick fix solution was to download the Angular 1.3 scripts library into my project. Then my partial views worked fine.
27
answered Mar 21 '26 11:03
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
