javascript - How to render partial views with Angular? -
i have following route config :
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 = {})); my listemployee partial view looks this:
<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 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> how can render view in index using angular ? not mvc , angular directives or something
<script type="text/ng-template" id="employee"> @html.partial("~/views/home/employeepartialviews/addemployee.cshtml"); @html.partial("~/views/home/employeepartialviews/listemployee.cshtml"); </script>
if put html in <script> tag shown use templateurl match id of script tag
js
.state('welcome', { url: '/welcome', templateurl: 'employee.html' }) html
<script type="text/ng-template" id="employee.html"> this same convention directives also.
if there isn't matching script tag ajax request made server template
Comments
Post a Comment