Routes at Angular 1.6

Asked

Viewed 434 times

1

I’m an angled beginner. My routes don’t load in ng-view. When I click on the link my url looks like this

http://localhost:56845/Index.html#Add and nothing happens.

No error is displayed on 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'
        }); 
});

js controllers.

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

2 answers

1


Your version needs some minor fixes before it works.

  • $routePriveder appears to be a typo ($routeProvider)
  • HomeController is specified in the route declaration, but is never stated. Solution: implement HomeController
  • Controllers are specified for each of the route declarations, but the view add.html force the loading of AddController a second time. Solution: Remove view mention

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>
<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>

1

Try putting it in the Head of index.html

<base href="/">

always use minuscule letters on routes.

/add and no /Add

Remove the 

$locationProvider 
$locationProvider.hashPrefix('');


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

  • now could not locate and my url was as follows http://localhost:56845/#Add

  • You changed the routes to minuscule ? If yes missed also change in href="#add"

  • Yes, I edited the question for everything too.

  • Remove the $locationProvider and $locationProvider.hashPrefix('') I edited my answer to better view.

  • same previous error, could not locate.

  • You are accessing /index.html try to access only http://localhost:56845

  • Also check that your templates page is correct, Pages and not pages

  • I changed to pages and when trying to access localhost:56845 error: Server Error in Application '/'.

  • How are you running the application ? It should be working, see this simple example of w3c, here they didn’t even need to add base url. https://www.w3schools.com/angular/angular_routing.asp

  • I did it by visual studio, I run using IIS.

Show 5 more comments

Browser other questions tagged angularjs angular-routes

You are not signed in. Login or sign up in order to post.