Last active
July 21, 2019 00:35
-
-
Save techeverri/271e631e48727fd40214 to your computer and use it in GitHub Desktop.
Angular 2 GitHub Avatar
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .github-avatar { | |
| font-family: Roboto, sans-serif; | |
| } | |
| .header { | |
| background-color: #2196F3; | |
| padding: 15px; | |
| color: white; | |
| } | |
| .user-search { | |
| float: right; | |
| } | |
| .user-detail { | |
| width: 150px; | |
| background-color: #03A9F4; | |
| margin: 0 auto; | |
| margin-top: 15px; | |
| } | |
| .user-detail img { | |
| width: 200px; | |
| } | |
| .user-detail div { | |
| background-color: white; | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); | |
| padding: 15px; | |
| } | |
| .card { | |
| background: #fff; | |
| border-radius: 2px; | |
| display: block; | |
| height: 200px; | |
| position: relative; | |
| width: 200px; | |
| } | |
| .card-3 { | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="github-avatar"> | |
| <div class="header"> | |
| <i class="fa fa-github fa-lg"></i> | |
| Angular 2 GitHub Avatar | |
| <span class="user-search"> | |
| <input [(ngModel)]="username" placeholder="User" (keyup)="doGetUser(username)"> | |
| <i class="fa fa-search"></i> | |
| </span> | |
| </div> | |
| <div *ngIf="user" class="user-detail card card-3"> | |
| <img *ngIf="user" src="{{ user.avatar_url }}"> | |
| <div> | |
| <span *ngIf="user.name">{{ user.name }}</span> | |
| <br> | |
| <a [href]="'https://github.com/' + user.login" target="_blank">{{ '@' + user.login }}</a> | |
| </div> | |
| </div> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {Component} from 'angular2/core'; | |
| import {Http, HTTP_PROVIDERS} from 'angular2/http'; | |
| import 'rxjs/add/operator/map'; | |
| @Component({ | |
| selector: "github-avatar", | |
| viewProviders: [HTTP_PROVIDERS], | |
| templateUrl: 'app/app.component.html', | |
| styleUrls: ['app/app.component.css'] | |
| }) | |
| export class AppComponent implements OnInit { | |
| public urlAPI = 'https://api.github.com/users/'; | |
| public clientId = '6c628481062a08230920'; | |
| public clientSecret = '5a84e99c8bfcc7d299c390c60dd635af84da73a2'; | |
| public username: string = 'torvalds'; | |
| public user: any; | |
| constructor(public http: Http) { } | |
| doGetUser(username: string) { | |
| var url = `${this.urlAPI}${username}?client_id=${this.clientId}&client_secret=${this.clientSecret}`; | |
| this.http | |
| .get(url) | |
| .map(res => res.json()) | |
| .subscribe( | |
| data => this.user = data, | |
| err => this.user = undefined | |
| ); | |
| } | |
| ngOnInit() { | |
| this.doGetUser(this.username); | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {bootstrap} from 'angular2/platform/browser' | |
| import {AppComponent} from './app.component' | |
| bootstrap(AppComponent); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| System.config({ | |
| transpiler: 'typescript', | |
| typescriptOptions: { | |
| emitDecoratorMetadata: true | |
| }, | |
| packages: { | |
| app: { | |
| main: './main.ts', | |
| defaultExtension: 'ts' | |
| } | |
| } | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Angular 2 GitHub Avatar</title> | |
| <script>document.write('<base href="' + document.location + '" />');</script> | |
| <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> | |
| <style type="text/css"> body {margin: 0px;} </style> | |
| <!-- 1. Load libraries --> | |
| <!-- IE required polyfills, in this exact order --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.2/angular2-polyfills.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system.js"></script> | |
| <script src="https://npmcdn.com/[email protected]/lib/typescript.js"></script> | |
| <script src="config.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.2/Rx.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.2/angular2.dev.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.2/http.dev.js"></script> | |
| <!-- 2. Configure SystemJS --> | |
| <script> | |
| System.import('app') | |
| .catch(console.error.bind(console)); | |
| </script> | |
| </head> | |
| <!-- 3. Display the application --> | |
| <body> | |
| <github-avatar>Loading...</github-avatar> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
GistRun URL
https://gist.run/?id=271e631e48727fd40214