Как получить бритву в HTML от angularjs с помощью ngRoute

Question

Я использую библиотеку ocLazyLoad, чтобы лениво загружать угловые файлы 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', чтобы метод действия Index в контроллере Home выполнялся, и бритва отображала указанную страницу.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 сделает свою работу.

Возможно ли это сделать?

Answer 1

Да, это возможно сделать. Все, что вам нужно сделать, это запомнить основы. 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 и выведет его.

Обычно это может привести к путанице, поскольку не весь HTML, сгенерированный Razor, будет совместим с угловым способом обработки моделей. Но это может помочь вам достичь некоторых полезных вещей, таких как использование объединения и минификации из ASP.NET. Или добавив частичное представление прямо в ваш HTML.

В представлении Razor вы можете добавить файлы JS следующим образом:

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

Надеюсь, поможет!