Hi, My app is SPA.So my question is, could you tell me how to use Angular ng-include with the razor page ? One of my page is having more than 12 tabs.So at this moment I have put all the html templates on the same page hence it does not work when I put its own pages.
This is the sample of that page :
<div class="modal-body">
<uib-tabset class="tab-container tabbable-line">
<uib-tab heading="@L("PropertyInformation")" ng-if="vm.permissions.propertyInformation">
<div ng-include="'createPropertyForm.html'"></div>
</uib-tab>
<uib-tab heading="@L("OwnerInfo")" ng-if="vm.permissions.ownerInfo">
<div ng-include="'createOwnerDetailForm.html'"></div>
</uib-tab>
<uib-tab heading="@L("DescriptionBpoForm")" ng-if="vm.permissions.descriptionBpoForm">
<div ng-include="'createBpoForm.html'"></div>
</uib-tab>
<uib-tab heading="@L("ForeclosureActions")" ng-if="vm.permissions.foreclosureActions">
<div ng-include="'createForeclosureActionsForm.html'"></div>
</uib-tab>
<uib-tab heading="@L("ResaleInformation")" ng-if="vm.permissions.resaleInformation">
<div ng-include="'createResaleInformationForm.html'"></div>
</uib-tab>
<uib-tab heading="@L("EvaluatorForm")" ng-if="vm.permissions.evaluatorForm">
<div ng-include="'createEvaluatorForm.html'"></div>
</uib-tab>
</uib-tabset>
</div>
At this moment "createPropertyForm.html, createOwnerDetailForm.html,etc.." templates are on the same page as shown below.
<script type="text/ng-template" id="createPropertyForm.html">
<form name="createPropertyForm" role="form" novalidate class="form-validation">
<div class="row">
<div class="col-xs-4">
<div class="form-group form-md-line-input form-md-floating-label no-hint">
<input class="form-control" type="text" name="StreetNumber" ng-model="vm.property.address.streetNumber" ng-class="{'edited':vm.property.address.streetNumber}" required maxlength="@Address.MaxLength">
<label>@L("StreetNumber")</label>
</div>
</div>
<div class="col-xs-4">
<div class="form-group form-md-line-input form-md-floating-label no-hint">
<input class="form-control" type="text" name="StreetName" ng-model="vm.property.address.streetName" ng-class="{'edited':vm.property.address.streetName}" required maxlength="@Address.MaxLength">
<label>@L("StreetName")</label>
</div>
</div>
//removed for clarity
</form>
</script>
I have asked this question on stack overflow here : [http://stackoverflow.com/questions/33591784/angular-ng-include-is-not-working-with-the-razor-page])
But I don't know how to apply that solution with the Asp.NetZero SPA template.Could you tell me how ? Thanks.
6 Answer(s)
-
0
There are some cases we used ng-include. It's not related to razor. See this example usage: <a class="postlink" href="https://github.com/aspnetzero/aspnet-zero/blob/master/src/MyCompanyName.AbpZeroTemplate.Web/App/common/views/layout/layout.cshtml#L65">https://github.com/aspnetzero/aspnet-ze ... cshtml#L65</a> Maybe you need to set full path as this example.
-
0
Yes,It's working now when I use as you mentioned above.But now the problem is,it is having considerable amount of delay.Which is noticeable. In other words I need to use it inside the popup.On that popup where having more than 12 tabs.After above template separation, popup shows the tab headings without the html content inside the tab.After the delay it loads the html content.This happens first time only.But it is very BAD user experience.Do you have any trick to improve its performance or other method ? Thanks.
<uib-tab heading="@L("PropertyInformation")" ng-if="vm.permissions.propertyInformation"> <div ng-include="'~/App/tenant/views/propertymanagement/createPropertyForm.cshtml'"></div> </uib-tab> -
0
Hi,
I understand the user experience problem. I don't know how to make it faster. Maybe you somehow pre-cache it. I think that this should be a common problem with angular (even not only angular, it's about async nature of javascript frameworks) and you can search web for it.
-
0
Hi, I have done that by using $templateCache service.Cheers :)
app.js
appModule.run(["$templateCache", "$http", function ($templateCache, $http) { $http.get('~/App/tenant/views/propertymanagement/tabs/createPropertyForm.cshtml', { cache: $templateCache }); }]);cshtml page
<uib-tab heading="@L("PropertyInformation")" ng-if="vm.permissions.propertyInformation"> <div ng-include="'~/App/tenant/views/propertymanagement/tabs/createPropertyForm.cshtml'"></div> </uib-tab> -
0
Thank you for the information, we learned it :)
-
0
You're warmly welcome ! :)
