如何使用 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>

如何使用 angular 在索引中呈现此视图？ 类似的东西，但不是 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

如果您将 html 放入 <script> 标记中，如图所示，则使用 templateUrl 匹配脚本标记的 ID

JS

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

HTML

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

这也是指令的相同约定。

如果没有匹配的脚本标签，则向服务器发出 ajax 请求以获取模板