ng-view not fetching my template Angular 1.6.2

  TFC.config(function($routeProvider){
  $routeProvider
  .when('bookings', {
    templateUrl: 'mybookings.html',
    controller: 'accountCtrl'
  })
  .when('credits', {
    templateUrl: 'mycredits.html',
    controller: 'myCreditsCtrl'
  })
  .when('membership', {
    templateUrl: 'membership.html',
    controller: 'membershipCtrl'
  })
  .when('profile', {
    templateUrl: 'profile.html',
    controller: 'profileCtrl'
  })
  .when('invoices', {
    templateUrl: 'invoice.html',
    controller: 'invoiceCtrl'
  })
  .when('team', {
    templateUrl: 'team.html',
    controller: 'teamCtrl'
  })
  .when('benefits', {
    templateUrl: 'benefits.html',
    controller: 'benefitsCtrl'
  })
  .when('refer', {
    templateUrl: 'refer.html',
    controller: 'referCtrl'
  })
  .when('support', {
    templateUrl: 'support.html',
    controller: 'supportCtrl'
  })
  .when('about', {
    templateUrl: 'accountabout.html',
    controller: 'accountAboutCtrl'
  })
})

and this my html in which I am injecting views

<!DOCTYPE html>
<html ng-app="TFC">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>The Founder's Cafe<title>
    <link href="" rel="stylesheet">
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="">
<head>

<body>
    <section style="background: black;">
        <div class="navbar navbar-default" style="position: static;">
            <div class="navigation-wrapper">
                <a href="" class="custom-logo"><img src="assetsimgwebLogo.png" alt="TFC Logo"><a>
                <ul class="custom-navbar nav navbar-nav">
                    <li class="about-link active"><a href="" class="nav-links">About Us<a><li>
                    <li><a href="" class="nav-links">Facilities<a><li>
                    <li><a href="" class="nav-links">Pricing<a><li>
                    <li><a href="" class="nav-links">Events<a><li>
                    <li><a href="" class="nav-links">Gallery<a><li>
                    <li><button type="button" class="btn btn-default btn-lg navbar-btn" name="button">LOGIN<button><li>
                <ul>
                <div class="ham-wrapper">
                    <div class="hambar-1"><div>
                    <div class="hambar-2"><div>
                    <div class="hambar-3"><div>
                <div>
            <div>
        <div>
        <div style="position: relative; height: 35em; overflow: hidden; background: url('http:www.planwallpaper.comstaticimagescool-wallpapers-hd-8087-8418-hd-wallpapers.jpg'); background-attachment: fixed;">
            <div class="overlay">&nbsp;<div>
        <div>
    <section>
    <section>
        <div class="account-wrapper">
            <div class="account-items">
                <div class="header">
                    <div class="user-image"><img src="" alt=""><div>
                    <div class="user-header">
                        <h3>{{user.name}}<h3>
                        <h4>heading<h4>
                    <div>
                <div>
                <div class="user-items">
                    <div class="item">
                        <div class="item-main">
                            <img src="assetsimgaccounticn-booking.png" alt="">
                            <h5 class="item-name"><a href="">My Booking<a><h5>
                        <div>
                        <div class="item-arrow"><img src="" alt=""><div>
                    <div>
                    <hr>
                    <div class="item">
                    <div class="item-main">
                        <img src="assetsimgaccounticn-logout.png" alt="">
                        <h5 class="item-name"><a href="">Logout<a><h5>
                    <div>
                <div>
            <div>
         <div>
         <div class="account-display">
             <div ng-view=""><div>
         <div>
         <div>
    <section>
    <script src=""><script>
    <script src="" charset="utf-8"><script>
    <script src="" charset="utf-8"><script>
    <script src="" charset="utf-8"><script>
    <script src=""><script>
    <script src="" charset="utf-8"><script>
    <script src="" charset="utf-8"><script>
    <script src="" charset="utf-8"><script>
    <script src="" charset="utf-8"><script>
<body>

<html>

the mybookings.html is in the root folder.

<div class="bookings-header">
  <img src="assetsimgaccounticn-booking.png" alt=""><h4>My Bookings<h4>
<div>
<div class="bookings-info-wrapper"><div>
  <div class="bookings-info">
    <h5>Coworking:<h5>

    <div class="coworking-info">
      <div><div>
      <div>
        <p>Dedicated Desk(Dec 1-Dec 30)<p>
      <div>
    <div>
<div>

the ng-view directive is inside div.account-display and as a test I am trying to show just the mybookings.html when user clicks on the my bookings list item which is inside the first div.item inside div.user-items

The ng-view isn't showing anything, nor am I getting any error. An interesting thing is that when I looked into the network tab of my dev console, mybookings.html is not mentioned in it.

My angular js and angular-route versions are 1.6.2. The jquery version is 3.1.1

Need help with this


ANSWERS:


i created demo and it seems to working fine. If you sure the html file paths are exist then other possible downfall might be version conflict.Check the angular route and angular version is compatible with each other.

  <script data-require="angular.js@1.6.1" data-semver="1.4.9" src=""><script>
  <script data-require="angular-route@1.4.3" data-semver="1.4.3" src=""><script>

Edited

Routes in Angular 1.6 need to add ! when redirecting to state.

<h5 class="item-name"><a href="">My Booking<a><h5>


use <ng-view><ng-view> tag instead of <div ng-view=""><div>

and also the default URL in route provider

.otherwise({
   redirectTo: 'bookings'

})

please check and comment it work or not.


For the mybookings.html file to load default, you have to specify the default url parameter in the route provider. This is the method for that. I hope this will fix your issue.

TFC.config(function($routeProvider){
  $routeProvider
  .when('bookings', {
    templateUrl: 'mybookings.html',
    controller: 'accountCtrl'
  })
  ....
  .otherwise({
       redirectTo: 'bookings'
  })
})

now by default mybookings.html will load



 MORE:


 ? Routes under Routes - Angular 2
 ? angular not able to search parameter from the search string
 ? How to show next and previous data on hover in angular 2
 ? ng-repeat loops too many times
 ? Angularjs Updated table after clicking a link with parameters
 ? Angular All slashes in URL changed to %2F
 ? TypeError: Cannot read property 'template' of undefined
 ? Dynamic ng-controller directives based on $routeProvider params
 ? Unable to make routing with my bootstrap nav bar using ngroute
 ? how to avoid conflicts with angular router 1.6.x