0

my index.html

    <html ng-app="myAngApp">
<head>
    <meta charset="utf-8">
    <link href="main.css" rel="stylesheet" type="text/css">
    <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.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="mainscripts.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Roboto|Rokkitt" rel="stylesheet">
</head>

<body>

    <div id="mySidenav" class="sidenav">
        <a href="javascript:void(0)" class="closebtn">&times;</a>
        <a href="#">Home</a>
            <button id="dropdown-btn" class="dropdown-button">Training</button>
            <div class="dropdown-content" id="dropdown-ctn">
                <a href="#Stundenplan">Stundenplan</a>
                <a href="#Training/MuayThai">Muay Thai</a>
                <a href="#Training/Boxen">Boxen</a>
                <a href="#Training/MMA">MMA</a>
                <a href="#Training/BJJ">BJJ</a>
                <a href="#Training/K1">K1</a>
                <a href="#Training/Capoeira">Capoeira</a>
                <a href="#Training/Junioren">Junioren</a>
                <a href="#Training/WingTsun">Wing Tsun</a>
            </div>
        <a href="#/Team">Team</a>
        <a href="#/Kontakt">Kontakt</a>
    </div>



<div id="main">
    <div class="menubutton">
        <span class="openbtn">&#9776; </span>
    </div>

<!-- Slideshow container -->
<div class="slidelogo-ctn">
    <a href="#" >
        <img src="Images/logo.png" class="logoslider"   alt="MMA Vienna logo"/>
    </a>

    <div class="slides">
        <img src="Images/img1.jpg" />
        <img src="Images/img2.jpg" />
        <img src="Images/img3.jpg" />
    </div>
</div>

<div id="textandpicbox" ng-view>
</div>

my mainscripts.js

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

app.config(function($routeProvider) {
  $routeProvider

  .when('/', {
    templateUrl : 'pages/home.html',
    controller  : 'HomeController'
  })

  .when('/Stundenplan', {
    templateUrl : 'pages/stundenplan.html',
    controller  : 'StdplController'
  })

  .when('/Training/MuayThai', {
    templateUrl : 'pages/muaythai.html',
    controller  : 'MuaythaiController'
  })

.when('/Training/Boxen', {
    templateUrl : 'pages/boxen.html',
    controller  : 'BoxenController'
  })

.when('/Training/MMA', {
    templateUrl : 'pages/mma.html',
    controller  : 'MmaController'
  })

.when('/Training/BJJ', {
    templateUrl : 'pages/bjj.html',
    controller  : 'BjjController'
  })    

.when('/Training/K1', {
    templateUrl : 'pages/k1.html',
    controller  : 'K1Controller'
  })    

.when('/Training/Capoeira', {
    templateUrl : 'pages/capoeira.html',
    controller  : 'CapoeiraController'
  })    

.when('/Training/Junioren', {
    templateUrl : 'pages/junioren.html',
    controller  : 'JuniorenController'
  })

.when('/Kontakt', {
    templateUrl : 'pages/kontakt.html',
    controller  : 'KontaktController'
  })        

.when('/Team', {
    templateUrl : 'pages/team.html',
    controller  : 'TeamController'
  })    

.otherwise({redirectTo: '/'});  
});

my local files

folders

pages inside /pages folder

Now heres the problem it only loads my "home.html" file while in the original index.hmtl the other ones don't work at all. Ive loaded the website on a http server and I checked the url when clicking on the links. It does change so the links work but somehow my ng-route doesnt recognize the urls. I have been trying things for around 2 hours now and Im stuck at this point. Ive been looking over the code over and oer and can't really find whats missing. As far as I know an app Controller would have no real function in the scenario or am I wrong?

Jonathan Hall
  • 75,165
  • 16
  • 143
  • 189
T.M
  • 9
  • 1
  • Do you have your developer console open in your browser? Any errors? The Network tab (in Chrome) will you show you if there are any issues loading your templates. Also, have you actually defined your controllers? – Pop-A-Stash Oct 30 '18 at 19:39
  • I dont get any error codes. How would I define them in this example? all the examples ive seen include a scope function which is for injecting a certain text like scope.message = 'hello' but in this example I dont understand how this would be of use. Thanks for explaining if possible :) EDIT: Apparently it only loades the home.hmtl page in the console not all the other ones. – T.M Oct 30 '18 at 19:51

3 Answers3

0

I would say, that you have to move the first Route "/" to the bottom because i'm pretty sure that every url starts with "/" so every other route will not be processed.

Christian M.
  • 11
  • 3
0

It looks like your URLs are not correct:

<a href="#Training/Boxen">Boxen</a>

If you are not using HTML5 mode, and you have not defined a custom delimiter, then it should look like this:

<a href="/Training/Boxen">Boxen</a>
Pop-A-Stash
  • 6,572
  • 5
  • 28
  • 54
  • Oh my bad I have edited them a few times while brooding over the problem. Thats not it though I just changed them and it didnt change anything. – T.M Oct 30 '18 at 19:56
  • If that is true, you should see a network request in your developer tools to retrieve the template when you click a link. If not, then your `href` URL is not correct – Pop-A-Stash Oct 30 '18 at 19:59
  • My urls do get displayed like this: "/#!/#%2FStundenplan" which seems odd. – T.M Oct 30 '18 at 20:02
  • that's not odd, try links like this: `Stundenplan Muay Thai`. And I'm pretty sure route definitions are order dependent, so move the first one to the bottom AS WELL. – BlackICE Oct 30 '18 at 20:24
  • That for some reason breaks also the display of the home.html element... weird – T.M Oct 30 '18 at 20:31
0

Got a fix Guys! Thanks for all the help!

replaced the script sources with an older version

from this:

<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.js"></script>

to this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script>

I need to find a newer synthax for the newer versions. If anybody knows it please lend me a hand :)

T.M
  • 9
  • 1