0

So after reading here and there on MEAN, I decided to make my first MEAN application which is pretty small, all seems to work except the routeing to make my app a one-page app. Any help would be much appreciated!

 app.config(function($routeProvider){
   $routeProvider
     .when('/', {
       templateUrl: 'main.html',
       controller: 'mainController'
     })
     .when('/login', {
       templateUrl: 'login.html',
       controller: 'authController'
     })
     .when('/register', {
       templateUrl: 'register.html',
       controller: 'authController'
     });
 });

Anyway, I adopted a boilerplate navigation bar

       <nav class="navbar-fluid navbar-default navbar-fixed-top">
         <div class="container">
           <a class="navbar-brand" href="#">IoT</a>
           <p class="navbar-text">IoT</p>
           <p class="navbar-right navbar-text" ng-hide="authenticated"><a href="#/login">Login</a> or <a href="#/register">Register</a></p>
           <p class="navbar-right navbar-text" ng-show="authenticated"><a href="#" ng-click="signout()">Logout</a></p>
           <p class="navbar-right navbar-text" ng-show="authenticated">Signed in as {{current_user}}</p>
         </div>
       </nav>

And, when I run it on localhost:3000, the homepage address I got instead is

 http://localhost:3000/#!/

where I was expecting

 http://localhost:3000/#/

And when I clicked on the 'register' link, the address I got is

 http://localhost:3000/#!/#%2Fregister

where as I was expecting

 http://localhost:3000/#/register

Is that normal? Maybe it's bcs of the version of Angular I was using?

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-resource.min.js"></script>

It was all fine before, but then I stripped down the HTML and make the main page pull individual HTML pages one-by-one then this happened.

blueblood
  • 143
  • 8

4 Answers4

1

Change your links from <a href="#/login"> to <a href="#!/login">, <a href="#"> to <a href="#!"> etc..

I also have this issue but changing from a hash to hashbang resolves it for me.

ZombieTfk
  • 706
  • 7
  • 19
  • 2
    Can you explain why? It's weird that you have to add ! for it to work. – blueblood Dec 14 '16 at 10:45
  • Maybe [this](http://stackoverflow.com/questions/16677528/location-switching-between-html5-and-hashbang-mode-link-rewriting) will be able to provide a better answer than me about the why. This is a new default behaviour (Although I can't find any documentation to support this). Angular seems to be encouraging the use of SEO friendly links in SPAs. – ZombieTfk Dec 14 '16 at 12:02
  • Also see [here](https://docs.angularjs.org/guide/$location#hashbang-mode-default-mode-) – ZombieTfk Dec 14 '16 at 12:56
  • thanks for the links, do you know whether the change in hashbang will affect the backend routing I've written so far in Express? – blueblood Dec 14 '16 at 14:28
  • I'm not hugely experienced with Express, but it should be alright as long as you're using only using ngRoute to load in templates/controllers across a single page. If you're running express callbacks based on what templates are pulled it could be a bit more of an issue though. – ZombieTfk Dec 14 '16 at 15:08
0
App.config(['$routeProvider', '$locationProvider', function config($routeProvider, $locationProvider) {  
    $locationProvider.hashPrefix('')

    $routeProvider
        .when('/', {
            templateUrl: 'login.html',
            controller: 'loginController'
        })
        .otherwise('/');
}]);

will work see https://docs.angularjs.org/api/ng/provider/$locationProvider

Troajan
  • 13
  • 5
0

Try this one. I'm not sure this will fix your issue. But please try this one.

Change your route provider by including default parameter.

app.config(function ($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'main.html',
                controller: 'mainController'
            })
            .when('/login', {
                templateUrl: 'login.html',
                controller: 'authController'
            })
            .when('/register', {
                templateUrl: 'register.html',
                controller: 'authController'
            })
            .otherwise({
                redirectTo: '/'
            });
    });

and provide the links like <a href="#/login">Login</a>

Nitheesh
  • 19,238
  • 3
  • 22
  • 49
0

Try this one:

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when('/', {
       templateUrl: 'main.html',
       controller: 'mainController'
     })
     .when('/login', {
       templateUrl: 'login.html',
       controller: 'authController'
     })
     .when('/register', {
       templateUrl: 'register.html',
       controller: 'authController'
     })
     .otherwise({
       redirectTo: '/'
     });
});

For Sign Out, You should use such as:

<p class="navbar-right navbar-text" ng-show="authenticated"><a href="#/" ng-click="signout()">Logout</a></p>
Peeyush Kumar
  • 51
  • 5