您的位置：首页 > Web前端 > AngularJS

django+AngularJS+Bootstrap配置

2017-03-13 16:13 337 查看

上一篇已经初步搭起来了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也同理。

结束！！！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航