CODEWITHSUNDEEP
angularjsnode.js
Bilbo Baggins
Bilbo Baggins

Reputation: 3019

AngularJS 1.0 routes not working

I am trying an application with AngularJS 1.0 but I am facing issues with routing. The route is not working at all. I can't see my templates being displayed inside ng-view. My code is as shown below. package.json

"main": "server.js",
    "dependencies": {
        "angular": "^1.4.3",
        "angular-route": "1.6.10",
        "body-parser": "latest",
        "ejs": "latest",
        "express": "latest",
        "fabric-ca-client": "^1.0.2",
        "fabric-client": "^1.0.2",
        "grpc": "1.11.0"
    }

app.js

'use strict';

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

app.config(function($routeProvider){
    $routeProvider
    .when('/', {
        templateUrl: 'client/index.html'
    })
    .when('/vault', {
      templateUrl: 'client/vault.html'
    })
    .when('/store', {
        templateUrl: 'client/store.html'
    })
    .when('/til', {
    templateUrl: 'client/til.html'
    })
    .when('/order', {
    templateUrl: 'client/order.html'
    })
  });

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Demo Application</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <!-- require jquery and bootstrap scripts -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
  </head>
  <body ng-app="application" ng-controller="appController">
    <header>
      <div id="left_header">Demo Application</div>
    </header>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#store">Store</a></li>
            <li><a href="#about">About</a></li>
           </ul>
        </div>
      </nav>
      <div ng-view></div> 
</html>

There are two more pages for store and about with only one tag in them.

I should be able to see the changes in the view part i.e. 'This is About page' but it is not being displayed.

I am referring to this URL

Any help would be appriciated.

Update-1 Added angular-route package but still not working.

Getting following error:

" Error: [$injector:modulerr] http://errors.angularjs.org/1.4.3/$injector/modulerr?p0=application&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.3%2F%24injector%2Fmodulerr%3Fp0%3DngRoute%26p1"

Update-2 Entire console output, which shows some error but don't understand a bit of it. It has several warnings as well. https://pastebin.com/j06ku3yG

Update-3 I didn't added the minified js files for angular-route in to my html and that was the reason I was getting issues. Further more the existing angular script in html page also had version mismatch.

I also corrected some issues with routes after this I faced recursion related issues (could see multiple pages within the same page) Had to make changes to routs.

Thank you all for helping :)

Upvotes: 0

Views: 205

Answers (2)

Aleksey Solovey
Aleksey Solovey

Reputation: 4191

I have modified your code a bit to give you a basic working demo of your app. The routing required an angular-route.js script for 1.2+ AngularJS versions. For both scripts their versions must match. I decided to use 1.6.5. I also replaced bootstrap and jquery with ui.bootstrap - angularjs version.

Here is a working demo:

/* Use `ui.bootstrap` module instead of jQuery + Bootstrap */
var app = angular.module('application', ["ngRoute", "ui.bootstrap"]);
app.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'client/index.html'
    })
    .when('/about', {
      templateUrl: 'client/about.html'
    })
    .when('/store', {
      templateUrl: 'client/store.html'
    })
});
app.controller('appController', function($scope, $location) {
  $scope.isActive = function(path) {
    return path === $location.path();
  }
});
<!DOCTYPE html>
<html>
<!-- Matching angular.js and angular-route.js versions -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-route.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<body>

  <div ng-app="application" ng-controller="appController">

    <header ng-init="isNavCollapsed=true">
      <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" ng-click="isNavCollapsed = !isNavCollapsed">
          <span class="glyphicon glyphicon-menu-hamburger"></span>
          </button>
          </div>
          <div class="collapse navbar-collapse" uib-collapse="isNavCollapsed">
            <ul class="nav navbar-nav navbar-left">
              <li ng-class="{ active: isActive('/')}"><a href="#!">Home</a></li>
              <li ng-class="{ active: isActive('/store')}"><a href="#!store">Store</a></li>
              <li ng-class="{ active: isActive('/about')}"><a href="#!about">About</a></li>
            </ul>
          </div>
        </div>
      </nav>
    </header>
    <div ng-view></div>


    <!-- Separate files -->
    <script type="text/ng-template" id="client/index.html">
      index
    </script>
    <script type="text/ng-template" id="client/about.html">
      about
    </script>
    <script type="text/ng-template" id="client/store.html">
      store
    </script>

  </div>

</body>

</html>

Upvotes: 1

Marcus H&#246;glund
Marcus H&#246;glund

Reputation: 16811

First, you still needs to link the NgRoute from the angular-route.js.

Secondly, to link templates use href="#!store" instead of href="#store"

Here's a working example using angularjs 1.6.9

'use strict';

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

app.config(function($routeProvider){
    $routeProvider
    .when('/', {
        templateUrl: 'home.html'
    })
    .when('/store', {
      templateUrl: 'store.html'
    })
    .when('/about', {
      templateUrl: 'about.html'
    })
  });
<!-- require jquery and bootstrap scripts -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>
    

    
  <div ng-app="application" >
  
  <script type="text/ng-template" id="home.html">
    <div class="view">
        <h2>home</h2>
    </div>
</script>
<script type="text/ng-template" id="store.html">
    <div class="view">
        <h2>store</h2>
    </div>
</script>
<script type="text/ng-template" id="about.html">
    <div class="view">
        <h2>about</h2>
    </div>
</script>
    <header>
      <div id="left_header">Demo Application</div>
    </header>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#!store">Store</a></li>
            <li><a href="#!about">About</a></li>
           </ul>
        </div>
      </nav>
      <div ng-view></div> 
      </div>

Upvotes: 0

Related Questions