Crie um aplicativo com o framework django rest (drf) que usa angular.js no frontend. Este aplicativo será desenvolvido a partir do projeto django-drf-starter . Se você está curioso sobre como o projeto django-drf-starter-project foi construído, você pode ver o tutorial aqui .
O código-fonte completo está aqui
Crie o projeto
$ git clone git@github.com:jasonshark/django-drf-starter-project.git
$ mv django-drf-starter-project django-drf-angular-starter-project
$ cd django-drf-angular-starter-projectIsso baixa o código da parte um e renomeia o projeto para o nome angular.
Configurar ambiente virtual
$ source ~/.bash_profile
$ mkvirtualenv django-drf-angular-starter-project # OR $ workon django-drf-angular-starter-project if you've already created the virtual environment
$ lsvirtualenv
$ pip install -r requirements.txtNo meu computador, tenho que obter o .bash_profile. Eu sou preguiçoso e não consertei isso. Esperamos que você tenha o virtualenvwrapper configurado corretamente em sua própria máquina. A última etapa instala o django e o django rest framework de requirements.txt.
Modificar vista
Nas visualizações da última vez, usamos modelos django, agora queremos angular para lidar com o front end. Django fornecerá um template ( ). O resto do nosso código de front-end será armazenado em . O Angular acessará isso usando o ui-roteador .jsframework/templates/jsframework/base.htmljsframework/static/templates
Envie o modelo básico
jsframework / views.py:
“ `
from django.shortcuts import render
def index (request):
return render (request, ‘jsframework / base.html’)
“ `
Em seguida, em base.html, modifique-o para carregar imagens angulares e usar visualizações angulares. Exclua as tags do modelo django, adicione:
<html ng-app='drf-angular'>
...
<div ui-view></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>Escreva angular
Crie um aplicativo, rotas e um controlador:
var app = angular.module('drf-angular', [
'ui.router'
]);
app.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('home', {
url: '/',
templateUrl: '/static/templates/home.html',
controller: 'MainCtrl'
});
$urlRouterProvider.otherwise('/');
});
app.controller('MainCtrl', function($scope){
$scope.test = "I come from the angularz";
});Todos os nossos modelos angulares estarão presentes jsframework/static/templates. Faça referência a eles usando o caminho especificado em templateUrl.
Todo nosso roteiro terá /#/. Também não inventamos nenhum modelo ou serializador, mas configuramos um servidor e gerenciamos angular no frontend.
O código-fonte completo está aqui