Djangoroidの奮闘記

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

Angular4入門_Vol.13

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ ngForm Basics navbarのformにngFormを使う準備をする。まず通常のformで実装するときのコードを確認する。search.component.htmlに追記する。 <form class="navbar-form navbar-left" method="get" action="/search/"> <div class="form-group"> </div></form>

Angular4入門_Vol.12

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ Two Way Data Binding search機能を実装する。$ ng g component searchでsearch componentを作成する。 search.component.tsの、selectorを、searchに変更する。 また、app.com…

Angular4入門_Vol.11

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ Http & Featured home.component.tsのimageのlinkもvideos.JSONデータに組み込む。 [ { "name": "テスト1", "slug": "item-1", "embed": "kzjMI00A1f8", "image": "assets/imag…

Angular4入門_Vol.10

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ Http Requests videoListの中身を、assets/json/videos.jsonファイルに移す。json形式に修正する。 [ { "name": "Item 1", "slug": "item-1", "embed": "kzjMI00A1f8" }, { "na…

Angular4入門_Vol.9

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ Angular Click Events home.component.html にclickeventを追記する。 <a class='' href="/videos/video-1" (click)='preventNormal($event)'> home.component.tsにpreventNormalを定義する。 import { Component, OnInit } from '@angular/core'; @</a>…

Angular4入門_Vol.8

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ http://getbootstrap.com/ https://www.npmjs.com/package/ngx-bootstrap http://valor-software.com/ngx-bootstrap/#/ ngx-bootstrap carousel home componentを作成する。$ng…

Angular4入門_Vol.7

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ http://getbootstrap.com/ https://www.npmjs.com/package/ngx-bootstrap http://valor-software.com/ngx-bootstrap/#/ Bootstrap for Angular - ngx-bootstrap ngx-bootstrap…

Angular4入門_Vol.6

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ https://angular.io/docs/ts/latest/guide/pipes.html Pipes & Custom Pipes Pipesを使ってみる。機能みるために、todayDateという変数を定義しておく。 ... todayDate; // vid…

Angular4入門_Vol.5

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ Safely Embed a Video youtubeのembed(埋め込み)linkを挿入してみる。 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'video-list', template…

Angular4入門_Vol.4

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ Dynamic Routing of Components video-detail.component.tsにコードを追記する。 import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angu…

Angular4入門_Vol.3

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ Mapping Urls with Router Moudle routermoduleを使って、urls のmappingをする。 まず、src/app/app.routing.tsファイルを作成する。 import { NgModule } from '@angular/cor…

Angular4入門_Vol.2

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ 6 - ngFor & ngIf ngForのテストをするために、video-list.component.tsを修正する。 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'video-lis…

Angular4入門_No.1

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ Getting Started with Angular v4 $ng new srvupコマンドを実行すると、新しいangularのproject、srvupが作成される。angularに必要なnode.jsのpackageをinstallするので、ちょ…

Angular4入門 ~setup編~

参考サイト https://www.codingforentrepreneurs.com/projects/setup-angular/how-setup-angular/?play=true https://www.codingforentrepreneurs.com/blog/angular-setup-guide/ How to Setup Angular Install Angluar CLI via npm: npm install -g @angula…

Angularのための、TypeScript入門 その5

参考サイト https://www.codingforentrepreneurs.com/projects/getting-started-typescript/ https://www.codingforentrepreneurs.com/blog/typescript-setup-guide/ Package.json - npm init package.jsonを作成する(djangoでいうところの、requirements.tx…

Angularのための、TypeScript入門 その4

参考サイト https://www.codingforentrepreneurs.com/projects/getting-started-typescript/ Typescript - Classes - Part 3 main.tsをsrc/内に移動させる。 archiveというフォルダを作成して、不要になったmain.tsなどを移動させておく。(なぜ削除しないか…

Angularのための、TypeScript入門 その3

参考サイト https://www.codingforentrepreneurs.com/projects/getting-started-typescript/ Declaring Variables - let vs var let と varの違い //letの場合 function f(input: boolean){ let a = 100 if (input) { let b = a + 100012 return b; } return…

Angularのための、TypeScript入門 その2

Typescript - Classes - Part 1 参考サイト https://www.codingforentrepreneurs.com/projects/getting-started-typescript/ 概要 typescriptのclassをゼロから作ってみる。 class SweetSweetBasil { constructor(name:string){ // constructorは、インスタ…

Angularのための、TypeScript入門 その1

Typescript for Angular 参考サイト https://www.codingforentrepreneurs.com/projects/getting-started-typescript/ https://www.codingforentrepreneurs.com/blog/typescript-setup-guide/ install node.js 公式ホームページからinstallする npmをアップグ…

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

HTTP https://angular.io/docs/ts/latest/tutorial/toh-pt6.html javascriptの基礎 http://qiita.com/ukiuni@github/items/5f3d8620187905aea3d4 Convert the service and components to use Angular’s HTTP service. Get the hero data from a server. Let …

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.…