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.