Как использовать угловую директиву в приложении ASP.NET MVC?

Question

У меня есть приложение ASP.NET MVC с большим количеством областей и моделей, представлений и контроллеров внутри них. У меня есть небольшой калькулятор, который я хочу написать в Angular, потому что для меня будет проще, как разработчик, и кулер для пользователя (вместо использования только jQuery).

Дело в том, что я хочу иметь этот калькулятор на разных представлениях в некоторых своих областях в приложении MVC. Лучшее решение, которое я мог бы придумать, это сделать директиву Angular, а затем использовать ее во всех представлениях, которые мне нужны. Мой вопрос заключается в том, будет ли это работать, и должен ли я сделать другой модуль Angular для каждого представления, которое будет использовать директиву.

Любые лучшие решения и предложения приветствуются.

Answer 1

Пример из угловых документаций: https://docs.angularjs.org/tutorial/step_07

phonecatApp.config(['$routeProvider', 
    function($routeProvider) { 
    $routeProvider. 
     when('/phones', { 
     templateUrl: 'partials/phone-list.html', 
     controller: 'PhoneListCtrl' 
     }). 
     when('/phones/:phoneId', { 
     templateUrl: 'partials/phone-detail.html', 
     controller: 'PhoneDetailCtrl' 
     }). 
     otherwise({ 
     redirectTo: '/phones' 
     }); 
    }]); 

вы можете сконфигурировать столько controlles, что вам нравится на страницу (HTML). и каждый htm будет включать вашу специальную директиву калькулятора.

Все контроллеры могут быть зарегистрированы в одном модуле:

вар phonecatControllers = angular.module ('phonecatControllers', []);

phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http', 
    function ($scope, $http) { 
    $http.get('phones/phones.json').success(function(data) { 
     $scope.phones = data; 
    }); 

    $scope.orderProp = 'age'; 
    }]); 

phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', 
    function($scope, $routeParams) { 
    $scope.phoneId = $routeParams.phoneId; 
    }]); 

Answer 2

Вот мой вопрос: вам не нужен отдельный модуль для каждого вида. Если вы только использовать это, чтобы обеспечить вашу директиву калькулятор, то вы можете просто сделать что-то вроде:

angular.module('calculator', []) 
    .directive('onscreenCalculator', function() { ... }); 

Я не знаю, если вы используете частичный вид, но если вы это может быть проблематичным, если вы используете ng-app = "calculator" директива на уровне представления. Лично я бы поместил его в ваш _Layout.cshtml, а затем вы знаете у вас будет только один экземпляр.

Ваша самая большая проблема (на мой взгляд) заключается в том, как получить результат вычисления обратно в ваше мнение, так как вы действительно не пишете приложение «Угловое», а просто используете директиву. Тем не менее, я уверен, что это может быть сделано с некоторыми играми.