Skip to content

Instantly share code, notes, and snippets.

@SnowMasaya

SnowMasaya/file0.txt

Last active October 10, 2017 03:09
Show Gist options
  • Save SnowMasaya/12c090581164987af5d2541bb590d050 to your computer and use it in GitHub Desktop.
Save SnowMasaya/12c090581164987af5d2541bb590d050 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
file0.txt
git clone https://github.com/angular/quickstart
cd quickstart
npm install
npm start
Raw
file1.js
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
Raw
file10.js
ビュー部分
<tr *ngFor='let b of books'>
<td>{{b.isbn}}</td>
</tr>
コンポーネント部分
books = [
{
isbn: '11111'
},
{
isbn: '2222'
},
];
Raw
file11.js
@Component({
selector: 'my-app',
template: `
<input type='button' (click)='back=!back' value='背景色'/>
<input type='button' (click)='fore=!fore' value='前景色'/>
<input type='button' (click)='space=!space' value='余白'/>
<div [ngStyle]='styles'>
<p>Writes </p>
</div>`
})
export class AppComponent {
back = false;
fore = false;
space = false;
get styles() {
return {
'background-color': this.back ? '#f00' : '',
'color': this.fore ? '#fff' : '#000',
'padding.px': this.space ? 15 : 5,
};
}
}
Raw
file12.html
<input id='mail' name='mail' type='email' [(ngModel)]='user.mail' required email #main='ngModel'>
Raw
file12.js
<input id='mail' name='mail' type='email' [(ngModel)]='user.mail' required email #main='ngModel'>
Raw
file13.js
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<from #myForm='ngForm'>
<ng-container *ngFor='let item of data; index as i'>
<label>
<input type='radio' name='animal'
[(ngModel)] = 'selected'
[value] = 'item.value' [checked]="selected == item.value"
(change)="show(i)">{{item.label}}
</label><nr />
</ng-container>
</form>
`})
export class AppComponent {
selected = 'hamster';
data = [
{ label: 'dog', value: 'dog_value'},
{ label: 'cat', value: 'cat_value'},
{ label: 'hamster', value: 'hamster_value'},
];
show(i: number) {
console.log('current label ' + this.data[i].label);
console.log('current value ' + this.selected);
}
}
Raw
file14.js
import { Component } from "@angular/core";
@Component({
selector: "my-app",
template: `
<form>
<textarea cols="70" rows="5" name="tweet"
[(ngModel)] = "tweet" (input)="selector()"></textarea>
<div [ngStyle]="myStyle">{{count}}</div>
</form>`
})
export class AppComponent {
max = 140;
tweet = "";
count = this.max;
myStyle = {color: "#00f", fontWeight: 'normal'};
selector() {
this.count = this.max - this.tweet.length;
if (this.count > 10){
this.myStyle = {color: "#00f", fontWeight: 'normal'};
} else if (this.count > 0){
this.myStyle = {color: "#f0f", fontWeight: 'normal'};
} else {
this.myStyle = {color: "#f00", fontWeight: 'bold'};
}
}
}
Raw
file15.js
@Input() item: Book;
Raw
file16.html
<detail-book [item]="selected"></detail-book>
Raw
file17.js
@Input() item :Book;
@Output() edited = new EventEmitter<Book>();
onsubmit() {
this.edited.emit(this.item);
}
Raw
file18.js
@Injectable
export class BookService{
getBooks(): Book[]{
}
}
Raw
file19.js
constructor(private bookservice: BookService)
Raw
file2.html
<!DOCTYPE html>
<html>
<head>
<title>Angular QuickStart</title>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('main.js').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>Loading AppComponent content here ...</my-app>
</body>
</html>
Raw
file20.js
constructor(private http:Http)()
onclick() {
this.http.get('app/http.php', {
params: {name: this.name}
}).subscribe(
response => {
this.result = response.text();
},
error => {
this.result = 'Error: $(error.statusText)';
}
)
}
Raw
file21.js
import ['サービス名'] from 'サービスが記述されたファイル'
@Component({
:
providers: ['サービス名']
:
})
export class AppComponent {
constructor(private test_service: 'サービス名')
onclick() {
this.test_service.'メソッド名'
}
}
Raw
file22.js
const myRoutes = [
{path: 'exam', component: ExampleComponent},
{path: '', component: MainComponent},
{path: '**', component: ErrorComponent},
];
export const MY_ROUTES: ModuleWithProviders = RouterModule.forRoot(myRoutes);
Raw
file3.js
@Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1>`,
})
Raw
file4.js
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: '<img [src]="image">',
})
export class AppComponent {
image = 'http://www.wings.msn.to/image/wings.jpg'
}
Raw
file5.js
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<div class='line back' [class.fore]='flag'>Wings</div>`,
styles: [`
.line {boder: solid 1px #f00; }
.back {background-color: #0ff; }
.fore {color: Red; }
`]
})
export class AppComponent {
flag = true;
}
Raw
file6.js
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<input type='button' (click)="show($event)" value="現在時刻"/>
{{msg}}
`
})
export class AppComponent {
msg = '---';
show(e: any) {
this.msg = new Date().toLocaleString();
console.log(e)
}
}
Raw
file7.js
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<input #txt id='txt' name='txt'
type='text' (keyup.enter)='show(txt.value)'
/>
<ul [innerHTML]='msg'></ul>
`,
styleUrls: ['app/app.component.css']
})
export class AppComponent {
msg = '';
show(input: string){
this.msg += `<li>${input}</li>`;
}
}
Raw
file8.js
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<form>
<label for='name'>Name: </label>
<input id='name' name='name' type='text'
[ngModel]='myName'
(ngModelChange)='myName=$event.toUpperCase()'
/>
<div> Hello {{myName}}</div>
</form>
`,
})
export class AppComponent {
myName = 'Hoge'
}
Raw
file9.js
<p>uppercase: {{ title | uppercase}}</p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment