Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Function.prototype.bind.apply(...) is not a constructor

Parei na aula 6 de do curso Angular 1 por causa desse erro:

angular.js:14516 TypeError: Function.prototype.bind.apply(...) is not a constructor
    at Object.instantiate (angular.js:5018)
    at $controller (angular.js:10877)
    at Object.link (angular-route.js:1214)
    at angular.js:1341
    at invokeLinkFn (angular.js:10419)
    at nodeLinkFn (angular.js:9808)
    at compositeLinkFn (angular.js:9048)
    at publicLinkFn (angular.js:8913)
    at lazyCompilation (angular.js:9304)
    at boundTranscludeFn (angular.js:9091) "<ng-view class="ng-scope">"

Quando eu comento a propriedade controller no meu routeProvider ele para de dar esse erro mas daí não passa o controller pro meu template.

index.html:

<!DOCTYPE html>
<html lang="pt-br" ng-app="loja">
<head>
    <title>Loja</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="public/css/bootstrap.min.css">
    <link rel="stylesheet" href="public/css/bootstrap-theme.min.css">
    <script src="public/js/lib/angular.js"></script>
    <script src="public/js/lib/angular-route.js"></script>
    <script src="public/js/directives/minhas-diretivas.js"></script>
    <script src="public/js/app.js"></script>
    <script src="public/js/controller/produtos-controller.js"></script>
</head>
<body>
    <div class="container">
        <ng-view></ng-view>        
    </div>
</body>
</html>

app.js

angular.module('loja', ['minhasDiretivas', 'ngRoute'])
    .config(($routeProvider, $locationProvider) => {

        $locationProvider.html5Mode(false);
        $locationProvider.hashPrefix('');

        $routeProvider.when('/produtos', {
            templateUrl: 'public/partials/produtos.html', //Até aqui funciona, ele abre meu tamplate na url correta
            controller: 'ProdutosController' // Quando comenta essa linha não mostra mais o erro
        });
    });

produtos-controller.js:

angular.module('loja').controller('ProdutosController', ($scope, $http) => {
    $http.get('api/produtos')
        .then((res) => {
            $scope.produtos = res.data;
        }).catch((error) => {
            console.log(error);
        });
});

minhas-diretivas.js

angular.module('minhasDiretivas', []).directive('meuPainel', () => {

    var ddo = {
        restrict: 'AE', // Atribute Element
        scope: {
            titulo: '@'
        },
        transclude: true,
        templateUrl: 'public/js/directives/meu-painel.html'
    };

    return ddo; // Directive Definition Object
});

meu-painel.html:

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">{{titulo}}</h3>
    </div>
    <div class="panel-body" ng-transclude>
    </div>
</div>

produtos.html

<div ng-controller="ProdutosController">
    <div class="jumbotron">
        <h1 class="text-center">Loja</h1>
    </div>

    <div class="row">
        <div class="col-md-12">
            <form>
                <input type="text" ng-model="filtro" ng-model-options="{debounce: 500}" class="form-control" placeholder="buscar">
            </form>
        </div>
    </div>

    <div class="row">
        <meu-painel class="col-md-10" ng-repeat="produto in produtos | filter: filtro" titulo="{{produto.codigo}}">
            <h3>{{produto.nome}}</h3>
        </meu-painel>
    </div>
</div>

Estou usando AngularJS 1.6.3. Todos os arquivos são baixados corretamente pelo navegador.

1 resposta
solução!

Consegui!

Não usar Arrow Functions!

($scope) => {}

;)