Ame Lives Ame Lives - 19 days ago 8
AngularJS Question

AngularJS Routing with templateUrl

I have a problem with the AngularJS routing.
And I know that here on stackoverflow there are many open threads about this topic. Unfortunately they have no solution for my problem.

The problem is that I don't get any feedback of the page. No errors or view-switches.

I checked my implementation of the module, but this is declared in the right way. Then I searched for tipping-errors like templateURL, but it is wasn't the solution too. 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: http://plnkr.co/edit/dX25tGBGG75Jv2Ow9mAD

And my code


  1. 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 the templates

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

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

  2. Declared a Angular module:

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

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


    }]);



I hope that someone can help me.

Answer

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="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 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.