JSFiddle - React, Tailwind, and code Playground

by jhoguet

HTML

<h1>Showing Lifecycle</h1>
<div ng-app="ServiceTestApp">
    <div  ng-controller="ServiceTestController" >
        <ul ng-repeat="line in lazyConsole">
            <li>{{line}}</li>
        </ul>
    </div>
</div>

JavaScript

var lazyConsole = [];
var line = 0;
lazyConsole.push = function(){
    Array.prototype.push.call(lazyConsole, (line++) +':  ' + arguments[0]);
}
var app = angular.module('ServiceTestApp', [])
.value('myValue', 'Lance')
.constant('myConstant', 'Jon')
.controller('ServiceTestController', ['$scope', function ($scope) {
    $scope.lazyConsole = lazyConsole;
    lazyConsole.push('created ServiceTestController');
}])
.provider('myService', function(){
    this.$get = function(){ return {}};
})
.config(['myConstant','myServiceProvider', function(myConstant, myServiceProvider){
    lazyConsole.push('In .config');
    lazyConsole.push('myConstant : ' + myConstant);
    lazyConsole.push('myServiceProvider : ' + myServiceProvider);
    // ask for myValue or myService and angular blows up
}])
.run(['myConstant','myValue','myService', function(myConstant, myValue, myService){
    lazyConsole.push('In .run');
    lazyConsole.push('myConstant : ' + myConstant);
    lazyConsole.push('myValue : ' + myValue); 
    // ask for myServiceProvider ... and get barf
    lazyConsole.push('myService : ' + myService);
}]);