CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrapngroute
user8565187
user8565187

Reputation:

What is wrong with my AngularJS routes?

I've created an AngularJS sandbox, so to speak. I used the template html provided by Bootstrap for setup speed purposes, and I plan on using Bootstrap to fancy it up the fast way. While setting everything up, I noticed that my routes aren't working properly. In my index.html file, I've tried placing my angular file in several places, but I don't believe that's the issue. I've also tried using <ng-view></ng-view>, instead of using a div. In app.js, I've tried renaming the route to the templateUrl from the root directory to the end file, app/home/home.html, along with many other configurations. When I load in my browser, all I get is my navigation menu. I don't even get the html from the templateUrl. I may be wrong about all of this, but I can't figure it out. I've placed a generic Bootstrap navigation in my index.html file for my initial set up. What could be my issue?

index.html

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-route.js"></script>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  </head>
  <body>

    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
      <a class="navbar-brand" href="home.html">Angular</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-item nav-link" href="#">Home</a>
          <a class="nav-item nav-link" href="#">About</a>
          <a class="nav-item nav-link" href="#">Contact</a>
        </div>
      </div>
    </nav>



    <ng-view>
    </ng-view>



    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
    <script src="app/app.js"></script>
    <script src="app/home/HomeController.js"></script>
  </body>
</html>

app.js

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

app.config(function($routeProvider){
  $routeProvider
    .when("/home", {
      templateURL: "home.html",
      controller: "HomeController"
    })
    .when("/about", {
      templateURL: "about.html",
      controller: "AboutController"
    })
    .otherwise({redirectTo: "/home"});
});

HomeController.js

var app = angular.module('myApp');

app.controller('HomeController', function($scope){

  $scope.noun = {
    person: "Maximus Aurelius",
    place: "World",
    thing: "sword"
  };

});

home.html

<div>
  <h1>Hello {{noun.person}}</h1>
</div>

My Directory

enter image description here

Dev tools network

enter image description here

Upvotes: 0

Views: 133

Answers (2)

Ryan Brunt
Ryan Brunt

Reputation: 16

Looks like its just a typo in your $routeProvider. templateURL should just be templateUrl.

Upvotes: 0

charlietfl
charlietfl

Reputation: 171669

The path to the templates is relative to the main page. You are looking for the templates in the root where the page file is but they are in subdirectories:

Try:

 $routeProvider
    .when("/home", {
      templateURL: "home/home.html",
      controller: "HomeController"
    })
    .when("/about", {
      templateURL: "about/about.html",
      controller: "AboutController"
    })

Upvotes: 2

Related Questions