无法使AngularJS在JSFiddle上工作

Question

I am trying to work with AngularJS on JSFiddle.

I've copied other similar projects to the T, but still, JSFiddle is giving me all sorts of errors when I try it in my own. Currently, it is telling me that is doesn't recognize my controller.

I'd really appreciate if someone could have a look at my really simple Fiddle and tell me why it is not working.

https://jsfiddle.net/ke10sq2v/

Here's the code:

angular.module('App', ['ngAnimate'])
.controller("Ctlr", ['$scope', function($Scope){
    $scope.hi = "yolo";
}]);

HTML

<div ng-controller="Ctrl" ng-init="showBoxes=false">
  <div class="block" ng-show="showBoxes">Block 1</div>
  <div class="block" ng-show="showBoxes">Block 2</div>
  <button ng-click="showBoxes=!showBoxes">Toggle</button>
  <p>Show Boxes: {{showBoxes}} {{hi}}</p>
</div>

CSS

.block {
  height: 100px;
  width: 100px;
  background-color: blue;
  margin: 15px 10px;
}

Answer 1

A few things:

You forgot to declare the ngApp directive in the HTML

You spelled Ctrl wrong in the controller defintion

You capitalized $Scope in the controller injection - but tried to reference $scope

Working fiddle: https://jsfiddle.net/ke10sq2v/1/

IMPORTANT: (as per comment from Jack A. below) You need to select one of the "No wrap" load types for the JavaScript. The default "on load" doesn't work with Angular...