如何使用Angular渲染部分視圖？

Question

我有以下航線配置：

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 = {})); 

我ListEmployee部分觀點如下：

<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> 

我如何可以使採用了棱角分明的指數對此有何看法？ 類似的東西，但不與MVC，具有角指令或東西

<script type="text/ng-template" id="employee"> 
     @Html.Partial("~/Views/Home/EmployeePartialViews/AddEmployee.cshtml"); 
     @Html.Partial("~/Views/Home/EmployeePartialViews/ListEmployee.cshtml"); 
    </script> 

Answer 1

如果你把一個<script>標記的HTML如圖所示然後使用templateUrl匹配script標籤的ID

JS

.state('welcome', { 
      url: '/welcome', 
      templateUrl: 'employee.html' 
    }) 

HTML

<script type="text/ng-template" id="employee.html"> 

這也是指令的相同慣例。

如果沒有匹配的腳本標記，則向服務器發送ajax請求以獲取模板