AngularJS Routing multiple Redirection

Question

Here is my code:

index.html

<!DOCTYPE html>
<html lang="en" ng-app="groceryListApp">
<meta charset="utf-8">

<head>
  <meta http-equiv="X-UA-Compatible" content="IE-edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Bootstrap 101 Template</title>

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>


</head>

<body ng-controller="HomeController">
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">
          <span class="glyphicon glyphicon-apple" style="color: #5bdb46">
          </span> {{appTitle}}
        </a>
      </div>
    </div>
  </nav>

  <div class="container" ng-view>

  </div>

<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.min.js"></script>
<script src="lib/jquery-3.2.1.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="js/app.js"></script>
</body>

</html>

app.js

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

app.config(function($routeProvider) {
  $routeProvider
    .when("/", {
      templateUrl: "views/groceryList.html",
      controller: "GroceryListItemsController"
    })

    .when("/addItem",{
       templateUrl: "views/addItem.html",
        controller:  "GroceryListItemsController"

      })
     // .otherwise({
      //  redirectTo: "/"

      //})
});

app.controller("HomeController", ["$scope", function($scope) {
  $scope.appTitle = "Grocery List";
}]);

app.controller("GroceryListItemsController", ["$scope", function($scope) {
  $scope.groceryItems = [{
      completed: true,
      itemName: 'milk',
      date: '2017-10-01'
    },
    {
      completed: true,
      itemName: 'cookies',
      date: '2017-10-02'
    },
    {
      completed: true,
      itemName: 'ice cream',
      date: '2017-10-03'
    },
    {
      completed: true,
      itemName: 'potatoes',
      date: '2017-10-04'
    },
    {
      completed: true,
      itemName: 'cereal',
      date: '2017-10-05'
    },
    {
      completed: true,
      itemName: 'bread',
      date: '2017-10-06'
    },
    {
      completed: true,
      itemName: 'eggs',
      date: '2017-10-07'
    },
    {
      completed: true,
      itemName: 'tortillas',
      date: '2017-10-08'
    }
  ]
}]);

groceryList.html

<div class="col-xs-12">
  <a href="#/addItem" style="margin-bottom: 10px:" class="btn btn-primary btn-lg btn-block">
    <span class="glyphicon glyphicon-plus"></span> Add Grocery Item </a>
  <ul class="list-group">
    <li ng-repeat="item in groceryItems | orderBy: 'date'" class="list-group-item text-center clearfix">
      <span style="font-weight: bold">{{item.itemName | uppercase}}</span>
    </li>
  </ul>
</div>

addItem.html

<div class="col-xs-12">
        <div class="jumbotron text-center">
            <h1>Add Item Below</h1>
        </div>
<form name="groceryForm">
    <div class="form-group">
        <input type="text" class="form-control" placeholder ="Grocery Item">
    </div>


    <div class="form-group">
        <a href="#/" class="btn btn-success btn lg btn-block">
            <span class="glyphicon glyphicon-pushpin"></span>
            Save
        </a>
    </div>


    <div class="form-group">
        <a href="#/" class="btn btn-default btn lg btn-block">
            <span class="glyphicon glyphicon-remove"></span>
            Cancel
        </a>
    </div>
</form>
</div>

The output is showing the Add Grocery Item button along with the grocery items. However when clicking the add grocery item button ,its not redirecting to any page. This is an extension to Angular Module Routing not working

Thanks for you help.

Omar Einea · Accepted Answer · 2017-12-27 10:03:45Z

1

I ran your code locally and the problem seems to be related to route's hashPrefix. It seems that the default prefix is #!/, so your URLs should start with it:

<a href="#!/addItem" ...>
<a href="#!/" ...>

Instead of:

<a href="#/addItem" ...>
<a href="#/" ...>

This will require that you change every herf in the website. Though the more elegant solution would be to get rid of the ! mark all together using:

app.config(function($routeProvider, $locationProvider) {
    $locationProvider.hashPrefix('');
    $routeProvider...
       // Register routes...
});

This will change the default prefix and make it #/ instead of #!/.

By doing so, all your website URLs will work without the need to change anything else.

answered Dec 27, 2017 at 10:03

Omar Einea

2,5327 gold badges25 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS Routing multiple Redirection

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related