Question

我有一个Django Web应用程序，为Angular JS客户端应用程序提供服务。

我的网址树如下所示：

 > /
     > /admin/
     > /login/
     > /logout/
     > /static/
         > /admin/

我的Angular应用程序的基本网址为/admin/，其静态内容位于/static/admin/(js|css|views)。

这是路由提供商的配置：

app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/admin/', {
        controller: 'IndexController',
        templateUrl: '/static/admin/views/index.html'
    }).otherwise({ redirectTo: '/admin/' });
});

app.config(['$locationProvider', function($locationProvider) {
    $locationProvider.html5Mode(true);
});

我在这里遇到一些问题。第一个问题是URL灵活性。如果我决定将基本网址移至/angularadmin/之类的内容，该怎么办？我必须重写很多JavaScript和很多<a>链接。第二个问题是什么时候我提供了/logout/的链接，此链接点击otherwise子句并重定向回/admin/。

如何告诉Angular通过/logout/的链接，如何在这里更灵活地配置基本URL？

Answer 1

您应始终在配置中使用基本路径，然后在需要指定URL时使用该路径。

以下是一个例子：

// Define the configuration
app.constant('config', {
    serviceRoot: '/api/',
    staticRoot: '/static/admin/',
    appRoot: '/admin/'
});

//Use the configuration
app.config(['$routeProvider', 'config', function ($routeProvider, config) {
    $routeProvider
        .when(config.appRoot, {
            controller: 'IndexController',
            templateUrl: config.staticRoot + 'views/index.html'
        })
        .otherwise({ redirectTo: config.appRoot });
}]);

<强>更新

如评论中所述，为了打开外部链接，请使用target="_self"。

如果您需要views / templates中的配置值，可以在$rootScope中注入配置对象并从视图中访问它：

// We add the configuration as part of the root scope
app.run(['$rootScope', 'config', function($rootScope, config) {
    $rootScope.appConfig = config;
}]);

然后你可以在这样的视图中使用它：

<a ng-href="{{appConfig.appRoot}}someroute/">...</a>

Answer 2

步骤1.逐步更新角度应用程序中的基本标记，这样，如果移动角度应用程序，则无需更改代码。

index.html中的

- ＆lt; script src ='setbase.js'/＆gt;

var baseTag = document.createElement('base');
var base = document.location.href;

//console.log('Detecting Document Base: ',base);

// remove query parameters and anchors
base = base.replace(/\#.*/,'').replace(/\?.*/,'');
//console.log('    Removing Anchors and Query Parameters: ',base);

// remove documents, leaving only path
base = base.replace(/\/?[^\/]]*$/,'/');
//console.log('    Removing Documents: ',base);

baseTag.href = base;
document.head.appendChild(baseTag);

document.scripts[document.scripts.length-1].remove();

步骤2：设置angular以在html5模式下使用哈希标记，以便重写锚链接。包含此模块，然后在您自己的模块中将此模块配置为依赖项。

(function(window,angular)
{
    'use strict';

    var module;

    module = angular.module('aLinkRewrite',[]);
    module.config
    (
        [
            '$provide','$locationProvider',
            function (p,lp)
            {                                       // (decorator is undocumented... *sigh*)
                p.decorator(                        // decorate the
                    '$sniffer',                     // sniffer service
                    [
                        '$delegate',                // obtain a delegate object to modify the sniffer
                        function(d)                 // which we will call 'd'
                        {
                            d.history = false;      // tell angular that we don't have html5 history capabilities
                            return d;
                        }
                    ]
                );

                lp.html5Mode(true);                 // turn on html5 mode link rewriting
            }
        ]
    ).run(['$location',function($location){}]);     // inject $location into the browser
})(window,window.angular);

从现在开始，所有角度的路线和链接都不包括您的基地。如果angular位于'/admin/index.html'，那么'/ admin /'的路线现在只是'/'

html中的所有角度链接都可以引用为＆lt; a href =“whatever”＆gt;，由于基本标记，它们将定向到admin / whatever，并在浏览器栏中显示为admin /＃ /不管

因为您的静态内容不在您的基础之内，所以您继续将其链接为/ static / whatever。您的登录和注销链接也是如此。

灵活的路由和“传递”某些URL？

2 个答案: