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请求以获取模板

如何使用Angular渲染部分视图？

1 个答案: