Troubaling with AngularJS Routing issues

Question

Troubaling with AngularJS Routing issues

I am encountering an issue with my routing system. The "otherwise" case is functioning correctly, however, when I click on a menu item, the routing does not load the corresponding page automatically. Can someone assist me in identifying what is wrong with my code?

Below is the code related to the routing section:

var myColors = angular.module('myFirstModule', ['ngRoute']);
myColors.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when('/home', {
      templateUrl: 'home.html'
    })
    .when('/directory', {
      templateUrl: 'directory.html',
      controller: 'myFirstModule'
    }).otherwise({
      redirectTo: '/directory'
    });
}]);

Here is the HTML div where I have added the links:

<ul>
    <li><a href="#/home">Home </a></li>
    <li><a href="#/directory">Directory</a></li>
</ul>

Here is a Plunker showcasing my complete code

javascript angularjs routes angularjs-1.6

Answer 1

Answer №1

For users of AngularJS 1.6, make sure to include an exclamation mark (!) in your href routing.
For example, href="#/home" should be changed to href="#!/home".

<ul>
    <li><a href="#!/home">Home</a></li>
    <li><a href="#!/directory">Directory</a></li>
</ul>

To remove this prefix, refer to this answer.

Answer 2

For users of AngularJS 1.6, make sure to include an exclamation mark (!) in your href routing.
For example, href="#/home" should be changed to href="#!/home".

<ul>
    <li><a href="#!/home">Home</a></li>
    <li><a href="#!/directory">Directory</a></li>
</ul>

To remove this prefix, refer to this answer.

Answer 3

Answer №2

The controller name you are using is incorrect and as @Mistalis pointed out, you need to include #! in your href. If you wish to remove the !, simply use

$locationProvider.hashPrefix('');

in your config. Then you can use your href without !

JS

var myColors = angular.module('myFirstModule', ['ngRoute']);
myColors.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when('/home', {
      templateUrl: 'home.html'
    })
    .when('/directory', {
      templateUrl: 'directory.html',
      controller: 'myFirstController' //insert your controller name here
    }).otherwise({
      redirectTo: '/directory'
    });
}]);

HTML

<ul>
    <li><a href="#!/home">Home </a></li>
    <li><a href="#!/directory">Directory</a></li>
</ul>

Working Plunker: https://plnkr.co/edit/GAob2u4MdnzXXltTZMg2?p=preview

Answer 4

The controller name you are using is incorrect and as @Mistalis pointed out, you need to include #! in your href. If you wish to remove the !, simply use

$locationProvider.hashPrefix('');

in your config. Then you can use your href without !

JS

var myColors = angular.module('myFirstModule', ['ngRoute']);
myColors.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when('/home', {
      templateUrl: 'home.html'
    })
    .when('/directory', {
      templateUrl: 'directory.html',
      controller: 'myFirstController' //insert your controller name here
    }).otherwise({
      redirectTo: '/directory'
    });
}]);

HTML

<ul>
    <li><a href="#!/home">Home </a></li>
    <li><a href="#!/directory">Directory</a></li>
</ul>

Working Plunker: https://plnkr.co/edit/GAob2u4MdnzXXltTZMg2?p=preview

Troubaling with AngularJS Routing issues

Answer №1

Answer №2

Similar questions

Creating a unique-looking visual representation of progress with arcs

I am looking for a way to connect a saved phone number with a Vue tel input so that I can make changes

My confidential environment variables are being inadvertently revealed to the client by Next.js

Transferring sizable JavaScript array to the Web API

The compatibility of ng-switch-when and ng-class

Prevent AngularJS UI Router view from refreshing upon tab change

Is it possible for me to include detailed information to a particular attribute of an object?

Is jQuery Mobile Autocomplete's search feature activated after typing 3 letters?

Do I need to make any changes to the application when adding a new couchbase node to the cluster

Employing a factory for transferring information between controllers in AngularJS

What is the significance of the error message "Uncaught (in promise) Object"?

What is the best way to distinguish between various objects that are all in a single line?

Error: Issue transferring data to controller from Ng-Style

Creating reversed/generate URLs from Routes in Angular2 (using typescript)

I need help figuring out how to get a horizontal scrollbar positioned at the top of a div to function properly once the content has been loaded using ajax

Using JavaScript to Parse JSON with Carriage Returns and Line Breaks

Dialog in Angular Material refuses to close even after calling the dialog.close() function

Execute JavaScript function only if it is the final invocation

Waiting for all promises to resolve: A step-by-step guide

Can you provide guidance on displaying flash messages in my template using Express.js?