さらっと AngularJS1.2.0 でクライアントサイド、Python3 と Django1.6 で api サーバ を試してみるメモ

(Python==3.3, Django==1.6, djangorestframework==2.3.8, angular1.2.0, generator-angular0.6.0-rc.1)

Django で apiサーバ作成

virtualenv

mkvirtualenv booklist_sample --python /opt/local/bin/python3.3

インストール

$ pip install django
$ pip install djangorestframework

プロジェクト作成と・アプリ作成

$ django-admin.py startproject core
$ mv core booklist_api
$ cd booklist_api
$ python manage.py startapp books

モデル作成

books/models.py
※ ここ title と author にすればよかった...

-# Create your models here.
+class Book(models.Model):
+    name = models.CharField(max_length=30)
+    comment = models.CharField(max_length=144)
+
+    def __unicode__(self):
+        return self.name

設定

core/settings.py

 INSTALLED_APPS = (
 :
+    'rest_framework',
+    'books',
 )
:
REST_FRAMEWORK = {
    'PAGINATE_BY': 5
}

serializers.py 追加

books/serializers.py

from rest_framework import serializers
from books.models import Book


class BookSerealizer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = Book
        fields = ('name', 'comment')

ビュー

books/views.py

-from django.shortcuts import render
+from books.models import Book
+from rest_framework import viewsets
 
-# Create your views here.
+from books.serializers import BookSerealizer
+
+class BookViewSet(viewsets.ModelViewSet):
+    queryset = Book.objects.all()
+    serializer_class = BookSerealizer

urls.py

core/urls.py

-urlpatterns = patterns('',
+from rest_framework import routers
+from books.views import BookViewSet
+
+router = routers.DefaultRouter()
+router.register(r'books', BookViewSet)
+
+urlpatterns = patterns(
+    '',
     # Examples:
     # url(r'^$', 'core.views.home', name='home'),
     # url(r'^blog/', include('blog.urls')),
 
     url(r'^admin/', include(admin.site.urls)),
+    url(r'^api/', include(router.urls)),
 )

admin.py

books/admin.py

 from django.contrib import admin
+from books.models import Book
 
-# Register your models here.
+admin.site.register(Book)

syncdb

$ python manage.py syncdb

runserver

$ python manage.py runserver

管理画面でダーミーデータ作成

• http://localhost:8000/admin/

AngularjS でクライアントサイド作成

yeoman でスケルトン作成

$ mkdir booklist
$ booklist
$ yo angular

view修正

app/views/main.html

<div class="main">
    <div class="jumbotron">
	    <h1>Book List</h1>
	    <p class="lead">sample application for AngularJS</p>
    </div>

    <table class="table table-striped">
        <tbody>
            <tr ng-repeat="book in books | orderBy: 'name'">
                <td>{{ book.name }}</td>
                <td>{{ book.comment }}</td>
            </tr>
        </tbody>
    </table>
</div>

インストール

$ npm install -D grunt-connect-proxy

grunt task に proxy の設定

Gruntfile.js

+ var proxySnippet = require('grunt-connect-proxy/lib/utils').proxyRequest;
+
:
+       proxies: [{
+         context: '/api',
+         host: 'localhost',
+         port: '8000',
+         https: false,
+         changeOrigin: false
+       }],
       livereload: {
         options: {
+           middleware: function (connect, options) {
+             var middlewares = [];
+             options.base.forEach(function(base) {
+               // Serve static files.
+               middlewares.push(connect.static(base));
+             });
+             middlewares.push(proxySnippet);
+             return middlewares;
+           },
:
+      'configureProxies',

コントローラ

app/scripts/controllers/main.js

'use strict';

angular.module('booklistApp')
  .controller('MainCtrl', function ($scope, $http) {
    $scope.books = [];

    $http.get('api/books/').success(function(json) {
      $scope.books = json.results;
    });
  });

開発用サーバ起動

$ grunt server

確認

• http://localhost:9000/

こんな手順でやった気がする