Could you to set project in Fiddle?

Question

This code works in WebStorm, but it doesn't work in jsfiddle: https://jsfiddle.net/fazcen8n/6

It reports the following error:

Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

(function() {
  'use strict';

  angular
    .module('app')
    .controller('cc', controller);

  controller.$inject = ['$scope', '$q'];

  function controller($scope, $q) {



    var dataSource = new kendo.data.DataSource({
      dataType: "jsonp",
      transport: {
        read: function(options) {
          readData2(options).then(
            function(data, status, headers, config) {

              console.log(data);
              options.success(data);

            });
        },

        parameterMap: function(options, operation) {
          if (operation !== "read" && options.models) {
            return {
              models: kendo.stringify(options.models)
            };
          }
        }
      },
      batch: false,
      pageSize: 10,
      serverPaging: true,
      serverSorting: true,
      schema: {
        data: function(data) {
          return data.data;
        },
        total: function(data) {
          $scope.filtered = true;
          $scope.selectAll = false;

          $scope.totalRows = data.total;
          $scope.trimRows = (data.total === 1 ? "row" : "rows");

          return data.total;
        },
        model: {
          id: "ProductID",
          fields: {
            ProductID: {
              editable: false,
              nullable: true
            },
            ProductName: {
              validation: {
                required: true
              }
            },
            UnitPrice: {
              type: "number",
              validation: {
                required: true,
                min: 1
              }
            },
            Discontinued: {
              type: "boolean"
            },
            UnitsInStock: {
              type: "number",
              validation: {
                min: 0,
                required: true
              }
            }
          }
        }
      }
    });

    $scope.objTrim = 'Client Summary Report';
    $scope.columns2 = [
      "ProductName",
      {
        field: "id",
        attributes: {
          'class': 'text-right'
        },
        format: '{0:n0}',
        width: 110,
        footerTemplate: '<div class="text-right">6666</div>'
      },
      {
        field: "UnitPrice",
        title: "Unit Price",
        format: "{0:c}",
        width: 120
      },
      {
        field: "UnitsInStock",
        title: "Units In Stock",
        width: 120
      },
      {
        field: "Discontinued",
        width: 120
      }
    ];

    $scope.gridOptions2 = {
      scrollable: true,
      dataSource: dataSource,
      sortable: true,
      resizable: true,
      selectable: "multiple, cell"

    };

    function readData2(options) {
      console.log("QUERY!! ");

      var d = [{
          id: 23333,
          ProductID: 23333,
          ProductName: 2333,
          Discontinued: 6666,
          UnitPrice: 23333,
          UnitsInStock: 38383
        },
        {
          id: 23333,
          ProductID: 23333,
          ProductName: 2333,
          Discontinued: 6666,
          UnitPrice: 23333,
          UnitsInStock: 38383
        },
        {
          id: 23333,
          ProductID: 23333,
          ProductName: 2333,
          Discontinued: 6666,
          UnitPrice: 23333,
          UnitsInStock: 38383
        },
      ];

      return $q.when(true).then(function() {
        return {
          data: d
        };
      });
    };


    window.setTimeout(function() {
      var grid = $("#grid2").data("kendoGrid");
      var columns = grid.getOptions().columns;
      columns[1].footerTemplate = "900000000000";
      grid.setOptions({
        columns: columns
      });
    }, 2000);
    $scope.gridOptions2.dataSource.read();
  }
})();

Answer 1

add

angular.module('app', []); after 'use strict'; line.

NOTE:

you need to define module before creating controller for it.

Answer 2

Remove the <div ng-app='app'> in your html and add [] in your js module:

angular.module('app', [])

Here's a working Fiddle