Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

Angular2 The Tour of Heroes tutorial に挑戦してみる 6

ROUTING 後半戦 https://angular.io/docs/ts/latest/tutorial/toh-pt5.html Add HeroService.getHero() getHero(id: number): Promise<Hero> { // getHero(id) で、idを引数に取る関数 // idの型はnumber, getHeroのclassは、Hero. return this.getHeroes() // get</hero>…

Angular2 The Tour of Heroes tutorial に挑戦してみる 5

ROUTING 前半戦 https://angular.io/docs/ts/latest/tutorial/toh-pt5.html Add the Angular component router and learn to navigate among the views. Add a Dashboard view. ダッシュボードビューの作成 Add the ability to navigate between the Heroes …

Angular2 The Tour of Heroes tutorial に挑戦してみる 4

SERVICES https://angular.io/docs/ts/latest/tutorial/toh-pt4.html Creating a hero service In this page, you’ll move the hero data acquisition business to a single service that provides the data and share that service with all components tha…

Angular2 The Tour of Heroes tutorial に挑戦してみる 3

MULTIPLE COMPONENTS https://angular.io/docs/ts/latest/tutorial/toh-pt3.html 複数のcomponentsを扱う場合の話か。 Make a hero detail component Add a file named hero-detai.component.ts to the app/ folder. This file will hold the new HeroDetail…

Angular2 The Tour of Heroes tutorial に挑戦してみる 2

Angular2 The Tour of Heroes tutorial に挑戦してみる 2 MASTER/DETAIL https://angular.io/docs/ts/latest/tutorial/toh-pt2.html Keep the app transpiling and running $ npm start Displaying heroes Create Heroes Create an array of ten heroes. con…

The Tour of Heroes tutorial に挑戦してみる 1

The Tour of Heroes tutorial に挑戦してみる 1 angular.io Setup Setup for local development - ts - GUIDE quick startに従って、setupをしてみる。プロジェクトフォルダは適当に名前をつけておく。 $ git clone https://github.com/angular/quickstart.g…

CSSとかのコツ

CSSって、ちゃんと勉強してないので、いまいち理解できてない。他の人が作ったhtmlファイルとか、cssファイルは読解が難しい気がする。 CSSの場合、classが重要なので、classをまず確認する。 そのclassが、どういう仕様になっているのか、コードの記載があ…

AngularJS1 + Django REST Frameworkに再挑戦 その12 Comment Reply Directive

概要 AngularJS1 + Django REST Frameworkに再挑戦 その12 Comment Reply Directive 参考動画 Django + AngularJS | Coding For Entrepreneurs Reply to Comments part1 js/app/comment/comment.directive.js を作成する。 'use strict'; angular.module('co…

AngularJS1 + Django REST Frameworkに再挑戦 その11 Reply to Comments

概要 AngularJS1 + Django REST Frameworkに再挑戦 その11 Reply to Comments 参考動画 Django + AngularJS | Coding For Entrepreneurs Reply to Comments コメントのreplyとかを表示したい。まずはcommentのcontextの内容を確認する。 <ul ng-show='comments.length > 0'> <li ng-repeat='comment in comments | filter: query'> {{ comment.conten</li></ul>…

AngularJS1 + Django REST Frameworkに再挑戦 その10 ngResource Create & Delete

概要 AngularJS1 + Django REST Frameworkに再挑戦 その10 ngResource Create & Delete 参考動画 Django + AngularJS | Coding For Entrepreneurs ngResource Create & Delete ngResource を使って、commentをsave, deleteする機能を実装する。 blog-detail.…

AngularJS1 + Django REST Frameworkに再挑戦 その9 Comment ngResource

概要 AngularJS1 + Django REST Frameworkに再挑戦 その9 Comment ngResource 参考動画 Django + AngularJS | Coding For Entrepreneurs Comment ngResource ngResource は、$httpを含んでおり、サーバとHTTP通信でデータのやりとりをするものなのかな。 cor…

AngularJS1 + Django REST Frameworkに再挑戦 その8 Comment ListAPI View

概要 AngularJS1 + Django REST Frameworkに再挑戦 その8 Comment ListAPI View 参考動画 Django + AngularJS | Coding For Entrepreneurs Comment ListAPI View blog-detai.component.jsのaddReplyを少し修正する。 $scope.addReply = function() { console…

AngularJS1 + Django REST Frameworkに再挑戦 その7 Comment Create API Endpoint & Serializer Context

概要 AngularJS1 + Django REST Frameworkに再挑戦 その7 Comment Create API Endpoint & Serializer Context 参考動画 Django + AngularJS | Coding For Entrepreneurs Comment Create API Endpoint & Serializer Context http://127.0.0.1:8000/api/commen…

AngularJS1 + Django REST Frameworkに再挑戦 その6 Create Comment in Backend with $http

概要 AngularJS1 + Django REST Frameworkに再挑戦 その6 Create Comment in Backend with $http 参考動画 Django + AngularJS | Coding For Entrepreneurs Create Comment in Backend with $http $httpを使って、バックエンドで、コメント作成機能を実装す…

AngularJS1 + Django REST Frameworkに再挑戦 その6 ngCookies for JWT Token

概要 AngularJS1 + Django REST Frameworkに再挑戦 その6 ngCookies for JWT Token 参考動画 Django + AngularJS | Coding For Entrepreneurs ngCookies for JWT Token 前回の続きで、今回は、JWT によって発行されたtokenを使って、angularJSからのログイン…

AngularJS1 + Django REST Frameworkに再挑戦 その5 Login with Angular & Django Rest Framework

概要 AngularJS1 + Django REST Frameworkに再挑戦 その5 Login with Angular & Django Rest Framework 参考動画 Django + AngularJS | Coding For Entrepreneurs Login with Angular & Django Rest Framework Json Web TokenというDRFの仕組みを利用して、…

AngularJS1 + Django REST Frameworkに再挑戦 その4 Backend API Serializer Updates

概要 AngularJS1 + Django REST Frameworkに再挑戦 その4 Backend API Serializer Updates Actions 参考動画 Django + AngularJS | Coding For Entrepreneurs Backend API Serializer Updates 前回は、BackendのDjango REST Frameworkからうまくslugのjsonデ…

AngularJS1 + Django REST Frameworkに再挑戦 その3 Post Objects API Integration

概要 AngularJS1 + Django REST Frameworkに再挑戦 その3 Post Objects API Integration 参考動画 Django + AngularJS | Coding For Entrepreneurs Post Objects API Integration http://127.0.0.1:8000/api/posts/にアクセスすると、djangoのデータベースに…

AngularJS1 + Django REST Frameworkに再挑戦 その2 Angular Templates in Django Part 1

概要 AngularJS1 + Django REST Frameworkに再挑戦 その2 Angular Templates in Django Part 1 参考動画 Django + AngularJS | Coding For Entrepreneurs Angular Templates in Django Part 1 src/ang/init.py と、src/ang/views.pyを作成する。 views.pyは…

AngularJS1 + Django REST Frameworkに再挑戦 その1Django & AngularJS Project

概要 AngularJS1 + Django REST Frameworkに再挑戦 その1Django & AngularJS Project 参考動画 Django + AngularJS | Coding For Entrepreneurs Git & Django Project 以下の動画に従って、django projectをgit cloneする Git & Django Project | Django + …

AngularJS1.5に再挑戦 その19 UI Bootstrap & Typeahead

概要 AngularJS1.5に再挑戦 その19 UI Bootstrap & Typeahead 参考動画・参考サイト Coding for Entrepreneurs AngularJS — Superheroic JavaScript MVW Framework UI Bootstrap & Typeahead UI Bootstrapという、angularJS用のbootstrapがあるらしい!!こ…

AngularJS1.5に再挑戦 その18 Navigation Directive

概要 AngularJS1.5に再挑戦 その18 Navigation Directive 参考動画・参考サイト Coding for Entrepreneurs AngularJS — Superheroic JavaScript MVW Framework Navigation Directive utils/try-nav/try-nav.module.jsと、try-nav.directive.jsを作成する。 /…

AngularJS1.5に再挑戦 その17 Order By & Images

概要 AngularJS1.5に再挑戦 その17 Order By & Images 参考動画・参考サイト Coding for Entrepreneurs AngularJS — Superheroic JavaScript MVW Framework Order By & Images jsondataに、imageのURLを追記する。 [ {"title": "Ne Title", "id":1, "descrip…

AngularJS1.5に再挑戦 その16 Pagination

概要 AngularJS1.5に再挑戦 その16 Pagination 参考動画・参考サイト Coding for Entrepreneurs AngularJS — Superheroic JavaScript MVW Framework Pagination github上のコードを拝借する。michaelbromley/angularUtilsというリポジトリにある。 https://g…

AngularJS1.5に再挑戦 その15 Angular Columns

概要 AngularJS1.5に再挑戦 その15 Angular Columns 参考動画・参考サイト Coding for Entrepreneurs AngularJS — Superheroic JavaScript MVW Framework Angular Columns angular columsを作るには、angularのquery機能などを使う。 'use strict'; angular.…

AngularJS1.5に再挑戦 その14 Bootstrap & CSS

概要 AngularJS1.5に再挑戦 その14 Bootstrap & CSS 参考動画・参考サイト Coding for Entrepreneurs AngularJS — Superheroic JavaScript MVW Framework Bootstrap & CSS BootstrapのCDNバージョンを利用する。index.htmlに読み込ませる。

AngularJS1.5に再挑戦 その13 Confirm Comment Delete

概要 AngularJS1.5に再挑戦 その13 Confirm Comment Delete 参考動画・参考サイト Coding for Entrepreneurs AngularJS — Superheroic JavaScript MVW Framework Confirm Comment Delete delete機能をつける。まずは簡単なものをblog-detail.components.jsに…

AngularJS1.5に再挑戦 その12 Forms and ngSubmit

概要 AngularJS1.5に再挑戦 その12 Forms and ngSubmit 参考動画・参考サイト Coding for Entrepreneurs AngularJS — Superheroic JavaScript MVW Framework Forms and ngSubmit json/posts.jsonにコメント項目を追記する。 [ {"title": "Ne Title", "id":1,…

AngularJS1.5に再挑戦 その11 ngClick & confirmClick Directives

概要 AngularJS1.5に再挑戦 その11 ngClick & confirmClick Directives 参考動画・参考サイト Coding for Entrepreneurs AngularJS — Superheroic JavaScript MVW Framework ngClick & confirmClick Directives ngClickを使ってみる。ngClickの詳しい解説は…

AngularJS1.5に再挑戦 その10 Custom Angular Directive for Confirmed Click

概要 AngularJS1.5に再挑戦 その10 Custon Angular Directive for Confirmed Click 参考動画・参考サイト Coding for Entrepreneurs AngularJS — Superheroic JavaScript MVW Framework Custon Angular Directive for Confirmed Click 公式サイトはこちらを…

AngularJS1.5に再挑戦 その9 ng-resource for mapping to a Restful API

概要 AngularJS1.5に再挑戦 その9 ng-resource for mapping to a Restful API 参考動画・参考サイト Coding for Entrepreneurs AngularJS — Superheroic JavaScript MVW Framework ng-resource for mapping to a Restful API coreフォルダ、postフォルダ、po…

AngularJS1.5に再挑戦 その8 HTTP Request in Angular - $http

概要 AngularJS1.5に再挑戦 その8 HTTP Request in Angular - $http 参考動画・参考サイト Coding for Entrepreneurs AngularJS — Superheroic JavaScript MVW Framework AngularJS1.5に再挑戦 その8 HTTP Request in Angular - $http jsonフォルダを作成す…

AngularJS1.5に再挑戦 その7 ForEach Loop in Angular JS Files

概要 AngularJS1.5に再挑戦 その7 ForEach Loop in Angular JS Files 参考動画・参考サイト Coding for Entrepreneurs AngularJS — Superheroic JavaScript MVW Framework ForEach Loop in Angular JS Files blog-detail.component.jsに追記する。 'use stri…

AngularJS1.5に再挑戦 その6 Detail View with Parameters

概要 AngularJS1.5に再挑戦 その6 Detail View with Parameters 参考動画・参考サイト Coding for Entrepreneurs AngularJS — Superheroic JavaScript MVW Framework Detail View with Parameters blog-detail componentを作成していく。まずは、app/blog-de…

AngularJS1.5に再挑戦 その5 URL Routing Part 1

概要 AngularJS1.5に再挑戦 その5 URL Routing Part 1 参考動画・参考サイト Coding for Entrepreneurs AngularJS — Superheroic JavaScript MVW Framework URL Routing Part 1 ngRouteを利用してみる。 AngularJS $ rackup で開発用サーバ立ち上げておく。 …

AngularJS1.5に再挑戦 その5 Local Webserver for AngularJS and Javascript Apps

概要 AngularJS1.5に再挑戦 その5 URL Routing Part 1 参考動画・参考サイト Coding for Entrepreneurs AngularJS — Superheroic JavaScript MVW Framework Local Webserver for AngularJS and Javascript Apps 以下の動画で、local webserverを立ち上げる必…

AngularJS1.5に再挑戦 その4 External Templates & Looping in a Template with ng-repeat

概要 AngularJS1.5に再挑戦 その4 External Templates 参考動画・参考サイト Coding for Entrepreneurs AngularJS — Superheroic JavaScript MVW Framework External Templates blog-list.component.jsを修正する。templateUrlという便利そうな機能を使って…

AngularJS1.5に再挑戦 その3 Create the Angular App & A Controller & Component

概要 AngularJS1.5に再挑戦 その3 Create the Angular App 参考動画・参考サイト Coding for Entrepreneurs AngularJS — Superheroic JavaScript MVW Framework Create the Angular App js/appフォルダを作成する。 js/appフォルダに、app.module.js, app.co…

AngularJS1.5に再挑戦 その2 Link Angular from Local & CDN と Binding & Conditionals

概要 AngularJS1.5に再挑戦 その2 Link Angular from Local & CDN 参考動画・参考サイト Coding for Entrepreneurs AngularJS — Superheroic JavaScript MVW Framework Link Angular from Local & CDN angular.min.jsをscriptとして読み込まれるようにindex.…

AngularJS1に再挑戦 その1 Download AngularJS

概要 AngularJS1.5に再挑戦 その1 Download AngularJS 参考動画・参考サイト Coding for Entrepreneurs AngularJS — Superheroic JavaScript MVW Framework Before we get started angularJS1をゲットする。(現時点で、最新バージョンが1.6になっとる。)an…

Githubでbranchを作成して、pull requestする方法

概要 今さならながら、githubのチーム開発に着手(^ ^;) 今回は、pull requestまでをやってみた。 forkからではなく、自分も編集できるリモートリポジトリを対象としている。 Github branchを作成->pull request ここでは、README.mdファイルを編集してpull r…

Django REST Frameworkに再挑戦 その24 Django Rest Framework JWT & Curl Tests

概要 Django REST Frameworkに再挑戦 その24 Django Rest Framework JWT & Curl Tests 参考サイト www.django-rest-framework.org www.codingforentrepreneurs.com Django Rest Framework JWT & Curl Tests Django Rest Framework JWTの公式ページをチェック…

Django REST Frameworkに再挑戦 その23 Django Rest Framework Settings

概要 Django REST Frameworkに再挑戦 その23 Django Rest Framework Settings 参考サイト www.django-rest-framework.org www.codingforentrepreneurs.com Django Rest Framework Settings Django Rest Frame WorkのSettingsについて見てみる。 Settings - D…

Django REST Frameworkに再挑戦 その22 User Detail Serailizer

概要 Django REST Frameworkに再挑戦 その22 User Detail Serailizer 参考サイト www.django-rest-framework.org www.codingforentrepreneurs.com User Detail Serailizer user detailのAPIViewを作成したい。そしてそれをcommentsのdetailViewに表示させた…

Django REST Frameworkに再挑戦 その21 UserLogin API Validation

概要 Django REST Frameworkに再挑戦 その21 UserLogin API Validation 参考サイト www.django-rest-framework.org www.codingforentrepreneurs.com UserLogin API Validation accounts/api/serializers.pyのUserLoginSerializer に、validationをつける。 c…

Django REST Frameworkに再挑戦 その20 Base APIView for User Login

概要 Django REST Frameworkに再挑戦 その20 Base APIView for User Login 参考サイト www.django-rest-framework.org www.codingforentrepreneurs.com Base APIView for User Login UserLoginSerializerというclassを新たに作成する。 class UserLoginSeria…

Django REST Frameworkに再挑戦 その19 Serializer Validation

概要 Django REST Frameworkに再挑戦 その19 Serializer Validation 参考サイト www.django-rest-framework.org www.codingforentrepreneurs.com Serializer Validation serializers.pyにコードを追記する。 ... class UserCreateSerializer(ModelSerializer…

Django REST Frameworkに再挑戦 その19 ModelSerializer Create Method

概要 Django REST Frameworkに再挑戦 その19 ModelSerializer Create Method 参考サイト www.django-rest-framework.org www.codingforentrepreneurs.com ModelSerializer Create Method account/api/serializers.py にコードを追記する。 class UserCreateS…

Django REST Frameworkに再挑戦 その17 User API Setup

概要 Django REST Frameworkに再挑戦 その17 User API Setup 参考サイト www.django-rest-framework.org www.codingforentrepreneurs.com User API Setup accounts/api/init.pyを作成する。 accounts/api/に、serializers.py, urls.py, views.pyを作成する。…

Django REST Frameworkに再挑戦 その17 Comment URLs & Post Get API Urls

概要 Django REST Frameworkに再挑戦 その17 Comment URLs & Post Get API Urls 参考サイト www.django-rest-framework.org www.codingforentrepreneurs.com Comment URLs & Post Get API Urls CommentListAPIViewのコードを修正する。 class CommentListAPI…