Initial commit

{\rtf1\ansi\ansicpg1252\cocoartf1038\cocoasubrtf350

{\fonttbl\f0\fswiss\fcharset0 Helvetica;}

{\colortbl;\red255\green255\blue255;}

\margl1440\margr1440\vieww9000\viewh8400\viewkind0

\pard\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\ql\qnatural\pardirnatural

\f0\fs24 \cf0 No work files for this lesson...}

 No newline at end of file

angular.module('course', [])

  .controller('CourseCtrl', function ($scope) {

    $scope.log = [

      "my first message",

      "another message",

      "signing off"

    ];

    $scope.console = function (level, message) {

      console[level || 'log'](message);

    }

    $scope.store = function (message) {

      $scope.log.push(message);

    }

  })

  .directive('debug', function () {

    return {

      template: '<div>' + 

        '<input ng-model="message" />' + 

        '<select ng-model="level" ng-init="level = \'log\'">' + 

          '<option value="log">Log</option>' + 

          '<option value="warn">Warn</option>' + 

          '<option value="error">Error</option>' + 

          '<option value="debug">Debug</option>' + 

        '</select>' + 

        '<button ng-click="logger({level: level, message: message})">Log it</button>' + 

      '</div>',

      scope: {

        logger: '&'

      }

    }

  });

 No newline at end of file

<html ng-app="course">

  <head>

    <style type="text/css">

      .column {

        float: left;

        width: 50%;

      }

    </style>

  </head>

  <body ng-controller="CourseCtrl">

    <div class="column">

      <h3>To console:</h3>

      <div debug logger="console(level, message)"></div>

      <h3>To log array:</h3>

      <div debug logger="store(message)"></div>

    </div>

    <div class="column">

      <pre ng-bind="log | json"></pre>

    </div>

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>

    <script type="text/javascript" src="course.js"></script>

  </body>

</html>

 No newline at end of file

angular.module('course', [])

  .controller('CourseCtrl', function ($scope) {

    $scope.user = {

      username: 'mrvdot',

      email: 'talkto@mrvdot.com',

      id: 123

    };

    $scope.log = [

      "my first message",

      "another message",

      "signing off"

    ];

    var types = ['json', 'full', 'array'];

    $scope.console = [

      {

        value: $scope.log

      },

      {

        type: 'full',

        value: $scope.user

      },

      {

        type: 'array',

        value: $scope.log,

        innerType: 'full'

      }

    ];

    $scope.newTypes = function () {

      for (var i = 0, ii = $scope.console.length; i < ii; i++) {

        var idx = _.random(types.length - 1);

        $scope.console[i].type = types[idx];

      }

    }

  })

  .filter('type', function () {

    return function (val) {

      var type = typeof(val);

      if (type === 'object') {

        return Object.prototype.toString.call(val);

      } else {

        return type;

      }

    }

  })

  .directive('debug', function ($compile) {

    var defaultType = "json";

    return {

      link: function ($scope, $element, $attrs) {

        var setContent = function (type) {

          var tpl;

          type = type || defaultType;

          switch (type) {

            case "json":

              tpl = '<pre ng-bind="value | json"></pre>';

              break;

            case "type":

              tpl = '<pre>Type: {{value | type}}</pre>';

              break;

            case "array":

              var innerType = $attrs.innerType || defaultType;

              tpl = '<div ng-repeat="el in value" debug="el" type="' + innerType + '">{{el}}</div>';

              break;

            case "full":

              tpl = '<div debug="value" type="type"></div><div debug="value" type="json"></div>';

              break;

            default:

              tpl = '<b>Unknown debug type "' + type + '" for</b><pre>{{value}}</pre>';

              break;

          }

          $compile(tpl)($scope, function (el) {

            $element.html('').append(el);

          });

        };

        $attrs.$observe('type', setContent);

      },

      scope: {

        value: '=debug'

      }

    }

  });

 No newline at end of file

<html ng-app="course">

  <head>

  </head>

  <body ng-controller="CourseCtrl">

    <button ng-click="newTypes()">Set new types</button>

    <div ng-repeat="log in console">

      <h3>Debugging as {{log.type || 'default type'}}</h3>

      <div debug="log.value" type="{{log.type}}" inner-type="{{log.innerType}}"></div>

    </div>

    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>

    <script type="text/javascript" src="course.js"></script>

  </body>

</html>

 No newline at end of file