No Angular Routes 1.6

Question

No Angular Routes 1.6

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

I'm a beginner in angular. My routes do not load in ng-view. When I click on the link my url looks like this

link and nothing happens.

No error is displayed on the console.

I use angle 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>

angularjs angular-routes

asked by anonymous 18.04.2017 / 00:17

2 answers

1

Try to put in the Head of index.html

<base href="/">

Always try to use lowercase letters in the routes.

/ add and not / Add

Remove the

$locationProvider 
$locationProvider.hashPrefix('');


 MyApp.config(function($routeProvider) { 
    $routeProvider
      .when... 
 });

18.04.2017 / 00:20

Point to a Docker container with apache How can I move an element of an ArrayList to the last element?

score 1 · Accepted Answer

Your version needs some minor fixes before it works.

$routePriveder seems to be typing error ( $routeProvider )
HomeController is specified in the route declaration, but is never declared. Solution: implement HomeController
Controllers are specified for each of the route declarations, but the add.html view forces the AddController load a second time. Solution: Remove the mention of view

Your code is functional after the necessary modifications:

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><scriptsrc="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><linkrel="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>