Brolog ♥ Angular

import {bootstrap} from 'angular2/platform/browser'
import {ContactsList} from './contacts'

bootstrap(ContactsList, [
  Brolog,
]);

<!DOCTYPE html>
<html>

  <head>
    <title>Angular 2 QuickStart</title>

    <!-- 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://code.angularjs.org/2.0.0-beta.2/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="https://code.angularjs.org/2.0.0-beta.2/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.2/angular2.dev.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.2/http.dev.js"></script>
    
    <!--
    include Brolog at here
    -->
    <script src="//unpkg.com/brolog"></script>

    <!-- 2. Configure SystemJS -->
    <script>
    
      /**
       * Use Brolog at here
       */
      log = Brolog.instance('silly')
      log.info('Brolog', 'Hello, %s', 'world!')
      
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        map: {
          elo: 'lib/elo.js'
        },
        packages: {'app': {defaultExtension: 'ts'}} 
      });
      System.import('app/main')
            .then(function () {
              log.info('Brolog', 'System.import() finished')
            })
            .catch(console.error.bind(console));
    </script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <contacts-list>Loading...</contacts-list>
  </body>

</html>


<!-- 
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

import {Component, Inject} from 'angular2/core';
 
@Component({
    selector: 'contacts-list',
    template: `
      <div>
        <p>
          Open browser console to see log messages that send from Brolog inside Angular.
        </p>
        <p>
          Brolog Github: 
          <a href="https://github.com/zixia/brolog" target="_blank">
            https://github.com/zixia/brolog
          </a>
        </p>
      </div>
    `
})
export class ContactsList {
  constructor(
    @Inject(Brolog) private log
  ) {
    log.info('ContactsList', 'constructor()')
    
    log.verbose('Brolog', 'Brolog injected to Angular Succeed!')
    
  }
}

# Brolog

A Logger compitible with Npmlog with enhancements

1. Out-of-Box supporting for Angular
2. Out-of-Box supporting for Browser 

Github: <https://github.com/zixia/brolog>

Demo: <https://www.zixia.net/brolog>