I am creating crud operation in Angular.js with mvc with have following pages:
Index:This is the main page under which I want to display my list of employee page i.e _employeeList.cshtml.
AddNewEmployee.cshtml:This page will be used for creating new employee
EditEmployee.cshtml:For opening record in edit mode for particular employee.
All this pages I want to render inside Index.cshtml page i.e to create single page application.
When my page loads I want to display list of employees and when user clicks on Add Employee then I want to open new add employee page.
This is my current code:
Layout.cshmtl:
<!DOCTYPE html>
<html data-ng-app="empApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<script src="~/Scripts/angular.js"></script>
</head>
<body>
@RenderBody()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
Index.cshtml:
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1 style="margin-left:750px;">
List
</h1>
<input class="btn btn-primary" type="button" data-ng-click="AddEmployee()" value="Add Employee">
<div ng-controller="employeeListCtrl">
@Html.Partial("_employeeList")
</div>
<script src="~/AppScript/Module.js"></script>
<script src="~/AppScript/Service.js"></script>
<script src="~/AppScript/Employee.js"></script>
Module.js:
var app;
(function () {
app = angular.module("empApp", [])
config(function ($routeProvider) {
$routeProvider.when('')
{
}
});
})();
So basically I am stuck here. When user will click on Add Employee button, how I will load my AddNewEmployee.cshtml page in current index.cshtml page without page refresh?
Update:
Index.cshtml:
<h1 style="margin-left:750px;">
List
</h1>
<input class="btn btn-primary" type="button" data-ng-click="AddEmployee()" value="Add Employee">
@*<div ng-controller="employeeListCtrl">
@Html.Partial("_employeeList")
</div>*@
<ng-view></ng-view>
<script src="~/AppScript/Module.js"></script>
<script src="~/AppScript/Service.js"></script>
<script src="~/AppScript/EmployeeListController.js"></script>
Module.js:
var app = angular.module("empApp", ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider.when('/employeelist',
{
templateUrl: 'Views/Home/_employeeList.cshtml',
controller: 'employeeListCtrl'
});
$routeProvider.otherwise({ redirectTo: '/Home' });
});
EmployeeListController:
app.controller('employeeListCtrl', function ($scope, crudService) {
alert()
});
But here my EmployeeListController doesnt gets called when my url is like this as shown in below pic and when I run my application why my url is like this as shown in below pic:
