0

我正在使用 ocLazyLoad 库来延迟加载 angular javascript/html 文件并将它们注入到我的模块中，如下所示：

    $routeProvider.when('/Home/Index', {
        templateUrl: '/app/Index.html',
        controller: 'IndexController',
        resolve: {
            deps: [
                '$ocLazyLoad', function ($ocLazyLoad) {
                    return $ocLazyLoad.load({}, {
                        name: 'mix',
                        files: [
                            '/app/IndexController.js'
                        ]
                    });
                }
            ]
        }
    });

通过这种方法，我从文件系统中获取静态 html 文件。但我想要的是设置 templateUrl:'/Home/Index' 所以 Home 控制器中的 Index 操作方法被执行，剃须刀渲染指定的 .cshtml 页面然后返回带有角度指令的 html。

这是我想做的。剃刀视图：

<p>
    @foreach (var item in new List<int> { 1, 2, 3, 4, 5 })
    {
        @item
    }
</p>

<div ng-controller="IndexController as vm">
    <p>{{vm.text}}</p>
    <p>{{3 + 3}}</p>
</div>

来自服务器的响应：

<p>12345</p>
<div ng-controller="IndexController as vm">
    <p>{{vm.text}}</p>
    <p>{{3 + 3}}</p>
</div>

连同这个 html，延迟加载的 IndexController.js 然后 angular 将完成它的工作。

有可能这样做吗？

4

1 回答 1

0

是的，可以这样做。您需要做的就是记住基础知识。除非您公开它，否则 Angular 对您的服务器端一无所知。

$routeProvider.when('/ng-Home/Index', { //It can't be the same as the Action URL since it won't work the way you want it to.
    templateUrl: '/Home/Index', //Add the html of your static page into the razor view.
    controller: 'IndexController'
    }
});

在内部，Angular 将从服务器端调用纯 HTML 文件或从服务器输出的 HTML（HTML 响应，而不是 JSON 或 XML）。Angular 不在乎它是文件还是响应 HTML。路由将简单地获取响应 HTML 并输出它。

通常这可能会变得混乱，因为并非所有 Razor 生成的 HTML 都符合处理模型的角度方式。但它可以帮助您实现一些方便的事情，例如使用 ASP.NET 中的捆绑和缩小。或者直接将部分视图添加到您的 HTML 中。

在 Razor 视图中，您可以通过以下方式添加 JS 文件：

@Scripts.Render("~/Path/To/Script")

希望能帮助到你！

于 2016-09-23T22:47:05.383 回答