Question

如何处理AngularJS中的虚拟路径？

例如，在我的测试环境中，我的基本网址是http://localhost/AppName/，在生产环境中，根目录变为http://www.mysite.com/。

所以在开发中，$http.get会说http://localhost/AppName/Controller/Action，但是在prod中该路径不存在，它必须是http://www.mysite.com/Controller/Action。

如何处理$http来电，以及使用$httpBackend模拟后端时的单元测试？

我在_Layout.cshtml（使用ASP.NET MVC）中尝试了这个但是在单元测试中不起作用：

<script>
    (function () {
        'use strict';

        var app = angular.module('cs').value('urlHelper', {
            getUrl: function (url) {
                var basePath = '@VirtualPathUtility.ToAbsolute("~/")';

                return basePath + url;
            }
        });
    }());
</script>

也尝试过：

(function () {
    'use strict';

    var app = angular.module('cs', []);

    app.run(['$rootScope', function ($rootScope) {
        $rootScope.basePath = '/';
    }]);

}());

任何想法都不必担心在部署到prod之前在某处切换根路径？

Answer 1

basePath可以是一个值，urlHelper依赖于basePath的服务。

在服务器端生成的页面中，您的服务器将注入VirtualPathUtility找到的任何值，在您的测试中，您将手动注入适合您的任何内容。

剃刀：

<script>
    angular.module('cs').value('basePath', '@VirtualPathUtility.ToAbsolute("~/")');
</script>

其他js文件：

angular.module('cs').factory('urlHelper', function (basePath) {
    return {
        getUrl: function (url) {
            return basePath + url;
        }
    };
});

试验：

var urlHelper;

beforeEach(function() {

    module(function($provide) {
        $provide.value('basePath', '/');
    });

    inject(function($injector) {
        urlHelper = $injector.get('urlHelper');
    });
});

AngularJS和虚拟路径

1 个答案: