1

Sou iniciante em angular. Minhas rotas não carregam na ng-view. Quando clico no link minha url fica da seguinte forma

http://localhost:56845/Index.html#Add e nada acontece.

Nenhum erro é exibido no console.

Utilizo o angular 1.6.

test.js

var MyApp = angular.module("MyApp", ['ngRoute']);

MyApp.config(function ($routeProvider, $locationProvider) {

    $locationProvider.hashPrefix('');

    $routePriveder.
        when('/add', {
            templateUrl: 'Paginas/add.html',
            controller: 'AddController'

        }).
        when('/edit', {
            templateUrl: 'paginas/edit.html',
            controller: 'EditController'
        }).
        when('/delete', {
            templateUrl: 'paginas/delete.html',
            controller: 'DeleteController'
        }).
        when('/home', {
            templateUrl: 'paginas/home.html',
            controller: 'HomeController'
        }).
        otherwise({
            redirectTo: '/home'
        }); 
});

controllers.js

MyApp.controller("AddController", function ($scope) {
    $scope.msg= "Add";

});

MyApp.controller("EditController", function ($scope) {
    $scope.msg = "Editar";
});

MyApp.controller("DeleteController", function ($scope) {
    $scope.msg= "deletar";
});

Index.html

<!DOCTYPE html>
<html ng-app="MyApp">

<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular-route.js"></script>
    <script src="test.js"></script>
    <script src="controllers.js"></script>

</head>
<body>
     <nav role="navigation" class="navbar navbar-inverse">
          <div class="container-fluid">
               <div class="navbar-header">
                    <a class="navbar-brand" href="#"> O que Tem Pra Hj? </a>
                </div>
                <ul class="nav navbar-nav">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#add">Add</a><li>
                    <li><a href="#edit">Edit</a></li>
                    <li><a href="#delete">Delete</a></li>
                </ul>
         </div>
     </nav>

    <div ng-view>  </div>

</body>
</html>

add.html

 <h2 ng-controller="AddController">{{msg}}</h2>

2 Respostas 2

1

A sua versão precisa de algumas pequenas correções antes de funcionar.

  • $routePriveder parece ser um erro de digitação ($routeProvider)
  • HomeController é especificado na declaração de rotas, porém nunca é declarado. Solução: implemente HomeController
  • Controllers são especificados para cada uma das declarações de rotas, porém a view add.html força o carregamento de AddController uma segunda vez. Solução: Remova a menção da view

O seu código é funcional após as modificações necessárias:

var MyApp = angular.module("MyApp", ['ngRoute']);

MyApp.config(function ($routeProvider, $locationProvider) {

    $locationProvider.hashPrefix('');

    $routeProvider.
        when('/add', {
            templateUrl: 'templateCRUD.html',
            controller: 'AddController'
        }).
        when('/edit', {
            templateUrl: 'templateCRUD.html',
            controller: 'EditController'
        }).
        when('/delete', {
            templateUrl: 'templateCRUD.html',
            controller: 'DeleteController'
        }).
        when('/home', {
            templateUrl: 'templateCRUD.html',
            controller: 'HomeController'
        }).
        otherwise({
            redirectTo: '/home'
        }); 
});

MyApp.controller("HomeController", function ($scope) {
    $scope.msg= "Home";
});

MyApp.controller("AddController", function ($scope) {
    $scope.msg= "Adicionar";
});

MyApp.controller("EditController", function ($scope) {
    $scope.msg = "Editar";
});

MyApp.controller("DeleteController", function ($scope) {
    $scope.msg= "deletar";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script type="text/ng-template" id="templateCRUD.html">
    <h2>{{msg}}</h2>
</script>

<body ng-app="MyApp">
    <nav role="navigation" class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#"> O que Tem Pra Hj? </a>
            </div>
            <ul class="nav navbar-nav">
                <li><a href="#home">Home</a></li>
                <li><a href="#add">Add</a></li>
                <li><a href="#edit">Edit</a></li>
                <li><a href="#delete">Delete</a></li>
            </ul>
        </div>
    </nav>

    <div ng-view>
    </div>

</body>

0
1

Tente colocar no Head do index.html

<base href="/">

procure usar sempre letras minusculas nas rotas.

/add e não /Add

Remova o

$locationProvider 
$locationProvider.hashPrefix('');


 MyApp.config(function($routeProvider) { 
    $routeProvider
      .when... 
 });
10
  • agora não localizou e minha url ficou da seguinte forma localhost:56845/#Add
    – Core
    Commented 17/04/2017 às 22:24
  • Você trocou as rotas para minusculo ? Se sim faltou trocar também nos href="#add" Commented 17/04/2017 às 22:30
  • Sim, editei a pergunta para tudo minusculo tb.
    – Core
    Commented 17/04/2017 às 22:33
  • Remova o $locationProvider e $locationProvider.hashPrefix('') Editei minha resposta para visualizar melhor. Commented 17/04/2017 às 22:36
  • mesmo erro anterior, não localizou.
    – Core
    Commented 17/04/2017 às 22:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .