I am currently working on the following route configuration:
var Company;
(function (Company) {
var HomeConfig = (function () {
function HomeConfig($stateProvider, $urlRouterProvider) {
this.$stateProvider = $stateProvider;
this.$urlRouterProvider = $urlRouterProvider;
this.$urlRouterProvider.otherwise('/welcome');
this.$stateProvider
.state('welcome', {
url: '/welcome',
template: function () {
return $("#welcome").html();
}
})
.state('employee', {
url: '/employee',
views: {
'': {
template: function () {
return $("#employee").html();
},
controller: 'employeeController',
controllerAs: 'viewModel'
}
}
})
.state('success', {
url: '/success?firstName&lastName&gender&salary&phoneNumber',
template: function () {
return $('#success').html();
},
controller: 'successEmployeeRegisterController',
controllerAs: 'viewModel',
params: {
firstName: { value: "", squash: true },
lastName: { value: "", squash: true },
gender: { value: "", squash: true },
salary: { value: "", squash: true },
phoneNumber: { value: "", squash: true }
}
})
.state('department', {
url: '/department',
template: function () {
return $("#department").html();
},
controller: 'departmentController',
controllerAs: 'viewModel'
});
}
HomeConfig.$inject = [
'$stateProvider',
'$urlRouterProvider'
];
return HomeConfig;
})();
Company.HomeConfig = HomeConfig;
})(Company || (Company = {}));
This is what my ListEmployee partial view looks like:
<md-content class="overview" flex="100" layout-xs="column" layout-gt-xs="row">
<div flex-gt-xs="33" ng-repeat="employee in viewModel.employees track by employee.id">
<div layout="row" flex-gt-xs="90">
<md-card>
<md-card-header>
<md-card-header-text layout="column">
<span class="md-title">
{{employee.fullName}}
</span>
</md-card-header-text>
</md-card-header>
<img ng-src="~/Images/profile.svg" style="height:130px ; width:180px" class="md-card-image" alt="Washed Out">
<md-card-title>
<md-card-title-text>
<p>
Salary: {{employee.salary}}
</p>
<p>
Gender: {{employee.gender}}
</p>
<p>
Phone Number: {{employee.phoneNumber}}
</p>
<p>
Department: {{employee.department.name}}
</p>
</md-card-title-text>
</md-card-title>
<md-card-content>
</md-card-content>
<md-card-actions layout="row" layout-align="end center">
<md-button ng-click="viewModel.edit(employee.id)">Edit</md-button>
<md-button ng-click="viewModel.delete(employee.id)">Delete</md-button>
</md-card-actions>
</md-card>
<md-card>
</div>
</div>
</md-content>
I would like to know how I can render this view in index using AngularJS without MVC but with Angular directives or similar approach.
<script type="text/ng-template" id="employee">
@Html.Partial("~/Views/Home/EmployeePartialViews/AddEmployee.cshtml");
@Html.Partial("~/Views/Home/EmployeePartialViews/ListEmployee.cshtml");
</script>