2017-04-01から1ヶ月間の記事一覧
参考サイト 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…
参考サイト 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…
参考サイト 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>…
参考サイト 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…
参考サイト 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…
参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ https://angular.io/docs/ts/latest/guide/pipes.html Pipes & Custom Pipes Pipesを使ってみる。機能みるために、todayDateという変数を定義しておく。 ... todayDate; // vid…
参考サイト 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…
参考サイト 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…
参考サイト 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…
参考サイト 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…
参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ Getting Started with Angular v4 $ng new srvupコマンドを実行すると、新しいangularのproject、srvupが作成される。angularに必要なnode.jsのpackageをinstallするので、ちょ…
参考サイト 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…
参考サイト 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…
参考サイト https://www.codingforentrepreneurs.com/projects/getting-started-typescript/ Typescript - Classes - Part 3 main.tsをsrc/内に移動させる。 archiveというフォルダを作成して、不要になったmain.tsなどを移動させておく。(なぜ削除しないか…
参考サイト 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…
Typescript - Classes - Part 1 参考サイト https://www.codingforentrepreneurs.com/projects/getting-started-typescript/ 概要 typescriptのclassをゼロから作ってみる。 class SweetSweetBasil { constructor(name:string){ // constructorは、インスタ…
Typescript for Angular 参考サイト https://www.codingforentrepreneurs.com/projects/getting-started-typescript/ https://www.codingforentrepreneurs.com/blog/typescript-setup-guide/ install node.js 公式ホームページからinstallする npmをアップグ…
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 …
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>…
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 …
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…
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 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 angular.io Setup Setup for local development - ts - GUIDE quick startに従って、setupをしてみる。プロジェクトフォルダは適当に名前をつけておく。 $ git clone https://github.com/angular/quickstart.g…