Ng-view does not load partial view in index.cshtml
I am learning angularjs and working on a single page application using ng-view. Unfortunately my partial views are not loading in 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>
source to share
You cannot load the file .cshtml
directly from your path that you need to load from an MVC controller action as it contains a razor to be parsed using the MVC Razor view engine, also assume you have a controller Employee
that will contain an action AddEmp
that indirectly indirectly takes the form usingc#
App.js
$routeProvider.
when('/addemp', {
templateUrl: 'Employee/AddEmp', //you need to call controller action
controller: 'EmployeeInfoController'
}).
source to share
The problem is I was using Angular 1.4 (which automatically installs the nuget package manager for Visual Studio.)
Angular 1.4's routing has been changed to use 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 solution was to load the Angular 1.3 scripting library into my project. Then my partial views worked fine.
source to share