ng-view Not working

Question

I cannot get the following code to run. I have tried many many things including: $locationprovider.html5mode(true) (and a element in the of my index.html.)

With this code I get /#!/index#%2Ffishes (with my base infront of it) in my URL. With html5mode I would get #fishes but the view would not change.

Plunkr: http://plnkr.co/edit/a2lkCuxMf0ll9e9QAyiv?p=preview

Index:

<body  ng-app="VissenApp">
    <div class="AngularWrapper">
        <div ng-view>
        </div>
    </div>
</body>

App.js:

var app = angular.module("VissenApp", ["ngRoute"]);
app.config(function($routeProvider,$locationProvider) {
    $locationProvider.html5Mode(true);
    $locationProvider.hashPrefix('!');
    $routeProvider
    .when("/index", {
        templateUrl : "landing.html",
    controller: "fishesController"
    })
    .when("/fishes", {
        templateUrl : "fishes.html",
        controller: "fishesController"
    })
    .otherwise({
        templateUrl : "landing.html",
controller : "fishesController"
    });

}); 
app.controller('fishesController', function($scope,$location) {
    $scope.toFishes = function () {
        $location.path("/fishes");
    };
});

Fishes.html

<div class="container-fluid">
    <div class="jumbotron">
    gfhhgfh
    </div>
</div>

Landing.html

<div class="container-fluid landing_background">
    <div  id="landing_logowrapper" >
            <div  ng-click="toFishes()" id="landing_logobackground" > 
                </div>
    </div>
</div>

seems like a small enough app. In these cases, a plunker reproducing the issue is usually really helpful. — GPicazo, Dec 21 '16 at 19:05
Where are your html template files placed relative to your app.js? — CraigR8806, Dec 21 '16 at 19:06
I have added a Plunker reproduction. The HTML template files are 1 step back. My JS is in /js/app.js and html files are in root. — Kraishan, Dec 21 '16 at 19:10
@Kraishan, in your question, check the HTML code of `Landing.html`: there is a closing `` tag. Check also the `network` tab for check if the requests are successful. — Mauricio Arias Olave, Dec 21 '16 at 20:00
I've edited the main post. Right now the view changes to /fishes. However, if I reload that page obviously it goes to /fishes which does not exist. How to workaround? — Kraishan, Dec 21 '16 at 20:10
this seems related: http://stackoverflow.com/questions/41211875/angularjs-1-6-0-latest-now-routes-not-working#comment69623221_41211875. changing your href to `` seems to solve the issue in the example you posted. — Claies, Dec 21 '16 at 20:26
Now my page refreshed, using the hasPrefix('') and using #/fishes @Claies — Kraishan, Dec 21 '16 at 21:01

ng-view Not working

0 Answers0