Geek Answers Handbook

Corner Routing Using the Url Pattern

I have a problem with AngularJS routing: I am not getting any feedback from this page. No errors or view switches.

I checked my module implementation, but it pointed correctly. Then I searched for typos such as templateURL , but I did not find them. I also tried using ng-href instead of the href in the list, but then the links were no longer viewable.

Here is my plunker .

And my code is:

  • Created my navigation:

     <body ng-app="Productportfolio"> <ul> <li> <a href="#/home">Home</a> </li> <li> <a href='#/privat'>Log in</a> </li> </ul> <ng-view></ng-view> <!--own js --> <script src="app.js"></script> <!--Controller --> <script src="ProductCtrl.js"></script> <!--Services --> <!--Direktives--> </body>

  1. Made templates:

     //home.html <div> <h1> Home </h1> </div> //private.html <div> <h1> Private</h1> </div>

  2. Angular module declared:

     angular.module('Productportfolio', ['ngRoute'])

  3. Added $ routeProvider to my configuration:

     angular.module('Productportfolio', ['ngRoute', 'ProductService', 'ProductCtrl']) .config(['$routeProvider, $locationProvider', function ($routeProvider, $locationProvider) { $routeProvider .when('/home', { templateUrl: 'home.html', controller: 'ProductCtrl' }) .when('/private', { templateUrl: 'private.html', controller: 'ProductCtrl' }) .otherwise({ redirectTo: '/home', controller: 'ProductCtrl' }); $locationProvider.hashPrefix('!'); }]);
+7
angularjs angular-routing
source share
3 answers

There were some import issues in your Plunker. To simplify the task, I just deleted both jQuery and Bootstrap . I also placed all your modules in one app.js file.

There were errors in your html :

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <!--AngularJS--> <script data-require=" angularjs@1.5.8 " data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script> <script data-require=" angular-route@1.5.8 " data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script> </head> <body ng-app="Productportfolio"> <ul> <li> <a ng-href="#home">Home</a> </li> <li> <a ng-href="#private">Private</a> </li> </ul> <ng-view></ng-view> <!--own js --> <script src="app.js"></script> </body> </html>
  • Import Angular BEFORE ngRoute or any other module
  • Use ng-href='#routeName' or otherwise

And in your js :

 var myApp = angular.module('Productportfolio', ['ngRoute']); myApp.controller('ProductCtrl', ['$scope',function ($scope) { var vm = this; }]); myApp.config(['$routeProvider', function ($routeProvider) { $routeProvider .when('/home', { templateUrl: 'home.html', controller: 'ProductCtrl' }) .when('/private', { templateUrl: 'private.html', controller: 'ProductCtrl' }) .otherwise({ redirectTo: '/home', controller: 'ProductCtrl' }); }]);
  • You need to enter only external modules into your application module, and not the entire controller, services, etc.

Please note that to facilitate the work, I also deleted your service, since you did not share it, and it was useful.

And last but not least, if you want to use $locationProvider.hashPrefix('!'); to use hashbangs , you need to add <base href="/" /> to the end of your head .

For some reason, plunker does not allow me to do this, but I'm sure you will get it to work on your version.

Here you can find a working plunk reproducing your application.

Hope i was helpful.

+5
source share

The remaining and incomprehensible problem is here:

 angular.module('Productportfolio', ['ngRoute', 'ProductService', 'ProductCtrl']) .config(['$routeProvider, $locationProvider',

config() function of the module object takes as an argument an array of strings, and not a string with "," as the char delimiter inside it. See an example and a document here: https://docs.angularjs.org/guide/providers#provider-recipe

So this should be:

 angular.module('Productportfolio', ['ngRoute', 'ProductService', 'ProductCtrl']) .config(['$routeProvider', '$locationProvider',

Update :

But in fact, in your case, it works even without a precision array:

 angular.module('Productportfolio', ['ngRoute', 'ProductService', 'ProductCtrl']) .config(

I updated plunker and app.js from both versions. I got the impression that the array is optional (more). Therefore, it is better to ignore this parameter, especially if it has poor value, it can create side effects.

Here's the plunker with corrections (ordered function lib, typos and config): http://plnkr.co/edit/NTn6Zmav5RX4V8zgHPOG?p=preview

I deleted $locationProvider.hashPrefix('!') As not suitable for the URL you are using. See @ AndreaM16's answer for this.

In addition, you have not yet announced your service that you want to use in your controller.

app.js

 angular.module('Productportfolio', ['ngRoute']) .config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { $routeProvider .when('/home', { templateUrl: 'home.html', controller: 'ProductCtrl' }) .when('/private', { templateUrl: 'private.html', controller: 'ProductCtrl' }) .otherwise({ redirectTo: '/home', controller: 'ProductCtrl' }); }] );

or app.js without an array parameter in the config function:

 angular.module('Productportfolio', ['ngRoute']) .config( function ($routeProvider, $locationProvider) { $routeProvider .when('/home', { templateUrl: 'home.html', controller: 'ProductCtrl' }) .when('/private', { templateUrl: 'private.html', controller: 'ProductCtrl' }) .otherwise({ redirectTo: '/home', controller: 'ProductCtrl' }); // $locationProvider.hashPrefix('!'); } );

index.html:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <!--Bootstrap--> <script data-require=" jquery@ *" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> <script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script><!-- Tether for Bootstrap --> <link data-require=" bootstrap@ *" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" /> <script data-require=" bootstrap@ *" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script> <!--AngularJS--> <script data-require=" angularjs@1.5.8 " data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script> <script data-require=" angular-route@ *" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script> <!--own js --> <script src="app.js"></script> <!--Controller --> <script src="ProductCtrl.js"></script> <!--Services --> <!--Direktives--> </head> <body ng-app="Productportfolio"> <ul> <li> <a href="#home">Home</a> </li> <li> <a href="#private">Log in</a> </li> </ul> <div ng-view></div> </body> </html>
+3
source share

The loading order of java script files is very important . Download in the following order:

 <link data-require=" bootstrap@ *" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" /> <script data-require=" jquery@ *" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> <script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script> <script data-require=" bootstrap@ *" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script> <!--AngularJS--> <script data-require=" angularjs@1.5.8 " data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script> <script data-require=" angular-route@ *" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script>

This means that you are loading Bootstrap.js files, but Bootstrap cannot work without the jQuery library. So you must first load jQuery , then Bootstrap.js . And other libraries should be reordered (I showed in the example above).

In addition, you can use Console in your browser to find out if there are any errors and what errors you have.

+1
source share

More articles:


All Articles