Question

我正在学习angularjs并使用ng-view处理单页应用程序。不幸的是，我的部分视图不会加载到我的index.cshtml中。相反，它们作为单独的页面加载。以下是我的代码：

            <html>
            <head>
                <meta name="viewport" content="width=device-width" />
                <title>Index</title>
            </head>
            <body>
                <div ng-app="employeeInfoApp" ng-controller="employeeCtl">
                    <div class="col-sm-4">
                        <!--Example of a Dropdown List-->
                        <select ng-model="employeeinfo.EmpName" ng-options="employeeinfo.EmpName for employeeinfo in EmployeeInfoes">
                            <option value="">-- Please Select A Client Company --</option>
                        </select>
                        <p></p>
                        <!-- Example of Table of Data-->
                        <table>
                            <thead>
                                <tr>
                                    <th>Emp Name</th>
                                    <th>Dept Name</th>
                                    <th>Designation</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr data-ng-repeat="emp in EmployeeInfoes">
                                    <td>{{emp.EmpName}}</td>
                                    <td>{{emp.DeptName}}</td>
                                    <td>{{emp.Designation}}</td>
                                </tr>
                            </tbody>
                        </table>
                        <p></p>
                        <a href="addemp">Add Employee</a>
                        <div ng-view class="container"></div>
                    </div>
                </div>
            </body>
            </html>

            <script src="~/Scripts/angular.js"></script>
            <script src="~/Scripts/angular-resource.js"></script>
            <script src="~/Scripts/angular-route.js"></script>
            <script src="~/Scripts/LegalScripts/legalServices.js"></script>

            <script>

                //Name the module
                var app = angular.module('employeeInfoApp', ['ngResource', 'legalServices', 'ngRoute']);

                app.config(['$routeProvider', function ($routeProvider) {
                $routeProvider.
                        when('/addemp', {
                            templateUrl: 'AddEmp.cshtml',
                            controller: 'EmployeeInfoController'         
                        }).
                        otherwise({
                            redirectTo: '/home'
                        });
                    }]);

                //Add the controller
                app.controller("employeeCtl", ["$scope", "EmployeeInfo", function ($scope, EmployeeInfo) {

                    $scope.EmployeeInfoes = EmployeeInfo.query();

                    $scope.SelectedEmployeeInfo = {};

                }]);


            </script>

Answer 1

你不能直接从你需要从MVC控制器动作加载它的路径加载.cshtml文件，因为它包含应该使用MVC Razor视图引擎解析的razor同样假设你有Employee控制器，其中包含将使用AddEmp

间接返回视图的操作c#

<强> App.js

  $routeProvider.
  when('/addemp', {
        templateUrl: 'Employee/AddEmp', //you need to call controller action
        controller: 'EmployeeInfoController'         
  }).

Answer 2

这里的问题是我使用的是Angular 1.4（visual studio nuget包管理器会自动安装。）

Angular 1.4中的路由已更改为适应多个视图（和组件），但旧的ng-view指令不起作用。请参阅1.4中的“路由简介”

http://www.codeproject.com/Articles/891436/Introduction-to-Basics-of-Angular-newRouter

我的快速修复解决方案是将Angular 1.3脚本库下载到我的项目中。然后我的部分观点运作良好。

ng-view未将部分视图加载到index.cshtml中

2 个答案: