A Pen by Whitney Lampkin on CodePen.
Created
November 30, 2016 00:43
-
-
Save anonymous/7e253e23a80f38403f5da36a3bb352bf to your computer and use it in GitHub Desktop.
Simple Angular2 Pen
This file contains hidden or 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
| <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet"> | |
| <div class="main"> | |
| <my-app>Loading...</my-app> | |
| </div> |
This file contains hidden or 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
| //START IMPORT | |
| // import does not work in Codepen | |
| // using const instead | |
| const {Component} = ng.core; | |
| const {bootstrap} = ng.platform.browser; | |
| //END IMPORT | |
| // START Components | |
| // Please note: as we are not exporting/importing but everything is in a single file, we need to: | |
| // inline the templates as strings, and | |
| // list the components so that any subcomponents come before the component using them (i.e. app is last). | |
| class DataItem { | |
| id: number; | |
| name: string; | |
| webpage: string; | |
| constructor(id, name, webpage){ | |
| this.id = id; | |
| this.name = name; | |
| this.webpage = webpage; | |
| } | |
| } | |
| var DATAITEMS: DataItem[] = [ | |
| { | |
| "id": 1, | |
| "name": "DevU", | |
| "webpage": "https://www.devu.com/" | |
| }, | |
| { | |
| "id": 2, | |
| "name": "Stack Overflow", | |
| "webpage": "http://stackoverflow.com/" | |
| }, | |
| { | |
| "id": 3, | |
| "name": "W3Schools", | |
| "webpage": "http://www.w3schools.com/" | |
| }, | |
| { | |
| "id": 4, | |
| "name": "FreeCodeCamp", | |
| "webpage": "https://www.freecodecamp.com/", | |
| }, | |
| { | |
| "id": 5, | |
| "name": "Pluralsight", | |
| "webpage": "https://www.pluralsight.com/" | |
| } | |
| ]; | |
| @Component({ | |
| selector: 'my-app', | |
| template: ` | |
| <h1>Whitney\'s List of Helpful Websites</h1> | |
| <h2>(An Angular 2 App)</h2><hr /><br /> | |
| <ul class="list"> | |
| <li *ngFor="#dataItem of dataItems"> | |
| <span class="badge">{{dataItem.id}}</span> | |
| <a href="{{dataItem.webpage}}">{{dataItem.name}}</a> | |
| </li> | |
| </ul> | |
| ` | |
| }) | |
| class AppComponent { | |
| dataItems = DATAITEMS; | |
| } | |
| //BOOT ANGULAR | |
| bootstrap(AppComponent); | |
This file contains hidden or 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
| <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.src.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/Rx.umd.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2-all.umd.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2-polyfills.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> |
This file contains hidden or 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 { | |
| background: linear-gradient(#0143A3,#0273D4); | |
| height: 100%; | |
| } | |
| body { | |
| color: #fff; | |
| background: url("") 50% 0 no-repeat; | |
| } | |
| h1, h2 { | |
| text-align: center; | |
| } | |
| .main { | |
| font-family: 'Roboto Condensed', sans-serif; | |
| } | |
| .list .badge { | |
| display: inline-block; | |
| font-size: large; | |
| color: white; | |
| padding: .5em 1em; | |
| background-color: red; | |
| line-height: 1em; | |
| position: relative; | |
| left: -1px; | |
| top: -5px; | |
| height: 10em; | |
| width: 1em; | |
| margin-right: .8em; | |
| border-radius: 4px 0 0 4px; | |
| } | |
| .list { | |
| margin: 1px 0 2em 0; | |
| list-style-type: none; | |
| padding: 0; | |
| width: 15em; | |
| } | |
| .list li { | |
| cursor: pointer; | |
| position: relative; | |
| background-color: #EEE; | |
| margin: .5em; | |
| padding: .3em 0; | |
| height: 10em; | |
| width: 42em; | |
| border-radius: 4px; | |
| font-size: large; | |
| } | |
| .list li:hover { | |
| color: #607D8B; | |
| background-color: #DDD; | |
| left: .1em; | |
| } | |
| .list .text { | |
| position: relative; | |
| top: -3px; | |
| } | |
| a { | |
| color: black; | |
| } |
This file contains hidden or 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
| <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment