AngularJS routing with templateUrl

Question

I have a problem with the AngularJS routing: I don't get any feedback of the page. No errors or view-switches.

I checked my implementation of the module, but it's declared in the right way. Then I searched for typos such as templateURL, but I didn't find any. I also tried to use ng-href instead of href in the list, but then the links weren't clickable anymore.

Here is my plunker.

And my code:

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>

Made the templates:

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

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

Declared a Angular module:

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

Added the $routeProvider to my config:

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('!');

}]);

Which is the exact error you are getting?

AndreaM16
– AndreaM16

2016-11-16 14:51:04 +00:00
Commented Nov 16, 2016 at 14:51 — AndreaM16
– AndreaM16, Commented Nov 16, 2016 at 14:51
I don't get any error; I get no feedback of the page

Ame Lives
– Ame Lives

2016-11-16 14:54:38 +00:00
Commented Nov 16, 2016 at 14:54 — Ame Lives
– Ame Lives, Commented Nov 16, 2016 at 14:54
jQuery has to be loaded before angular gets loaded.

Matheno
– Matheno

2016-11-16 15:02:27 +00:00
Commented Nov 16, 2016 at 15:02 — Matheno
– Matheno, Commented Nov 16, 2016 at 15:02

AndreaM16 · Accepted Answer · 2016-11-16 15:41:38Z

5

In your Plunker, there were some issues related to imports. To make it easy, I simply removed both jQuery and Bootstrap. I also put all your modules in a single app.js file.

There were some errors in your html:

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>

    <!--AngularJS-->
    <script data-require="[email protected]" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
    <script data-require="[email protected]" 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 inject only external modules in your app module, not all controller, services etc

Notice that, to make it easy, I removed also your Service since you did not share it and it was useful.

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

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

Here You can find the working plunker reproducing your application.

Hope I've been helpful.

answered Nov 16, 2016 at 15:41

AndreaM16

4,0055 gold badges37 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ame Lives Over a year ago

I think we wrote the comment in the same minute, so I didn't saw it before. You explained it ways better than me. And the part with the $locationProvider ist good to know :)

davidxxx Over a year ago

relevant comment for missing base tag declaration in header tag.

davidxxx · Accepted Answer · 2016-11-17 08:19:23Z

The remaining and not visible problem is here :

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

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

So, it should be :

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

Update :

But in fact, in your case, it works even without precising the array :

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

I updated the plunker and the app.js with both versions. I have the impression that the array is not mandatory (any longer). So, it seems better to ignore that parameter, especially, if with bad value, it may create side-effects.

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

I have removed $locationProvider.hashPrefix('!') as not suitable for the url you are using. See @AndreaM16 answer for that.

Besides, you have not declared your service 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 the array parameter in 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="[email protected]" 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>

Do you have any idea on why Plunker does not really like hashPrefix? Never seen that.
@AndreaM16, No idea. Maybe a side effect with base url. You have already used hashPrefix with Plunker ?
Well no, never used it, but I usually use it in my applications.

StepUp · Accepted Answer · 2016-11-17 07:25:55Z

1

The order of loading java script files is very important. Load 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="[email protected]" 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>

It means that you are loading Bootstrap.js files, but Bootstrap cannot work without jQuery library. So it means you should load jQuery at first, then Bootstrap.js. And other libraries should be reordered(I've shown in an example above).

In addition, you can use Console in your browser to see whether there are errors and what errors you have.

edited Nov 17, 2016 at 7:25

answered Nov 16, 2016 at 15:01

StepUp

38.5k16 gold badges95 silver badges159 bronze badges

1 Comment

Ame Lives Over a year ago

thank you, I think, that I also have to change the order of angular and angular-routes. But it does not solve the problem

Collectives™ on Stack Overflow

AngularJS routing with templateUrl

3 Answers 3

2 Comments

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related