Skip to content

Instantly share code, notes, and snippets.

/index.html

Created November 30, 2016 00:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/7e253e23a80f38403f5da36a3bb352bf to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/7e253e23a80f38403f5da36a3bb352bf to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Nov 30, 2016.
    5 changes: 5 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">

    <div class="main">
    <my-app>Loading...</my-app>
    </div>
    72 changes: 72 additions & 0 deletions script.typescript
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,72 @@
    //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);

    5 changes: 5 additions & 0 deletions scripts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    <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>
    7 changes: 7 additions & 0 deletions simple-angular2-pen.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Simple Angular2 Pen
    -------------------


    A [Pen](https://codepen.io/WLampkin/pen/pNeXww) by [Whitney Lampkin](http://codepen.io/WLampkin) on [CodePen](http://codepen.io/).

    [License](https://codepen.io/WLampkin/pen/pNeXww/license).
    67 changes: 67 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,67 @@
    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;
    }
    1 change: 1 addition & 0 deletions styles
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />