Roteamento AngularJS com templateUrl

Question

Nov 16, 2016, 03:48 PM

Roteamento AngularJS com templateUrl

Estou com um problema no roteamento do AngularJS: não recebo nenhum feedback da página. Sem erros ou comutadores de exibição.

Eu verifiquei minha implementação do módulo, mas ela foi declarada da maneira certa. Depois procurei erros de digitação, comotemplateURL, mas não encontrei nenhum. Eu também tentei usarng-href ao invés dehref na lista, mas os links não eram mais clicáveis.

Aqui está o meuplunker.

E meu código:

Criei minha navegação:

<body ng-app="Productportfolio">

<ul>
  <li>
    <a href="#/home">Home</a>
  </li>
  <li>
    <a href='#/privat'>Log in</a>
 </li>
</ul>

<ng-view></ng-view>

<!--own js -->
<script src="app.js"></script>
<!--Controller -->
<script src="ProductCtrl.js"></script>
<!--Services -->
<!--Direktives-->
</body>

Criou os modelos:

//home.html
<div>
  <h1> Home </h1>
</div>

//private.html
<div>
  <h1> Private</h1>
</div>

Declarou um módulo angular:

angular.module('Productportfolio', ['ngRoute'])

Adicionado o $ routeProvider à minha configuração:

angular.module('Productportfolio', ['ngRoute', 'ProductService', 'ProductCtrl'])

.config(['$routeProvider, $locationProvider', function ($routeProvider, $locationProvider) {

  $routeProvider

    .when('/home', {
        templateUrl: 'home.html',
        controller: 'ProductCtrl'
    })

    .when('/private', {
        templateUrl: 'private.html',
        controller: 'ProductCtrl'
    })

    .otherwise({
        redirectTo: '/home',
        controller: 'ProductCtrl'
    });

  $locationProvider.hashPrefix('!');

}]);