将 Django URL 与 AngularJs routeProvider 一起使用

Posted 2023-02-24

技术标签:

【中文标题】将 Django URL 与 AngularJs routeProvider 一起使用【英文标题】：Using Django URLs with AngularJs routeProvider 【发布时间】：2017-06-23 00:20:11 【问题描述】：

对于一个项目，我在后端使用 Django，在前端使用 AngularJs。

基本上，我想要的是仅当 url 以 projectkeeper/ 开头时运行 Angular 应用程序。

换句话说，假设我的网站是 example.com。我希望 Angular 应用程序针对 URL example.com/projectkeeper/dashboard/、example.com/projectkeeper/projects/ 等运行，但不在 example.com/about/ 上运行。

希望我已经说清楚了。无论如何，为了做到这一点，我正在使用我的代码执行以下操作：

urls.py

urlpatterns = [
    url(r'^projectkeeper/$', TemplateView.as_view(template_name='base.html')),
]

在模板 base.html 中，我显然指的是我的 Angular 应用程序。对于角度路由，我做了以下工作：

myapp.config(['$routeProvider', function($routeProvider) 
    $routeProvider
        .when('/dashboard/', 
            title: 'Dashboard',
            controller : 'DashboardController',
            templateUrl : 'static/app_partials/projectkeeper/dashboard.html'
        )
        .otherwise( redirectTo : '/' );
]);

因此，理想情况下，我认为转到 example.com/projectkeeper/#/dashboard/ 会从我的 Angular 应用程序运行 DashboardController。但是，情况并非如此，我只得到一个空页面，这意味着路由不正确。

有什么解决办法吗？正如我之前所说，我希望 仅在 url 以 projectkeeper/ 开头时运行 Angular 应用程序。

【问题讨论】：

你的静态文件定义正确吗？是的，静态文件可以正常工作。控制器已正确加载。 URL 模式是问题所在。我认为您也应该检查浏览器的控制台是否有错误。最好追溯哪里出了问题能否请您发布base.html 代码？这就是问题所在。我已经在多个项目中做到了这一点，而且我的工作方式完全符合您的需要。 【参考方案1】：

试试这个 angularJS 的 ui 路由器 https://github.com/angular-ui/ui-router

这将对您当前面临的嵌套视图和问题更有帮助。

【讨论】：

【参考方案2】：

我认为你已经很接近了，几乎没有什么东西可以使它起作用（老实说，这让人难以理解，我希望我没有忘记任何事情）。

首先，您的 URL 顺序很重要，如果您在 Angular 路由之前定义某些内容，它们将首先呈现，因此请使用您的 django 应用程序的 url before Angular 路由。

然后，如果您想让 Angular 了解您需要在标题中定义 <base> 标记的子路径。在你的情况下：

<base href="/projectkeeper/" />

（您也可以在所有where 函数中定义projectkeeperit）。

对于网址，我会将正则表达式更改为：r'^projectkeeper/.*'。同样，应该是您的网址列表中的最后一个。

您会遇到其他问题，例如、身份验证问题，但这些问题将留待不同的答案 :)

【讨论】：