django+AngularJS+Bootstrap配置

来源：互联网发布：linux 查询ip 编辑：程序博客网时间：2024/06/04 18:38

上一篇已经初步搭起来了django，这里我们将前端所用到的静态库配置一下

首先，下载angularJS和bootstrap源码，放在如下路径下：

{your_app}/static/scripts

{your_app}是你的django app的目录，我这里是：/home/zhubao/Code/django_code/hello/app，目录结构参考上一篇《django版hello world》

然后，我们需要配置一下settings.py，修改STATIC_URL变量为 /WebApi/

这个根据自己的配置修改，当然，也可以用默认的

配置完后，我们就可以写静态文件了

先看下我的static下的目录结构：

我们重点关注index.html和controller.js，代码如下：

index.html

<!DOCTYPE html><html>    <head>        <link href="/WebApi/scripts/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />        <script type="text/javascript" src="/WebApi/scripts/angular/angular.min.js"></script>        <script type="text/javascript" src="/WebApi/controller/controller.js"></script>        <title>hello</title>    </head>    <body ng-app="myApp" ng-controller="myCtrl">        <h2>hello world!</h2>                <input type="text" ng-model="hello" />        <p class="text-danger">我的名字: [[ hello ]]</p>    </body></html>

controller.js

var app = angular.module("myApp", []);app.config(    function($interpolateProvider) {        $interpolateProvider.startSymbol('[[');        $interpolateProvider.endSymbol(']]');    })      .config(['$httpProvider', function($httpProvider) {        $httpProvider.defaults.xsrfCookieName = 'csrftoken';        $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';}]);app.controller("myCtrl", function($scope) {$scope.hello = "zhubao";});

需要注意一点的是，django模板默认使用的是{{}}，AngularJS默认也是{{}}，两者冲突了，代码里app.config使改为[[]]，解决了冲突

我们访问访问一下页面：

AngularJS和Bootstrap都已生效，Jquery也同理。

结束！！！

0 0