Skip to content

Instantly share code, notes, and snippets.

@Tabares

Tabares/README.md

Created August 7, 2017 18:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Tabares/5d5b984432bf794107c78c9766874cd9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Tabares/5d5b984432bf794107c78c9766874cd9 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Tabares created this gist Aug 7, 2017.
    3 changes: 3 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    # angular 2 basic counter

    Basic counter in Angular 2.
    19 changes: 19 additions & 0 deletions config.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    System.config({
    //use typescript for compilation
    transpiler: 'typescript',
    //typescript compiler options
    typescriptOptions: {
    emitDecoratorMetadata: true
    },
    //map tells the System loader where to look for things
    map: {
    app: './src'
    },
    //packages defines our app package
    packages: {
    app: {
    main: './counter.ts',
    defaultExtension: 'ts'
    }
    }
    });
    26 changes: 26 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    <!DOCTYPE html>
    <html>

    <head>
    <title>angular 2 basic counter</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://code.angularjs.org/2.0.0-beta.11/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="config.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.11/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.11/angular2.dev.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.11/http.dev.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.11/router.dev.js"></script>

    <script>
    System.import('app')
    .catch(console.error.bind(console));
    </script>
    </head>

    <body>
    <app></app>
    </body>

    </html>
    26 changes: 26 additions & 0 deletions src\counter.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    import {Component} from 'angular2/core';
    import {bootstrap} from 'angular2/platform/browser';


    @Component({
    selector: 'app',
    template: `
    <button (click)="increment()">Increment</button>
    <button (click)="decrement()">Decrement</button>
    <div></div>
    {{counter}}
    `
    })
    export class App {
    public counter : number = 0;

    increment(){
    this.counter += 1;
    }

    decrement(){
    this.counter -= 1;
    }
    }

    bootstrap(App, []);