angularjs routing :param always undefined

Question

has someone an idea, why :message always throws "undefined"? i call the page with "MyDomain.com/#AMessage"

ctrl.js:

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

.config(function($routeProvider){
  $routeProvider.when("/:message",
    {
      templateUrl: "index.html",
      controller: "ctrl"
    }
  );
})

.controller('ctrl', function($routeParams) {
  document.getElementById("test").innerHTML = $routeParams.message;
});

index.html:

<!DOCTYPE html>
<head></head>
<body ng-app="AutApp" ng-controller="ctrl">
    <div id = "test"></div>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
    <script src="ctrl.js"></script>
</body>
</html>

Thank you for your help!

surfthecity · Accepted Answer · 2017-02-16 21:51:16Z

1

You are not using ng-route properly. You must define a view. The template for the view cannot be index.html, as that page is the root of your application. Your controller should be associated with the route. More info on ng-route

<!DOCTYPE html>
<body ng-app="AutApp">
  <div ng-view></div>

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

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

    .config(function($routeProvider){
      $routeProvider.when("/:message",
    {
      template: '<div id = "test"></div>',
      controller: "ctrl"
    }
  );
})

.controller('ctrl', function($routeParams) {
  document.getElementById("test").innerHTML = $routeParams.message;
});

</script>

answered Feb 16, 2017 at 21:51

surfthecity

1602 silver badges6 bronze badges

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

Collectives™ on Stack Overflow

angularjs routing :param always undefined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related